@import url("https://api.fontshare.com/v2/css?f[]=satoshi@1,2&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

:root {
  font-family: "Satoshi", "Inter", system-ui, sans-serif;
  color: #0f172a;
  background: #f3f5f7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

html {
  scroll-behavior: smooth;
  background: #08101d;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #f3f5f7;
}

[hidden] {
  display: none !important;
}

a {
  text-decoration: none;
  color: inherit;
}

.page {
  min-height: 100vh;
  background: radial-gradient(1200px 700px at 80% 10%, rgba(14, 165, 233, 0.12), transparent 70%),
    radial-gradient(900px 500px at 0% 0%, rgba(16, 185, 129, 0.08), transparent 60%),
    #f3f5f7;
  position: relative;
  overflow-x: hidden;
}

.page > * {
  position: relative;
  z-index: 1;
}

.page::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(16, 185, 129, 0.08), transparent 60%),
    radial-gradient(circle at 80% 10%, rgba(14, 165, 233, 0.1), transparent 55%),
    radial-gradient(circle at 50% 80%, rgba(99, 102, 241, 0.08), transparent 60%);
  opacity: 0.6;
  animation: drift 18s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(14px);
  background: rgba(243, 245, 247, 0.8);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #0f172a;
  color: white;
  display: grid;
  place-items: center;
  font-weight: 700;
}

.brand-name {
  font-weight: 600;
}

.brand-tagline {
  font-size: 12px;
  color: #64748b;
}

.nav {
  display: none;
  gap: 18px;
  font-size: 14px;
  color: #475569;
}

.nav a:hover {
  color: #0f172a;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 80px 0 60px;
}

.hero::after {
  content: "";
  position: absolute;
  inset: -20% 0 0 0;
  background: radial-gradient(circle at 20% 20%, rgba(16, 185, 129, 0.25), transparent 60%),
    radial-gradient(circle at 80% 10%, rgba(14, 165, 233, 0.2), transparent 55%),
    radial-gradient(circle at 50% 80%, rgba(99, 102, 241, 0.15), transparent 65%);
  opacity: 0.6;
  animation: heroGlow 14s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.hero-grid {
  display: grid;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-copy h1 {
  font-size: clamp(2.5rem, 4vw, 3.7rem);
  line-height: 1.1;
  margin: 18px 0;
}

.hero-copy p {
  font-size: 1.1rem;
  color: #475569;
}

.pill {
  display: inline-flex;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
}

.hero-actions {
  display: flex;
  gap: 12px;
  margin: 24px 0 18px;
  flex-wrap: wrap;
}

.btn {
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn.primary {
  background: #0f172a;
  color: white;
  box-shadow: 0 20px 60px -40px rgba(15, 23, 42, 0.7);
}

.btn.primary:hover {
  transform: translateY(-2px);
  background: #1e293b;
}

.btn.ghost {
  background: transparent;
  border-color: rgba(15, 23, 42, 0.2);
  color: #0f172a;
}

.btn.ghost:hover {
  border-color: rgba(15, 23, 42, 0.4);
}

.btn.light {
  background: white;
  color: #0f172a;
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: #64748b;
}

.hero-card {
  position: relative;
  border-radius: 32px;
  padding: 10px;
  background: linear-gradient(140deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.02));
  box-shadow: 0 30px 80px -50px rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(15, 23, 42, 0.08);
  animation: float 6s ease-in-out infinite;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.hero-card::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 34px;
  background: conic-gradient(
    from 120deg,
    rgba(16, 185, 129, 0.25),
    rgba(14, 165, 233, 0.2),
    rgba(99, 102, 241, 0.2),
    rgba(16, 185, 129, 0.25)
  );
  filter: blur(18px);
  opacity: 0.4;
  z-index: 0;
  animation: ringSpin 12s linear infinite;
}

.hero-card:hover {
  transform: translateY(-6px) rotate(-0.6deg) scale(1.01);
  box-shadow: 0 40px 90px -50px rgba(15, 23, 42, 0.65);
}

.doc-paper {
  background: white;
  border-radius: 26px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 12px;
  z-index: 1;
}

.doc-paper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(16, 185, 129, 0.08), transparent 50%, rgba(14, 165, 233, 0.08));
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

.doc-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  z-index: 2;
}

.doc-brand {
  display: flex;
  gap: 12px;
  align-items: center;
}

.doc-logo {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #0f172a;
  color: white;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
}

.doc-brand-name {
  font-weight: 600;
  font-size: 14px;
}

.doc-brand-sub {
  font-size: 11px;
  color: #64748b;
}

.doc-meta {
  display: grid;
  gap: 6px;
  font-size: 11px;
  color: #64748b;
  text-align: right;
}

.doc-meta strong {
  display: block;
  color: #0f172a;
}

.doc-address {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  font-size: 11px;
  color: #64748b;
  position: relative;
  z-index: 2;
}

.doc-address h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #0f172a;
  margin-bottom: 6px;
}

.doc-title {
  margin-top: 18px;
  font-weight: 600;
  font-size: 16px;
  position: relative;
  z-index: 2;
}

.doc-table {
  margin-top: 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.1);
  padding-top: 10px;
  position: relative;
  z-index: 2;
}

.doc-table-head,
.doc-table-row {
  display: grid;
  grid-template-columns: 1.5fr 0.7fr 0.7fr 0.8fr;
  font-size: 11px;
  gap: 8px;
  padding: 6px 0;
  align-items: center;
}

.doc-table-head {
  font-weight: 600;
  color: #0f172a;
}

.doc-table-row {
  color: #475569;
  border-bottom: 1px dashed rgba(15, 23, 42, 0.08);
}

.doc-totals {
  margin-top: 16px;
  background: #f3f5f7;
  border-radius: 16px;
  padding: 12px;
  display: grid;
  gap: 6px;
  font-size: 11px;
  color: #64748b;
  position: relative;
  z-index: 2;
}

.doc-totals div {
  display: flex;
  justify-content: space-between;
}

.doc-totals .total {
  font-weight: 600;
  color: #0f172a;
}

.doc-footer {
  margin-top: 14px;
  font-size: 10px;
  color: #64748b;
  position: relative;
  z-index: 2;
}

.doc-marker {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ef4444;
  color: white;
  font-weight: 700;
  font-size: 12px;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 20px -10px rgba(239, 68, 68, 0.8);
  animation: markerPulse 2.5s ease-in-out infinite;
  z-index: 3;
}

.doc-marker.m1 {
  top: 18px;
  left: 18px;
}

.doc-marker.m2 {
  top: 18px;
  right: 22px;
}

.doc-marker.m3 {
  top: 120px;
  right: 22px;
  animation-delay: 0.6s;
}

.doc-marker.m4 {
  top: 210px;
  left: 18px;
  animation-delay: 1s;
}

.doc-marker.m5 {
  bottom: 80px;
  right: 28px;
  animation-delay: 1.4s;
}

.doc-scan {
  position: absolute;
  left: -10%;
  top: 20%;
  width: 120%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.8), transparent);
  animation: scan 5s ease-in-out infinite;
  opacity: 0.6;
  z-index: 1;
}

.scroll-down {
  margin-top: 30px;
  text-align: center;
  color: #94a3b8;
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  animation: bounce 3s ease-in-out infinite;
}

.stats {
  padding: 40px 0 60px;
}

.stats-grid {
  display: grid;
  gap: 18px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 26px;
  padding: 24px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 20px 60px -40px rgba(15, 23, 42, 0.7);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.stat-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 30px 70px -45px rgba(15, 23, 42, 0.75);
}

.stat-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.stat-card p {
  font-size: 13px;
  color: #64748b;
}

.features,
.story,
.faq,
.cta {
  padding-bottom: 60px;
}

.ai-flow {
  padding-bottom: 60px;
}

.ai-flow-grid {
  display: grid;
  gap: 18px;
  margin-bottom: 26px;
}

.ai-step {
  border-radius: 24px;
  padding: 20px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 20px 60px -45px rgba(15, 23, 42, 0.6);
}

.prompt-card span,
.think-card span {
  display: inline-flex;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #047857;
  font-weight: 600;
  margin-bottom: 10px;
}

.prompt-card p {
  font-size: 16px;
  color: #0f172a;
}

.think-card {
  background: #0b1120;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
  overflow: hidden;
}

.think-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(16, 185, 129, 0.25), transparent 60%);
  opacity: 0.4;
}

.think-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.think-card pre {
  margin: 0;
  font-family: "SFMono-Regular", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.06);
  padding: 14px;
  border-radius: 16px;
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.8);
}

.thinking-dots {
  display: flex;
  gap: 6px;
}

.thinking-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  animation: dotPulse 1.4s infinite;
}

.thinking-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.thinking-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

.a4-preview {
  border-radius: 32px;
  padding: 18px;
  background: linear-gradient(140deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.02));
  box-shadow: 0 30px 80px -50px rgba(15, 23, 42, 0.6);
}

.doc-large {
  min-height: 680px;
  font-size: 13px;
}

.section-head {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
}

.section-head h2 {
  font-size: 28px;
}

.section-head p {
  color: #64748b;
}

.feature-grid {
  display: grid;
  gap: 16px;
}

.feature-card {
  padding: 22px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 20px 60px -40px rgba(15, 23, 42, 0.6);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.feature-card:hover {
  transform: translateY(-6px) rotate(-0.3deg);
  box-shadow: 0 30px 80px -50px rgba(15, 23, 42, 0.7);
}

.feature-card h3 {
  margin-bottom: 8px;
}

.feature-card p {
  color: #64748b;
  font-size: 14px;
}

.examples {
  padding-bottom: 60px;
}

.example-list {
  display: grid;
  gap: 20px;
}

.example-item {
  display: grid;
  gap: 18px;
  align-items: center;
}

.example-doc {
  background: white;
  border-radius: 24px;
  padding: 18px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 20px 50px -40px rgba(15, 23, 42, 0.6);
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.example-doc::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(16, 185, 129, 0.12), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}

.example-doc > * {
  position: relative;
  z-index: 1;
}

.example-doc:hover::after {
  opacity: 1;
}

.example-doc:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 70px -45px rgba(15, 23, 42, 0.7);
}

.example-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}

.example-head strong {
  display: block;
  font-size: 14px;
}

.example-head span {
  color: #64748b;
  font-size: 11px;
}

.example-logo {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #0f172a;
  color: white;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
}

.example-total {
  font-weight: 600;
  color: #0f172a;
}

.example-body {
  margin-top: 14px;
  display: grid;
  gap: 8px;
  font-size: 12px;
  color: #475569;
}

.example-body div {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr 0.6fr;
  gap: 8px;
}

.example-prompt {
  border-radius: 22px;
  padding: 18px;
  border: 1px solid rgba(16, 185, 129, 0.2);
  background: rgba(16, 185, 129, 0.08);
  position: relative;
  overflow: hidden;
}

.example-prompt::before {
  content: "";
  position: absolute;
  inset: -40% -10%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.25), transparent 70%);
  animation: glowSweep 6s ease-in-out infinite;
  opacity: 0.6;
}

.example-prompt span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #047857;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.example-prompt p {
  margin-top: 10px;
  font-size: 14px;
  color: #0f172a;
  position: relative;
  z-index: 1;
}

.glass {
  background: rgba(255, 255, 255, 0.75);
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 36px;
  box-shadow: 0 30px 80px -60px rgba(15, 23, 42, 0.5);
}

.accordion {
  display: grid;
  gap: 12px;
}

.accordion-item {
  background: white;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.accordion-trigger {
  width: 100%;
  padding: 16px 18px;
  background: transparent;
  border: none;
  text-align: left;
  font-weight: 600;
  cursor: pointer;
}

.accordion-panel {
  height: 0;
  overflow: hidden;
  padding: 0 18px;
  opacity: 0;
  transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

.accordion-panel p {
  padding: 0 0 16px;
  color: #64748b;
}

.accordion-item.is-open .accordion-panel {
  opacity: 1;
}

.faq-grid {
  display: grid;
  gap: 12px;
}

.faq-grid details {
  border-radius: 18px;
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: white;
}

.faq-grid summary {
  font-weight: 600;
  cursor: pointer;
}

.faq-grid p {
  margin-top: 10px;
  color: #64748b;
  font-size: 14px;
}

.cta-panel {
  background: linear-gradient(120deg, #0f172a, #0b1120, #13224a);
  border-radius: 36px;
  padding: 36px;
  color: white;
  position: relative;
  overflow: hidden;
  box-shadow: 0 35px 60px -40px rgba(15, 23, 42, 0.7);
}

.cta-panel::before {
  content: "";
  position: absolute;
  inset: -40% 0 0 0;
  background: radial-gradient(circle at 20% 20%, rgba(16, 185, 129, 0.35), transparent 60%);
}

.cta-panel > * {
  position: relative;
  z-index: 1;
}

.cta-main {
  display: grid;
  gap: 20px;
}

.cta-label {
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #a7f3d0;
}

.cta-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cta-note {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 10px 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  width: fit-content;
}

.cta-arguments {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.cta-arguments div {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 10px 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
}

.footer {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.7);
  padding: 30px 0 40px;
  color: #64748b;
}

.footer .container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* App workspace */
.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  background: #0b1120;
  color: white;
}

.preview-mode .app-shell {
  grid-template-columns: 1fr;
}

.preview-mode .app-sidebar,
.preview-mode .template-generator,
.preview-mode .template-gallery,
.preview-mode .builder-column.tools,
.preview-mode .builder-column.properties,
.preview-mode .app-topbar,
.preview-mode .app-actions,
.preview-mode .template-generator,
.preview-mode .template-gallery {
  display: none;
}

.preview-mode .builder {
  grid-template-columns: 1fr;
}

.preview-mode .canvas-drop {
  border: none;
  background: transparent;
  padding: 0;
}

.preview-mode .a4-wrapper {
  border: none;
  box-shadow: none;
  background: transparent;
  max-height: none;
  overflow: visible;
}

.app-sidebar {
  padding: 22px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.92));
}

.sidebar-top .brand {
  margin-bottom: 12px;
}

.sidebar-search input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: white;
}

.chat-list {
  display: grid;
  gap: 10px;
}

.chat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chat-item:hover,
.chat-item.active {
  border-color: rgba(52, 211, 153, 0.6);
  background: rgba(52, 211, 153, 0.12);
}

.chat-folder {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-folder span {
  display: inline-flex;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.app-main {
  padding: 24px;
  background: #f3f5f7;
  color: #0f172a;
}

.error-banner {
  margin-bottom: 16px;
  border-radius: 12px;
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(254, 242, 242, 0.9);
  color: #991b1b;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
}

.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.app-eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #64748b;
}

.app-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mode-toggle,
.zoom-control {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #64748b;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.04);
}

.zoom-control input {
  width: 90px;
}

.align-group {
  display: flex;
  gap: 4px;
}

.template-generator {
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: white;
  box-shadow: 0 25px 60px -45px rgba(15, 23, 42, 0.5);
}

.template-input span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 8px;
}

.template-input input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #f8fafc;
}

.template-actions {
  display: flex;
  gap: 10px;
}

.template-suggestions span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #64748b;
}

.template-note {
  font-size: 12px;
  color: #64748b;
  border-left: 3px solid rgba(16, 185, 129, 0.6);
  padding-left: 10px;
}

.template-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.template-tags button {
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: white;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}

.template-gallery {
  margin-top: 24px;
}

body.editor-ready .template-generator,
body.editor-ready .template-gallery {
  display: none;
}

body.editor-ready .builder {
  margin-top: 0;
}

.template-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.template-card {
  background: white;
  border-radius: 20px;
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 18px 40px -35px rgba(15, 23, 42, 0.5);
}

.template-card span {
  font-size: 11px;
  color: #059669;
  font-weight: 600;
}

.builder {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 240px minmax(520px, 1fr) 300px;
  gap: 18px;
}

.builder-column {
  background: white;
  border-radius: 20px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 18px 40px -35px rgba(15, 23, 42, 0.5);
}

.builder-column.tools {
  gap: 16px;
}

.element-explorer {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.7);
  padding: 10px;
  display: grid;
  gap: 8px;
  min-height: 180px;
}

.element-explorer-head {
  display: grid;
  gap: 2px;
}

.element-explorer-head h4 {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #334155;
}

.element-explorer-head span {
  font-size: 11px;
  color: #64748b;
}

.element-explorer-list {
  display: grid;
  gap: 6px;
  max-height: 300px;
  overflow: auto;
  align-content: start;
  padding-right: 2px;
}

.element-explorer-empty {
  border: 1px dashed rgba(100, 116, 139, 0.35);
  border-radius: 8px;
  color: #64748b;
  font-size: 12px;
  padding: 8px;
}

.element-explorer-item {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  background: #ffffff;
  padding: 8px;
  display: grid;
  gap: 6px;
  cursor: pointer;
  transition: border-color 0.16s ease, transform 0.16s ease;
}

.element-explorer-item:hover {
  border-color: rgba(14, 165, 233, 0.58);
  transform: translateY(-1px);
}

.element-explorer-item.active {
  border-color: rgba(14, 165, 233, 0.84);
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.15);
}

.element-explorer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: #64748b;
}

.element-explorer-name {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  background: #ffffff;
  color: #0f172a;
}

.add-menu {
  position: relative;
  display: grid;
  gap: 8px;
}

.add-menu-list {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 20px 40px -30px rgba(15, 23, 42, 0.5);
  z-index: 5;
}

.add-menu-list.show {
  display: grid;
  gap: 8px;
}

.upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}

.stats-panel {
  display: grid;
  gap: 12px;
}

.stats-mini {
  display: grid;
  gap: 8px;
}

.stat-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #f8fafc;
  font-size: 12px;
}

.stat-tile strong {
  font-size: 14px;
  color: #0f172a;
}

.admin-panel {
  display: none;
  gap: 10px;
  border-top: 1px dashed rgba(15, 23, 42, 0.12);
  padding-top: 10px;
}

.admin-panel h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #64748b;
}

.admin-totals {
  display: grid;
  gap: 8px;
}

.admin-list {
  display: grid;
  gap: 8px;
}

.admin-user {
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: white;
  padding: 10px 12px;
  font-size: 12px;
}

.admin-user strong {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
}

.builder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.toggle {
  display: flex;
  gap: 8px;
  font-size: 12px;
  align-items: center;
  color: #64748b;
}

.prop-group {
  display: grid;
  gap: 10px;
}

.prop-group.hidden {
  display: none;
}

.canvas-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.canvas-head p {
  font-size: 12px;
  color: #64748b;
}

.canvas-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.canvas-drop {
  min-height: 520px;
  background: #f8fafc;
  border-radius: 18px;
  border: 1px dashed rgba(15, 23, 42, 0.2);
  padding: 18px;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

.a4-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 16px;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.02);
  border: 1px solid rgba(15, 23, 42, 0.08);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  max-height: none;
  overflow: visible;
}

.a4-wrapper.drag-over {
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}

.a4-page {
  width: min(820px, 100%);
  height: var(--doc-height, 870px);
  background: white;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 25px 60px -40px rgba(15, 23, 42, 0.6);
  position: relative;
  overflow: hidden;
  background-image: repeating-linear-gradient(
    to bottom,
    #ffffff 0,
    #ffffff var(--page-height, 870px),
    #eef2f5 var(--page-height, 870px),
    #eef2f5 calc(var(--page-height, 870px) + var(--page-gap, 24px))
  );
  background-size: 100% calc(var(--page-height, 870px) + var(--page-gap, 24px));
}

.a4-page.grid-on::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.06) 1px, transparent 1px);
  background-size: 16px 16px;
  opacity: 0.4;
  pointer-events: none;
}

.a4-page::after {
  display: none;
}

.a4-page.preview {
  transform: scale(0.75);
  transform-origin: top center;
  margin-top: 0;
  pointer-events: none;
}

.a4-page.preview .block-handle {
  display: none;
}

.a4-content {
  padding: 28px 30px;
  height: 100%;
  position: absolute;
  inset: 0;
}

.center-guides {
  position: absolute;
  inset: 28px 30px;
  pointer-events: none;
  z-index: 30;
}

.center-guide {
  position: absolute;
  background: rgba(56, 189, 248, 0.9);
  opacity: 0;
  transition: opacity 0.12s ease;
}

.center-guide.show {
  opacity: 1;
}

.center-guide.vertical {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-0.5px);
}

.center-guide.horizontal {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-0.5px);
}

.canvas-hint {
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
  padding: 24px 0;
  border: 1px dashed rgba(15, 23, 42, 0.12);
  border-radius: 12px;
}

.a4-element {
  position: absolute;
  cursor: move;
  user-select: none;
  border-radius: 6px;
  touch-action: none;
}

.a4-element.selected {
  outline: 1px solid rgba(14, 165, 233, 0.7);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}

.a4-element .element-content {
  width: 100%;
  height: 100%;
  outline: none;
}

.a4-element.text .element-content {
  cursor: text;
  user-select: text;
  padding: 4px 6px;
  white-space: pre-wrap;
}

.a4-element.agb .element-content {
  cursor: text;
  user-select: text;
  padding: 6px 8px;
  white-space: pre-wrap;
}

.a4-element.agb .agb-content {
  font-size: 12px;
  line-height: 1.5;
}

.a4-element.table {
  cursor: move;
  user-select: text;
}

.a4-element.invoice-details {
  cursor: move;
  user-select: text;
}

.a4-element.editing {
  cursor: text;
  touch-action: auto;
}

.a4-element.table .element-content {
  padding: 6px;
}

.a4-element.invoice-details .element-content {
  padding: 6px;
}

.table-grid {
  width: 100%;
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 12px;
  color: #0f172a;
}

.invoice-table {
  display: grid;
  gap: 8px;
  overflow: auto;
}

.invoice-details-panel {
  display: grid;
  gap: 8px;
  overflow: auto;
}

.invoice-service-blocks {
  display: grid;
  gap: 4px;
  margin-top: 2px;
}

.invoice-service-block {
  border-top: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 0;
  background: transparent;
  padding: 4px 2px 0;
  display: grid;
  gap: 4px;
}

.invoice-service-block.empty {
  color: #64748b;
  font-size: 12px;
  border-style: dashed;
  text-align: center;
}

.invoice-service-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.invoice-service-block-head strong {
  font-size: 11px;
  color: #0f172a;
  font-weight: 600;
}

.invoice-service-block-head span {
  font-size: 11px;
  color: #0f172a;
  font-weight: 600;
}

.invoice-service-block-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 8px;
}

.invoice-service-field {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}

.invoice-service-field small {
  font-size: 11px;
  line-height: 1.2;
  color: #64748b;
  white-space: nowrap;
}

.invoice-service-field strong {
  font-size: 11px;
  line-height: 1.2;
  color: #0f172a;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invoice-meta {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
}

.invoice-meta-main {
  grid-template-columns: repeat(3, minmax(140px, 1fr));
}

.invoice-meta-field {
  display: grid;
  gap: 4px;
  font-size: 11px;
  color: #334155;
}

.invoice-meta-field span {
  font-weight: 600;
}

.invoice-meta-field input,
.invoice-meta-field select,
.invoice-meta-field textarea {
  border: none;
  border-radius: 0;
  padding: 6px 8px;
  font-size: 12px;
  color: #0f172a;
  background: transparent;
}

.invoice-meta-field textarea {
  min-height: 68px;
  resize: vertical;
  font-family: inherit;
}

.invoice-details {
  display: grid;
  gap: 8px;
}

.invoice-details-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
}

.invoice-details-selector {
  display: grid;
  gap: 8px;
  padding-bottom: 2px;
}

.invoice-details-selector-head {
  display: grid;
  gap: 2px;
}

.invoice-details-selector-head strong {
  font-size: 12px;
  color: #0f172a;
  font-weight: 700;
}

.invoice-details-selector-head span,
.invoice-details-empty {
  font-size: 11px;
  color: #64748b;
  line-height: 1.45;
}

.invoice-details-selector-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.invoice-details-selector-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(241, 245, 249, 0.78);
  font-size: 11px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
}

.invoice-details-selector-item input {
  margin: 0;
  accent-color: #0f766e;
}

.invoice-details-selector-item span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.invoice-details-card {
  height: 100%;
  display: block;
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
  overflow: hidden;
}

.invoice-details-card.preset-customer,
.invoice-details-card.preset-customer-bank,
.invoice-details-card.preset-provider-bank {
  background: transparent;
}

.invoice-details-card-body {
  display: grid;
  gap: 4px;
  align-content: start;
}

.invoice-details-card-row {
  display: grid;
  grid-template-columns: minmax(76px, max-content) 1fr;
  column-gap: 16px;
  align-items: baseline;
  min-height: 22px;
  padding: 0;
  border: none;
}

.invoice-details-card-label {
  font-size: 14px;
  line-height: 1.35;
  color: #000;
  font-weight: 500;
  white-space: nowrap;
}

.invoice-details-card-row strong {
  font-size: 14px;
  line-height: 1.35;
  color: #000;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.invoice-details-card-row.is-placeholder .invoice-details-card-label,
.invoice-details-card-row.is-placeholder strong {
  color: #000;
  font-weight: 400;
}

.invoice-details-card-empty {
  font-size: 13px;
  line-height: 1.5;
  color: #000;
}

.invoice-wide-field {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .invoice-details-selector-grid,
  .invoice-details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .invoice-details-selector-grid,
  .invoice-details-grid {
    grid-template-columns: 1fr;
  }
}

.table-tools {
  display: none;
}

.table-dimensions {
  font-size: 11px;
  color: #64748b;
  margin-right: auto;
}

.mini-action {
  border: none;
  background: transparent;
  color: #0f172a;
  border-radius: 0;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
}

.mini-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.table-grid th,
.table-grid td {
  border: none;
  padding: 6px 8px;
  text-align: left;
  user-select: text;
  cursor: text;
}


.table-grid th {
  background: rgba(15, 23, 42, 0.04);
  font-weight: 700;
}

.table-grid td {
  background: transparent;
}

.table-grid td[contenteditable="true"] {
  outline: none;
}

.table-grid th[contenteditable="true"] {
  outline: none;
}

.table-grid td[contenteditable="false"] {
  background: transparent;
}

.table-grid th:nth-child(1),
.table-grid td:nth-child(1) {
  width: 52px;
  text-align: center;
}

.table-grid th:nth-child(3),
.table-grid td:nth-child(3),
.table-grid th:nth-child(5),
.table-grid td:nth-child(5),
.table-grid th:nth-child(6),
.table-grid td:nth-child(6),
.table-grid th:nth-child(7),
.table-grid td:nth-child(7) {
  text-align: right;
}

.invoice-summary {
  justify-self: end;
  min-width: 220px;
  display: grid;
  gap: 4px;
  border-top: none;
  padding-top: 0;
  font-size: 12px;
}

.invoice-summary > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.invoice-summary > div:last-child {
  font-size: 13px;
  padding-top: 2px;
  border-top: 1px solid rgba(15, 23, 42, 0.12);
}

.invoice-summary > div:last-child strong {
  color: #047857;
}

.signature-pair {
  display: grid;
  gap: 14px;
}

.signature-slot {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 8px;
  row-gap: 4px;
}

.signature-label {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  grid-column: 1 / 2;
  white-space: nowrap;
}

.signature-line {
  height: 2px;
  background: rgba(15, 23, 42, 0.9);
  width: 100%;
  grid-column: 2 / 3;
}

.signature-name,
.signature-fixed-name {
  grid-column: 2 / 3;
  font-size: 11px;
  color: #64748b;
}

.signature-label[contenteditable="true"],
.signature-name[contenteditable="true"] {
  outline: none;
}

.resize-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid white;
  box-shadow: 0 4px 10px -4px rgba(15, 23, 42, 0.6);
  touch-action: none;
}

.resize-handle.br {
  right: -6px;
  bottom: -6px;
  cursor: nwse-resize;
}

.resize-handle.tr {
  right: -6px;
  top: -6px;
  cursor: nesw-resize;
}

.resize-handle.bl {
  left: -6px;
  bottom: -6px;
  cursor: nesw-resize;
}

.resize-handle.tl {
  left: -6px;
  top: -6px;
  cursor: nwse-resize;
}

.resize-handle.t {
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  cursor: ns-resize;
}

.resize-handle.b {
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  cursor: ns-resize;
}

.resize-handle.l {
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  cursor: ew-resize;
}

.resize-handle.r {
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  cursor: ew-resize;
}

.a4-element img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transform: scale(var(--image-scale, 1));
  transform-origin: center;
}

.a4-element.image .element-content,
.a4-element.qrcode .element-content {
  overflow: hidden;
  border-radius: inherit;
}

.a4-element.qrcode .element-content {
  position: relative;
  display: grid;
  place-items: center;
  background: #ffffff;
}

.a4-element.qrcode img.qr-image {
  object-fit: contain;
}

.a4-element.qrcode.qr-pending .element-content::after,
.a4-element.qrcode.qr-error .element-content::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 8px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: #334155;
  background: rgba(255, 255, 255, 0.78);
  pointer-events: none;
}

.a4-element.qrcode.qr-pending .element-content::after {
  content: "QR wird erstellt...";
}

.a4-element.qrcode.qr-error .element-content::after {
  content: "QR konnte nicht geladen werden";
  color: #991b1b;
}

.a4-element.qr-box .element-content,
.a4-element.table-note .element-content,
.a4-element.footer-details .element-content {
  padding: 0;
  overflow: visible;
}

.qr-box-card {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 18px 34px -28px rgba(15, 23, 42, 0.35);
}

.qr-box-card.align-left {
  grid-template-columns: 86px minmax(0, 1fr);
}

.qr-box-copy {
  display: grid;
  gap: 6px;
  align-content: start;
}

.qr-box-title {
  font-size: 18px;
  line-height: 1.15;
  color: #0f172a;
  font-weight: 700;
}

.qr-box-description {
  margin: 0;
  font-size: 14px;
  line-height: 1.42;
  color: #0f172a;
}

.qr-box-link {
  font-size: 12px;
  line-height: 1.35;
  color: #64748b;
  overflow-wrap: anywhere;
}

.qr-box-code {
  width: 86px;
  height: 86px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #ffffff;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.qr-box-code img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.qr-box-code-placeholder {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.table-note-card {
  min-height: 100%;
  display: flex;
  align-items: flex-start;
  border-top: 1px solid rgba(15, 23, 42, 0.14);
  padding-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: #475569;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.table-note-card.is-empty {
  color: #94a3b8;
  font-style: italic;
}

.footer-details-card {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-content: start;
}

.footer-details-column {
  display: grid;
  gap: 2px;
  align-content: start;
}

.footer-details-column.right {
  justify-items: start;
}

.footer-details-line {
  font-size: 11px;
  line-height: 1.35;
  color: #0f172a;
}

.footer-details-line.is-placeholder {
  color: #94a3b8;
}

.direction-controls {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.direction-handle {
  position: absolute;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  background: #0f172a;
  color: white;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 10px 20px -12px rgba(15, 23, 42, 0.8);
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}

.direction-handle:active {
  cursor: grabbing;
}

.direction-handle.up {
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
}

.direction-handle.right {
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
}

.direction-handle.down {
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
}

.direction-handle.left {
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
}

.preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 10px;
}

.canvas-block {
  padding: 10px 12px;
  border-radius: 12px;
  background: white;
  border: 1px solid rgba(15, 23, 42, 0.1);
  font-size: 12px;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.canvas-block.active {
  border-color: rgba(16, 185, 129, 0.6);
  background: rgba(16, 185, 129, 0.08);
}

.property-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.property-tabs button {
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #f8fafc;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
}

.property-tabs button.active {
  background: #0f172a;
  color: white;
}

.property-panel {
  display: grid;
  gap: 12px;
}

.property-panel label {
  display: grid;
  gap: 8px;
  font-size: 12px;
  color: #64748b;
}

.property-panel input,
.property-panel select {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #f8fafc;
}

.property-panel input[type="checkbox"] {
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 4px;
}

.prop-bottom-wrap {
  display: none;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(15, 23, 42, 0.18);
  background: rgba(248, 250, 252, 0.8);
}

.prop-bottom-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #334155;
  font-weight: 600;
}

.prop-bottom-wrap small {
  font-size: 11px;
  color: #94a3b8;
}

.property-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.template-picker {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 120;
}

.template-picker.show {
  display: flex;
}

.template-picker-card {
  background: white;
  border-radius: 24px;
  padding: 24px;
  max-width: 720px;
  width: 100%;
  box-shadow: 0 40px 80px -50px rgba(15, 23, 42, 0.8);
}

.template-picker-grid {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.template-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #f8fafc;
  cursor: pointer;
  text-align: left;
}

.template-saved {
  margin-top: 18px;
}

.template-saved h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #64748b;
}

.template-option span {
  font-size: 12px;
  color: #64748b;
}


.capabilities {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  padding-top: 12px;
}

.capabilities h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #64748b;
  margin-bottom: 8px;
}

.capabilities ul {
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: #475569;
}

@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .app-sidebar {
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .builder {
    grid-template-columns: 1fr;
  }
}

@media print {
  @page {
    size: A4;
    margin: 0;
  }
  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body * {
    visibility: hidden;
  }
  #a4-page,
  #a4-page * {
    visibility: visible;
  }
  #a4-page {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--print-width, 210mm);
    height: var(--print-height, 297mm);
    box-shadow: none;
    border: none;
    transform: none !important;
  }
  .a4-page::after {
    display: none;
  }
  .a4-page.grid-on::before {
    display: none;
  }
  .a4-element.selected {
    outline: none;
    box-shadow: none;
  }
  .resize-handle,
  .direction-controls,
  .center-guides,
  .canvas-hint,
  .mini-toolbar,
  .builder-quick-edit {
    display: none !important;
  }
}

.mini-toolbar {
  position: fixed;
  z-index: 300;
  display: none;
  gap: 6px;
  padding: 8px;
  border-radius: 999px;
  background: #0b1120;
  color: white;
  box-shadow: 0 20px 40px -25px rgba(15, 23, 42, 0.6);
  align-items: center;
}

.mini-toolbar.show {
  display: inline-flex;
}

.mini-btn {
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: white;
  padding: 6px 8px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
}

.mini-btn.active {
  background: rgba(16, 185, 129, 0.8);
  color: #0b1120;
}

.mini-color {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: transparent;
}

.builder-quick-edit {
  position: fixed;
  z-index: 360;
  width: min(420px, calc(100vw - 24px));
  max-height: min(78vh, 560px);
  display: none;
  grid-template-rows: auto auto 1fr auto;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(2, 132, 199, 0.34);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 249, 255, 0.96) 100%);
  box-shadow: 0 26px 48px -30px rgba(2, 132, 199, 0.5);
  color: #0f172a;
  backdrop-filter: blur(8px);
}

.builder-details-modal {
  position: fixed;
  inset: 0;
  z-index: 380;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.builder-details-modal.show {
  display: flex;
}

.builder-details-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(8px);
}

.builder-details-modal-card {
  position: relative;
  width: min(620px, calc(100vw - 32px));
  max-height: min(78vh, 760px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: linear-gradient(180deg, rgba(250, 252, 255, 0.98) 0%, rgba(241, 245, 249, 0.98) 100%);
  box-shadow: 0 40px 120px -70px rgba(15, 23, 42, 0.65);
  overflow: hidden;
}

.builder-details-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.builder-details-modal-eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #64748b;
}

.builder-details-modal-title {
  margin: 0;
  font-size: 30px;
  line-height: 1.02;
  color: #0f172a;
}

.builder-details-modal-subtitle {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: #475569;
}

.builder-details-modal-close {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: #0f172a;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.builder-details-modal-body {
  display: grid;
  gap: 16px;
  overflow: auto;
  padding-right: 4px;
}

.builder-details-modal-section {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(255, 255, 255, 0.72);
}

.builder-details-modal-section-head {
  display: grid;
  gap: 4px;
}

.builder-details-modal-section-head strong {
  font-size: 15px;
  color: #0f172a;
}

.builder-details-modal-section-head span {
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

.builder-details-modal-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.builder-details-modal-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(248, 250, 252, 0.96);
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}

.builder-details-modal-item input {
  margin: 0;
  accent-color: #0f172a;
}

.builder-details-modal-item span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.builder-details-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.builder-quick-edit.show {
  display: grid;
}

.builder-quick-edit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.builder-quick-edit-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.builder-quick-edit-close {
  border: 1px solid rgba(148, 163, 184, 0.55);
  background: rgba(255, 255, 255, 0.86);
  color: #0f172a;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.builder-quick-edit-subtitle {
  font-size: 12px;
  color: #475569;
}

.builder-quick-edit-form {
  display: grid;
  gap: 8px;
  overflow: auto;
  padding-right: 2px;
}

.builder-quick-edit-field {
  display: grid;
  gap: 4px;
}

.builder-quick-edit-field > span {
  font-size: 11px;
  font-weight: 600;
  color: #334155;
}

.builder-quick-edit-field input,
.builder-quick-edit-field textarea,
.builder-quick-edit-field select {
  border: 1px solid rgba(148, 163, 184, 0.46);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.35;
  outline: none;
}

.builder-quick-edit-field textarea {
  min-height: 92px;
  resize: vertical;
}

.builder-quick-edit-field input:focus,
.builder-quick-edit-field textarea:focus,
.builder-quick-edit-field select:focus {
  border-color: rgba(2, 132, 199, 0.72);
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.16);
}

.builder-quick-edit-section {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

.builder-quick-edit-section-head {
  display: grid;
  gap: 2px;
}

.builder-quick-edit-section-head strong {
  font-size: 12px;
  color: #0f172a;
}

.builder-quick-edit-section-head span {
  font-size: 11px;
  line-height: 1.45;
  color: #64748b;
}

.builder-quick-edit-checklist {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.builder-quick-edit-checklist legend {
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  color: #334155;
}

.builder-quick-edit-checklist-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.builder-quick-edit-checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(248, 250, 252, 0.92);
  font-size: 12px;
  color: #334155;
}

.builder-quick-edit-checklist-item input {
  margin: 0;
  accent-color: #0284c7;
}

.builder-quick-edit-checklist-item span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.builder-quick-edit-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-top: 1px solid rgba(148, 163, 184, 0.4);
  padding-top: 8px;
}

.builder-quick-edit-total span {
  font-size: 12px;
  color: #475569;
}

.builder-quick-edit-total strong {
  font-size: 15px;
  color: #0369a1;
}

.builder-quick-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.builder-quick-edit-actions button {
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.44);
  background: rgba(255, 255, 255, 0.94);
  color: #0f172a;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.builder-quick-edit-actions .builder-quick-edit-save {
  border-color: rgba(2, 132, 199, 0.56);
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.94) 0%, rgba(14, 165, 233, 0.94) 100%);
  color: #f8fafc;
}

.builder-quick-edit.readonly .builder-quick-edit-actions .builder-quick-edit-save {
  border-color: rgba(148, 163, 184, 0.48);
  background: rgba(226, 232, 240, 0.72);
  color: #64748b;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  .builder-details-modal-card {
    width: min(100%, calc(100vw - 20px));
    padding: 18px;
    border-radius: 22px;
  }

  .builder-details-modal-title {
    font-size: 24px;
  }

  .builder-details-modal-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1100px) {
  .canvas-drop {
    grid-template-columns: 1fr;
  }
}

.login-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}

.login-overlay.show {
  display: flex;
}

.login-panel {
  width: min(1100px, 100%);
  background: #f3f5f7;
  border-radius: 30px;
  padding: 24px;
  position: relative;
  box-shadow: 0 50px 90px -50px rgba(15, 23, 42, 0.8);
  animation: slideDown 0.6s ease;
  overflow: visible;
}

.login-panel .close {
  position: absolute;
  right: -14px;
  top: -14px;
  border: none;
  background: #0f172a;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 12px 30px -12px rgba(15, 23, 42, 0.8);
}

.login-grid {
  display: grid;
  gap: 24px;
}

.login-copy h2 {
  margin: 18px 0;
  font-size: 28px;
}

.login-copy p {
  color: #64748b;
}

.login-benefits {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.login-benefits div {
  border-radius: 18px;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: white;
}

.login-benefits span {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #64748b;
}

.login-benefits p {
  margin-top: 8px;
  font-size: 14px;
}

.login-note {
  margin-top: 16px;
  padding: 14px;
  border-radius: 16px;
  background: #e2e8f0;
  font-size: 13px;
}

.login-card {
  background: #0b1120;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
}

.auth-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 14px 14px 0;
}

.auth-switch button {
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  background: rgba(15, 23, 42, 0.6);
  color: rgba(226, 232, 240, 0.9);
  min-height: 40px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.auth-switch button.is-active {
  border-color: rgba(56, 189, 248, 0.85);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.45), rgba(20, 184, 166, 0.45));
  color: #f8fafc;
}

.login-slides {
  position: relative;
  height: 240px;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: slideCycle 18s infinite;
}

.slide:nth-child(1) {
  animation-delay: 0s;
}

.slide:nth-child(2) {
  animation-delay: 6s;
}

.slide:nth-child(3) {
  animation-delay: 12s;
}

.slide-bg {
  position: absolute;
  inset: 0;
  opacity: 0.6;
  animation: slowZoom 18s infinite;
}

.bg-1 {
  background: radial-gradient(600px 420px at 20% 20%, rgba(16, 185, 129, 0.45), transparent 70%),
    radial-gradient(500px 400px at 80% 30%, rgba(14, 165, 233, 0.4), transparent 70%);
}

.bg-2 {
  background: radial-gradient(500px 360px at 30% 40%, rgba(94, 234, 212, 0.45), transparent 70%),
    radial-gradient(520px 420px at 80% 20%, rgba(56, 189, 248, 0.35), transparent 75%);
}

.bg-3 {
  background: radial-gradient(560px 380px at 20% 30%, rgba(16, 185, 129, 0.4), transparent 75%),
    radial-gradient(520px 380px at 70% 10%, rgba(99, 102, 241, 0.35), transparent 75%);
}

.slide-content {
  position: relative;
  z-index: 1;
  color: white;
  padding: 22px;
  display: grid;
  gap: 12px;
}

.slide-content span {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #a7f3d0;
}

.slide-content h3 {
  font-size: 20px;
}

.slide-content p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.slide-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.slide-stats div {
  padding: 10px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.slide-stats small {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.slide-stats strong {
  display: block;
  margin-top: 6px;
  font-size: 12px;
}

.login-form {
  background: rgba(255, 255, 255, 0.04);
  padding: 22px;
  display: grid;
  gap: 12px;
  color: white;
}

.auth-panel[hidden] {
  display: none !important;
}

.login-form h3 {
  font-size: 18px;
}

.login-form p {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.login-form label {
  display: grid;
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.login-form input {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: white;
}

.login-form textarea {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: white;
  resize: vertical;
  min-height: 84px;
}

.login-form input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.login-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.forgot-link {
  justify-self: start;
  color: #7dd3fc;
  font-size: 12px;
  text-decoration: none;
  border-bottom: 1px dashed rgba(125, 211, 252, 0.45);
  padding-bottom: 2px;
  transition: color 160ms ease, border-color 160ms ease;
}

.forgot-link:hover {
  color: #a7f3d0;
  border-color: rgba(167, 243, 208, 0.8);
}

.password-rules {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.password-rules li {
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  background: rgba(15, 23, 42, 0.62);
  color: rgba(226, 232, 240, 0.86);
  padding: 7px 10px 7px 34px;
  font-size: 12px;
  line-height: 1.35;
  position: relative;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.password-rules li::before {
  content: "○";
  position: absolute;
  left: 11px;
  top: 6px;
  color: rgba(148, 163, 184, 0.9);
  font-size: 14px;
}

.password-rules li.is-ok {
  border-color: rgba(34, 197, 94, 0.82);
  background: linear-gradient(120deg, rgba(22, 163, 74, 0.26), rgba(15, 23, 42, 0.65));
  color: #bbf7d0;
  transform: translateX(2px);
}

.password-rules li.is-ok::before {
  content: "✓";
  color: #22c55e;
  font-weight: 800;
}

.error {
  color: #fecaca;
  font-size: 12px;
}

.login-form .error {
  min-height: 18px;
}

.login-form .error:not(:empty) {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(248, 113, 113, 0.26);
  background: rgba(127, 29, 29, 0.24);
  font-size: 12px;
  line-height: 1.45;
}

.login-form .error[data-state="pending"] {
  color: #cbd5f5;
  border-color: rgba(125, 211, 252, 0.24);
  background: rgba(30, 41, 59, 0.56);
}

.login-form .error[data-state="success"] {
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(20, 83, 45, 0.28);
}

.landing-admin-shell {
  padding: 26px 0 6px;
}

.landing-admin-card {
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(2, 132, 199, 0.12) 45%, rgba(15, 118, 110, 0.12));
  box-shadow: 0 30px 70px -52px rgba(15, 23, 42, 0.9);
  padding: 20px;
  display: grid;
  gap: 16px;
}

.landing-admin-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.landing-admin-head h2 {
  font-size: clamp(18px, 2.3vw, 24px);
  margin-top: 10px;
  color: #f8fafc;
}

.landing-admin-head p {
  color: rgba(226, 232, 240, 0.72);
}

.landing-admin-grid {
  display: grid;
  gap: 16px;
}

.landing-admin-form {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(2, 6, 23, 0.5);
}

.landing-admin-form label {
  display: grid;
  gap: 7px;
  color: #cbd5e1;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landing-admin-form input,
.landing-admin-form select {
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  background: rgba(15, 23, 42, 0.9);
  color: #f8fafc;
  padding: 11px 12px;
}

.landing-admin-result-wrap {
  display: grid;
  gap: 10px;
}

.landing-admin-result-wrap h3 {
  color: #f8fafc;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landing-admin-search-label {
  display: grid;
  gap: 7px;
  color: #cbd5e1;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landing-admin-search-label input {
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  background: rgba(2, 6, 23, 0.84);
  color: #f8fafc;
  padding: 10px 12px;
  font-size: 13px;
}

.landing-admin-result {
  margin: 0;
  border-radius: 14px;
  border: 1px solid rgba(56, 189, 248, 0.34);
  background: rgba(2, 6, 23, 0.82);
  color: #a7f3d0;
  padding: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  min-height: 124px;
}

.landing-admin-users {
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(2, 6, 23, 0.72);
  padding: 8px;
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
}

.landing-admin-user {
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(15, 23, 42, 0.82);
  padding: 10px;
  color: #e2e8f0;
  font-size: 13px;
  display: grid;
  gap: 8px;
}

.landing-admin-user strong {
  display: block;
  margin-bottom: 4px;
}

.landing-admin-user-meta {
  color: rgba(226, 232, 240, 0.82);
}

.landing-admin-user-controls {
  display: grid;
  gap: 8px;
}

.landing-admin-user-controls-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.landing-admin-user-actions {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.landing-admin-user-controls input,
.landing-admin-user-controls select,
.landing-admin-user-actions button {
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  background: rgba(2, 6, 23, 0.82);
  color: #f8fafc;
  padding: 8px 10px;
  min-height: 36px;
}

.landing-admin-user-actions button {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.landing-admin-user-actions button:hover {
  border-color: rgba(56, 189, 248, 0.8);
  background: rgba(15, 23, 42, 0.95);
  transform: translateY(-1px);
}

.landing-admin-user-log {
  color: #a7f3d0;
  font-size: 12px;
  min-height: 16px;
}

.hero-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(10px);
  opacity: 0.6;
  animation: float 10s ease-in-out infinite, orbPulse 8s ease-in-out infinite;
  z-index: 0;
}

.orb-1 {
  width: 320px;
  height: 320px;
  top: -120px;
  right: -80px;
  background: radial-gradient(circle at 30% 30%, rgba(16, 185, 129, 0.7), transparent 70%);
}

.orb-2 {
  width: 260px;
  height: 260px;
  bottom: 20px;
  left: -120px;
  background: radial-gradient(circle at 40% 40%, rgba(14, 165, 233, 0.6), transparent 70%);
  animation-delay: 1.5s;
}

.orb-3 {
  width: 200px;
  height: 200px;
  top: 40px;
  left: 45%;
  background: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.5), transparent 70%);
  animation-delay: 3s;
}

.reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes shimmer {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideCycle {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(1.02);
  }
  8% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  30% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  38% {
    opacity: 0;
    transform: translateY(-10px) scale(1.03);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px) scale(1.03);
  }
}

@keyframes slowZoom {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes dotPulse {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

@keyframes ringSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes heroGlow {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: translateY(10px) scale(1.05);
    opacity: 0.7;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.4;
  }
}

@keyframes drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(10px, -20px, 0) scale(1.03);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes orbPulse {
  0% {
    opacity: 0.4;
    transform: scale(0.95);
  }
  50% {
    opacity: 0.75;
    transform: scale(1.05);
  }
  100% {
    opacity: 0.4;
    transform: scale(0.95);
  }
}

@keyframes markerPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 10px 20px -10px rgba(239, 68, 68, 0.8);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 20px 30px -12px rgba(239, 68, 68, 0.9);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 10px 20px -10px rgba(239, 68, 68, 0.8);
  }
}

@keyframes scan {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  50% {
    transform: translateY(240px);
    opacity: 0.7;
  }
  90% {
    opacity: 0.2;
  }
  100% {
    transform: translateY(320px);
    opacity: 0;
  }
}

@keyframes glowSweep {
  0% {
    transform: translateX(-20%) translateY(-20%);
  }
  50% {
    transform: translateX(20%) translateY(20%);
  }
  100% {
    transform: translateX(-20%) translateY(-20%);
  }
}

@media (min-width: 768px) {
  .nav {
    display: flex;
  }

  .hero-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .stats-grid,
  .feature-grid,
  .faq-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ai-flow-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .example-item {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .cta-main {
    grid-template-columns: 1.4fr 0.6fr;
    align-items: center;
  }

  .login-grid {
    grid-template-columns: 1.1fr 1fr;
  }

  .landing-admin-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

@media (max-width: 767px) {
  .landing-admin-user-controls-row {
    grid-template-columns: 1fr;
  }

  .landing-admin-user-actions {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1024px) {
  .stats-grid,
  .feature-grid,
  .faq-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Roblox Studio inspired app UI */
body[data-page="app"] {
  background: #121821;
  color: #e2e8f0;
}

body[data-page="app"] .app-shell {
  background: radial-gradient(circle at 20% 0%, rgba(0, 162, 255, 0.12), transparent 45%), #121821;
}

body[data-page="app"] .app-main {
  padding: 14px;
  background: transparent;
  color: #e2e8f0;
}

body[data-page="app"] .app-topbar {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #1d2634;
}

body[data-page="app"] .app-topbar h1 {
  font-size: 20px;
}

body[data-page="app"] .app-eyebrow {
  color: #94a3b8;
}

body[data-page="app"] .app-actions {
  gap: 8px;
  align-items: center;
}

body[data-page="app"] .btn {
  border-radius: 7px;
  padding: 8px 12px;
  font-size: 12px;
  box-shadow: none;
}

body[data-page="app"] .btn.ghost {
  background: #2a3648;
  border-color: rgba(148, 163, 184, 0.24);
  color: #e2e8f0;
}

body[data-page="app"] .btn.ghost:hover {
  border-color: rgba(96, 165, 250, 0.65);
  background: #314057;
}

body[data-page="app"] .btn.primary {
  background: #0b84ff;
  color: #eef6ff;
}

body[data-page="app"] .btn.primary:hover {
  background: #0468ca;
}

body[data-page="app"] .zoom-control {
  background: #111827;
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

body[data-page="app"] .builder {
  margin-top: 0;
  gap: 12px;
  grid-template-columns: 250px minmax(520px, 1fr) 290px;
}

body[data-page="app"] .builder-column {
  background: #1b2533;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: none;
  color: #cbd5e1;
}

body[data-page="app"] .builder-head,
body[data-page="app"] .canvas-head {
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  padding-bottom: 8px;
}

body[data-page="app"] .canvas-head p,
body[data-page="app"] .toggle,
body[data-page="app"] .property-panel label {
  color: #94a3b8;
}

body[data-page="app"] .canvas-drop {
  background: #111827;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
}

body[data-page="app"] .a4-wrapper {
  background: #0f1724;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
}

body[data-page="app"] .a4-page {
  border-radius: 6px;
}

body[data-page="app"] .property-panel input,
body[data-page="app"] .property-panel select {
  background: #0f1724;
  color: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, 0.22);
}

body[data-page="app"] .invoice-meta-field,
body[data-page="app"] .table-dimensions {
  color: #94a3b8;
}

body[data-page="app"] .invoice-meta-field input,
body[data-page="app"] .invoice-meta-field select,
body[data-page="app"] .invoice-meta-field textarea {
  background: transparent;
  color: #0f172a;
  border: none;
}

body[data-page="app"] .mini-action {
  background: transparent;
  border: none;
  color: #0f172a;
}

body[data-page="app"] .upload-btn {
  background: #2a3648;
  color: #e2e8f0;
}

body[data-page="app"] .add-menu-list {
  background: #111827;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

body[data-page="app"] .template-picker {
  background: rgba(3, 7, 18, 0.86);
}

body[data-page="app"] .template-picker-card {
  background: #1b2533;
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: #e2e8f0;
}

body[data-page="app"] .template-option {
  background: #0f1724;
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: #e2e8f0;
}

body[data-page="app"] .template-option span {
  color: #94a3b8;
}

body[data-page="app"] .template-option-card {
  cursor: default;
}

body[data-page="app"] .template-option-open {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  cursor: pointer;
}

body[data-page="app"] .template-option-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

@media (max-width: 1200px) {
  body[data-page="app"] .builder {
    grid-template-columns: 1fr;
  }
}

/* Main dashboard */
body[data-page="app"][data-app-mode="main"] {
  background: #121821;
  color: #e2e8f0;
}

body[data-page="app"][data-app-mode="main"] .main-shell {
  min-height: 100vh;
  padding: 14px;
  background: radial-gradient(circle at 20% 0%, rgba(0, 162, 255, 0.12), transparent 45%), #121821;
}

body[data-page="app"][data-app-mode="main"] .main-shell[data-project-view="studio"] {
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .main-shell {
  background:
    radial-gradient(circle at 12% 5%, rgba(45, 212, 191, 0.2), transparent 38%),
    radial-gradient(circle at 86% 4%, rgba(239, 68, 68, 0.14), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(14, 116, 144, 0.18), transparent 46%),
    #0e1624;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .main-topbar {
  border-color: rgba(45, 212, 191, 0.32);
  background: linear-gradient(140deg, rgba(15, 23, 42, 0.94), rgba(16, 38, 50, 0.9));
  box-shadow: 0 24px 42px -36px rgba(20, 184, 166, 0.95);
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .main-pane {
  border-radius: 14px;
  border-color: rgba(125, 211, 252, 0.22);
  background: linear-gradient(165deg, rgba(15, 23, 42, 0.94), rgba(15, 23, 42, 0.84));
  box-shadow: 0 24px 40px -34px rgba(14, 165, 233, 0.34);
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .main-chat-sidebar,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .main-chat-stage {
  border-radius: 16px;
}

body[data-page="app"][data-app-mode="main"] .main-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #1d2634;
}

body[data-page="app"][data-app-mode="main"] .main-eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="main"] .main-topbar h1 {
  margin-top: 4px;
  font-size: 20px;
}

body[data-page="app"][data-app-mode="main"] .main-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

body[data-page="app"][data-app-mode="main"] .main-user-label {
  font-size: 12px;
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="main"] .main-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(45, 212, 191, 0.38);
  background: rgba(15, 118, 110, 0.18);
  color: #99f6e4;
  font-size: 11px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

body[data-page="app"][data-app-mode="main"] .main-live-indicator::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #14b8a6;
  box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.45);
  animation: livePulse 1.3s ease-out infinite;
}

body[data-page="app"][data-app-mode="main"] .main-live-indicator[data-state="busy"] {
  border-color: rgba(125, 211, 252, 0.45);
  background: rgba(14, 116, 144, 0.2);
  color: #bae6fd;
}

body[data-page="app"][data-app-mode="main"] .main-live-indicator[data-state="busy"]::before {
  background: #38bdf8;
}

body[data-page="app"][data-app-mode="main"] .main-live-indicator[data-state="offline"] {
  border-color: rgba(248, 113, 113, 0.42);
  background: rgba(127, 29, 29, 0.3);
  color: #fecaca;
}

body[data-page="app"][data-app-mode="main"] .main-live-indicator[data-state="offline"]::before {
  background: #f87171;
  animation: none;
  box-shadow: none;
}

body[data-page="app"][data-app-mode="main"] .main-layout {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(420px, 520px);
  align-items: stretch;
  height: calc(100vh - 108px);
  min-height: calc(100vh - 108px);
  overflow: hidden;
}

body[data-page="app"][data-app-mode="main"] .main-pane {
  min-height: 0;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: #1b2533;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

body[data-page="app"][data-app-mode="main"] .chat-pane,
body[data-page="app"][data-app-mode="main"] .templates-pane,
body[data-page="app"][data-app-mode="main"] .preview-pane {
  height: 100%;
}

body[data-page="app"][data-app-mode="main"] .main-pane-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="main"] .main-preview-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

body[data-page="app"][data-app-mode="main"] .main-preview-actions .btn {
  padding: 5px 8px;
  font-size: 10px;
  min-height: 30px;
}

body[data-page="app"][data-app-mode="main"] .main-catalog-card {
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: #111827;
  padding: 10px;
  display: grid;
  gap: 8px;
}

body[data-page="app"][data-app-mode="main"] .main-catalog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="main"] .main-catalog-head h3 {
  font-size: 13px;
  color: #e2e8f0;
}

body[data-page="app"][data-app-mode="main"] .main-catalog-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="main"] .main-catalog-actions .btn {
  padding: 7px 10px;
  min-height: 32px;
  font-size: 11px;
}

body[data-page="app"][data-app-mode="main"] .main-catalog-status {
  font-size: 12px;
  color: #9fb1c7;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  padding: 7px 9px;
  background: #0f1724;
}

body[data-page="app"][data-app-mode="main"] .main-catalog-status[data-state="busy"] {
  color: #bae6fd;
  border-color: rgba(56, 189, 248, 0.4);
}

body[data-page="app"][data-app-mode="main"] .main-catalog-status[data-state="saved"] {
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.35);
}

body[data-page="app"][data-app-mode="main"] .main-catalog-status[data-state="error"] {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.44);
}

body[data-page="app"][data-app-mode="main"] .main-catalog-preview {
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: #0f1724;
  overflow: auto;
  max-height: 300px;
  padding: 8px;
  display: grid;
  gap: 6px;
}

body[data-page="app"][data-app-mode="main"] .main-catalog-empty {
  font-size: 12px;
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="main"] .main-catalog-entry {
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(2, 6, 23, 0.56);
  padding: 8px;
  display: grid;
  gap: 8px;
}

body[data-page="app"][data-app-mode="main"] .main-catalog-entry.active {
  border-color: rgba(52, 211, 153, 0.65);
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.22);
}

body[data-page="app"][data-app-mode="main"] .main-catalog-entry-head {
  display: grid;
  gap: 4px;
}

body[data-page="app"][data-app-mode="main"] .main-catalog-entry-head strong {
  font-size: 12px;
  color: #e2e8f0;
  line-height: 1.3;
}

body[data-page="app"][data-app-mode="main"] .main-catalog-entry-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  font-size: 11px;
  color: #a5f3fc;
  user-select: none;
}

body[data-page="app"][data-app-mode="main"] .main-catalog-entry-toggle input {
  width: 14px;
  height: 14px;
  accent-color: #14b8a6;
}

body[data-page="app"][data-app-mode="main"] .main-catalog-meta {
  font-size: 11px;
  color: #7dd3fc;
}

body[data-page="app"][data-app-mode="main"] .main-catalog-entry-summary {
  font-size: 11px;
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="main"] .main-catalog-table-wrap {
  overflow: auto;
  max-height: 260px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 36, 0.78);
}

body[data-page="app"][data-app-mode="main"] .main-catalog-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 11px;
  color: #dbeafe;
  min-width: 100%;
}

body[data-page="app"][data-app-mode="main"] .main-catalog-table th,
body[data-page="app"][data-app-mode="main"] .main-catalog-table td {
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  padding: 5px 6px;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-page="app"][data-app-mode="main"] .main-catalog-table th {
  font-weight: 700;
  color: #bfdbfe;
  background: rgba(15, 23, 42, 0.44);
}

body[data-page="app"][data-app-mode="main"] .main-pane-sub {
  font-size: 12px;
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="main"] .main-template-list {
  display: grid;
  gap: 8px;
  overflow: auto;
  padding-right: 2px;
}

body[data-page="app"][data-app-mode="main"] .main-template-card {
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: #0f1724;
  color: #e2e8f0;
  border-radius: 8px;
  padding: 10px;
  display: grid;
  gap: 10px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

body[data-page="app"][data-app-mode="main"] .main-template-card:hover {
  border-color: rgba(96, 165, 250, 0.65);
  transform: translateY(-1px);
}

body[data-page="app"][data-app-mode="main"] .main-template-card.active {
  border-color: rgba(14, 165, 233, 0.9);
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2);
}

body[data-page="app"][data-app-mode="main"] .main-template-card.previewing {
  border-color: rgba(45, 212, 191, 0.62);
  box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.28);
}

body[data-page="app"][data-app-mode="main"] .main-template-card strong {
  font-size: 13px;
}

body[data-page="app"][data-app-mode="main"] .main-template-card span {
  font-size: 12px;
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="main"] .main-template-card-open {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  display: grid;
  gap: 4px;
  cursor: pointer;
}

body[data-page="app"][data-app-mode="main"] .main-template-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body[data-page="app"][data-app-mode="main"] .main-template-card-actions .btn {
  min-height: 30px;
  padding: 7px 10px;
  font-size: 11px;
}

body[data-page="app"][data-app-mode="main"] .main-template-card-actions .btn.primary {
  border-color: rgba(96, 165, 250, 0.72);
  box-shadow: 0 16px 24px -20px rgba(59, 130, 246, 0.78);
}

body[data-page="app"][data-app-mode="main"] .btn.ghost.danger {
  border-color: rgba(248, 113, 113, 0.35);
  color: #fecaca;
}

body[data-page="app"][data-app-mode="main"] .btn.ghost.danger:hover {
  border-color: rgba(248, 113, 113, 0.6);
  background: rgba(127, 29, 29, 0.22);
}

body[data-page="app"][data-app-mode="main"] .main-template-empty {
  border-radius: 8px;
  border: 1px dashed rgba(148, 163, 184, 0.24);
  color: #94a3b8;
  font-size: 12px;
  padding: 10px;
}

body[data-page="app"][data-app-mode="main"] .main-chat-shell {
  flex: 1;
  height: 100%;
  min-height: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  overflow: hidden;
}

body[data-page="app"][data-app-mode="main"] .main-chat-sidebar {
  min-height: 0;
  border-radius: 14px;
  border: 1px solid rgba(125, 211, 252, 0.2);
  background: linear-gradient(170deg, rgba(15, 23, 42, 0.94), rgba(15, 23, 42, 0.9));
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

body[data-page="app"][data-app-mode="main"] .main-sidebar-head {
  display: grid;
  gap: 6px;
}

body[data-page="app"][data-app-mode="main"] .main-sidebar-head h2 {
  font-size: 18px;
  line-height: 1.15;
  color: #e2e8f0;
}

body[data-page="app"][data-app-mode="main"] .main-sidebar-head p {
  font-size: 15px;
  line-height: 1.35;
  color: #a5b4cf;
}

body[data-page="app"][data-app-mode="main"] .main-sidebar-file-pill {
  border-radius: 12px;
  border: 1px solid rgba(56, 189, 248, 0.34);
  background: rgba(2, 132, 199, 0.12);
  color: #bae6fd;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-page="app"][data-app-mode="main"] .main-sidebar-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body[data-page="app"][data-app-mode="main"] .main-sidebar-actions .btn {
  min-height: 44px;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body[data-page="app"][data-app-mode="main"] .main-sidebar-actions #main-rename-folder {
  grid-column: 1 / -1;
}

body[data-page="app"][data-app-mode="main"] .main-list-wrap {
  min-height: 0;
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="main"] .main-sidebar-dual {
  min-height: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

body[data-page="app"][data-app-mode="main"] .main-list-window {
  display: grid;
  min-height: 0;
  max-height: 292px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(15, 23, 42, 0.86);
  padding: 12px;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  gap: 10px;
  overflow: hidden;
}

body[data-page="app"][data-app-mode="main"] .main-list-window.main-list-window-has-search {
  grid-template-rows: auto auto minmax(0, 1fr);
}

body[data-page="app"][data-app-mode="main"] .main-list-wrap h3 {
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #cbd5e1;
  margin: 0;
}

body[data-page="app"][data-app-mode="main"] .main-folder-list,
body[data-page="app"][data-app-mode="main"] .main-thread-list,
body[data-page="app"][data-app-mode="main"] .main-document-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 10px;
  align-content: start;
  padding-right: 2px;
  padding-top: 2px;
  overscroll-behavior: contain;
}

body[data-page="app"][data-app-mode="main"] .main-list-search {
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(125, 211, 252, 0.34);
  background: rgba(2, 6, 23, 0.96);
  color: #ffffff;
  caret-color: #ffffff;
  padding: 12px 14px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
  position: relative;
  z-index: 1;
}

body[data-page="app"][data-app-mode="main"] .main-list-search::placeholder {
  color: rgba(226, 232, 240, 0.86);
}

body[data-page="app"][data-app-mode="main"] .main-list-search:-webkit-autofill,
body[data-page="app"][data-app-mode="main"] .main-list-search:-webkit-autofill:hover,
body[data-page="app"][data-app-mode="main"] .main-list-search:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
  transition: background-color 9999s ease-out 0s;
}

body[data-page="app"][data-app-mode="main"] .main-list-search:focus {
  outline: none;
  border-color: rgba(56, 189, 248, 0.75);
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.24);
}

body[data-page="app"][data-app-mode="main"] .main-folder-list::-webkit-scrollbar,
body[data-page="app"][data-app-mode="main"] .main-thread-list::-webkit-scrollbar,
body[data-page="app"][data-app-mode="main"] .main-document-list::-webkit-scrollbar,
body[data-page="app"][data-app-mode="main"] .main-chat-messages::-webkit-scrollbar,
body[data-page="app"][data-app-mode="main"] .main-ai-suggestions-list::-webkit-scrollbar,
body[data-page="app"][data-app-mode="main"] .main-template-preview-canvas::-webkit-scrollbar,
body[data-page="app"][data-app-mode="main"] .main-document-sheet-editor::-webkit-scrollbar,
body[data-page="app"][data-app-mode="main"] .main-document-sheet-view::-webkit-scrollbar,
body[data-page="app"][data-app-mode="main"] .main-catalog-preview::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body[data-page="app"][data-app-mode="main"] .main-folder-list::-webkit-scrollbar-track,
body[data-page="app"][data-app-mode="main"] .main-thread-list::-webkit-scrollbar-track,
body[data-page="app"][data-app-mode="main"] .main-document-list::-webkit-scrollbar-track,
body[data-page="app"][data-app-mode="main"] .main-chat-messages::-webkit-scrollbar-track,
body[data-page="app"][data-app-mode="main"] .main-ai-suggestions-list::-webkit-scrollbar-track,
body[data-page="app"][data-app-mode="main"] .main-template-preview-canvas::-webkit-scrollbar-track,
body[data-page="app"][data-app-mode="main"] .main-document-sheet-editor::-webkit-scrollbar-track,
body[data-page="app"][data-app-mode="main"] .main-document-sheet-view::-webkit-scrollbar-track,
body[data-page="app"][data-app-mode="main"] .main-catalog-preview::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.42);
  border-radius: 999px;
}

body[data-page="app"][data-app-mode="main"] .main-folder-list::-webkit-scrollbar-thumb,
body[data-page="app"][data-app-mode="main"] .main-thread-list::-webkit-scrollbar-thumb,
body[data-page="app"][data-app-mode="main"] .main-document-list::-webkit-scrollbar-thumb,
body[data-page="app"][data-app-mode="main"] .main-chat-messages::-webkit-scrollbar-thumb,
body[data-page="app"][data-app-mode="main"] .main-ai-suggestions-list::-webkit-scrollbar-thumb,
body[data-page="app"][data-app-mode="main"] .main-template-preview-canvas::-webkit-scrollbar-thumb,
body[data-page="app"][data-app-mode="main"] .main-document-sheet-editor::-webkit-scrollbar-thumb,
body[data-page="app"][data-app-mode="main"] .main-document-sheet-view::-webkit-scrollbar-thumb,
body[data-page="app"][data-app-mode="main"] .main-catalog-preview::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.7);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

body[data-page="app"][data-app-mode="main"] .main-list-empty {
  border: 1px dashed rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  color: #94a3b8;
  font-size: 12px;
  padding: 8px;
}

body[data-page="app"][data-app-mode="main"] .main-folder-item,
body[data-page="app"][data-app-mode="main"] .main-thread-item {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  background: #0f1724;
  color: #e2e8f0;
  text-align: left;
  width: 100%;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

body[data-page="app"][data-app-mode="main"] .main-folder-item:hover,
body[data-page="app"][data-app-mode="main"] .main-thread-item:hover {
  border-color: rgba(125, 211, 252, 0.62);
  transform: translateY(-1px);
}

body[data-page="app"][data-app-mode="main"] .main-folder-item.active,
body[data-page="app"][data-app-mode="main"] .main-thread-item.active {
  border-color: rgba(14, 165, 233, 0.85);
  background: rgba(14, 165, 233, 0.14);
  box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.28);
}

body[data-page="app"][data-app-mode="main"] .main-folder-item strong,
body[data-page="app"][data-app-mode="main"] .main-thread-item strong {
  font-size: 16px;
  font-weight: 700;
  display: block;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

body[data-page="app"][data-app-mode="main"] .main-folder-item span,
body[data-page="app"][data-app-mode="main"] .main-thread-item span {
  font-size: 14px;
  color: #dbeafe;
  display: block;
  margin-top: 3px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

body[data-page="app"][data-app-mode="main"] .main-folder-item small {
  margin-top: 4px;
  display: block;
  font-size: 12px;
  line-height: 1.3;
  color: #86efac;
  overflow-wrap: anywhere;
}

body[data-page="app"][data-app-mode="main"] .main-folder-item .main-folder-item-meta {
  margin-top: 2px;
  color: #93c5fd;
}

body[data-page="app"][data-app-mode="main"] .main-doc-list-window {
  max-height: 180px;
}

body[data-page="app"][data-app-mode="main"] .main-document-item {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  background: #0f1724;
  color: #e2e8f0;
  text-align: left;
  width: 100%;
  padding: 12px 14px;
  display: grid;
  gap: 4px;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

body[data-page="app"][data-app-mode="main"] .main-document-item:hover {
  border-color: rgba(125, 211, 252, 0.62);
  transform: translateY(-1px);
}

body[data-page="app"][data-app-mode="main"] .main-document-item.active {
  border-color: rgba(14, 165, 233, 0.85);
  background: rgba(14, 165, 233, 0.14);
  box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.28);
}

body[data-page="app"][data-app-mode="main"] .main-document-item strong {
  font-size: 16px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

body[data-page="app"][data-app-mode="main"] .main-document-item span {
  font-size: 14px;
  color: #cbd5e1;
  overflow-wrap: anywhere;
}

body[data-page="app"][data-app-mode="main"] .main-document-item em {
  justify-self: start;
  margin-top: 4px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  padding: 4px 10px;
  font-size: 12px;
  font-style: normal;
  color: #94a3b8;
  background: rgba(15, 23, 36, 0.84);
}

body[data-page="app"][data-app-mode="main"] .main-document-item em[data-state="saved"] {
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.38);
}

body[data-page="app"][data-app-mode="main"] .main-document-item em[data-state="busy"] {
  color: #bae6fd;
  border-color: rgba(56, 189, 248, 0.46);
}

body[data-page="app"][data-app-mode="main"] .main-document-item em[data-state="error"] {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.45);
}

body[data-page="app"][data-app-mode="main"] .main-document-item em[data-state="dirty"] {
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.46);
}

body[data-page="app"][data-app-mode="main"] .main-chat-stage {
  flex: 1;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

body[data-page="app"][data-app-mode="main"] .main-chat-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: #111827;
  padding: 9px 10px;
}

body[data-page="app"][data-app-mode="main"] .main-ai-suggestions {
  border-radius: 10px;
  border: 1px solid rgba(125, 211, 252, 0.24);
  background: linear-gradient(140deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.82));
  padding: 8px;
  display: grid;
  gap: 6px;
  overflow: hidden;
}

body[data-page="app"][data-app-mode="main"] .main-ai-suggestions[data-state="ready"] {
  border-color: rgba(45, 212, 191, 0.34);
  box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.14);
}

body[data-page="app"][data-app-mode="main"] .main-ai-suggestions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

body[data-page="app"][data-app-mode="main"] .main-ai-suggestions-head h3 {
  margin: 0;
  font-size: 12px;
  color: #ecfeff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="main"] .main-ai-suggestions-head .btn {
  min-height: 28px;
  padding: 5px 9px;
  font-size: 11px;
}

body[data-page="app"][data-app-mode="main"] .main-ai-suggestions-meta {
  font-size: 11px;
  line-height: 1.35;
  color: #93c5fd;
}

body[data-page="app"][data-app-mode="main"] .main-ai-suggestions-note {
  font-size: 10px;
  line-height: 1.35;
  color: #a5b4cf;
}

body[data-page="app"][data-app-mode="main"] .main-ai-suggestions-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 6px;
  max-height: 96px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

body[data-page="app"][data-app-mode="main"] .main-ai-suggestion-chip {
  border: 1px solid rgba(125, 211, 252, 0.35);
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.72);
  color: #e2e8f0;
  padding: 6px 10px;
  min-height: 38px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

body[data-page="app"][data-app-mode="main"] .main-ai-suggestion-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(56, 189, 248, 0.88);
  box-shadow: 0 10px 20px -18px rgba(14, 165, 233, 0.9);
}

body[data-page="app"][data-app-mode="main"] .main-ai-suggestion-chip.active {
  border-color: rgba(20, 184, 166, 0.78);
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.2), rgba(2, 132, 199, 0.16));
  color: #ccfbf1;
}

body[data-page="app"][data-app-mode="main"] .main-chat-title {
  display: grid;
  gap: 2px;
}

body[data-page="app"][data-app-mode="main"] .main-chat-title strong {
  font-size: 13px;
}

body[data-page="app"][data-app-mode="main"] .main-chat-title span {
  font-size: 12px;
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="main"] .main-chat-title small {
  font-size: 11px;
  color: #7dd3fc;
}

body[data-page="app"][data-app-mode="main"] .main-chat-messages {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow: auto;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: #111827;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body[data-page="app"][data-app-mode="main"] .main-chat-empty {
  font-size: 12px;
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="main"] .main-message {
  max-width: calc(100% - 20px);
  width: auto;
  min-width: 0;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  padding: 14px 16px;
  display: grid;
  gap: 6px;
  opacity: 1;
  transform: translateY(0) scale(1);
  position: relative;
  box-sizing: border-box;
}

body[data-page="app"][data-app-mode="main"] .main-message.message-enter {
  animation: none;
}

body[data-page="app"][data-app-mode="main"] .main-message.user.message-enter {
  animation: none;
}

body[data-page="app"][data-app-mode="main"] .main-message.bot.message-enter {
  animation: none;
}

body[data-page="app"][data-app-mode="main"] .main-message.user {
  align-self: flex-end;
  max-width: min(88%, 1100px);
  background: linear-gradient(135deg, #0b84ff 0%, #2ea2ff 100%);
  border-color: rgba(125, 211, 252, 0.35);
  color: #f0f8ff;
  box-shadow: 0 14px 30px -24px rgba(14, 165, 233, 0.95);
}

body[data-page="app"][data-app-mode="main"] .main-message.bot {
  align-self: flex-start;
  max-width: min(88%, 1100px);
  background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
  color: #ecfeff;
  position: relative;
  overflow: visible;
  border-color: rgba(45, 212, 191, 0.42);
  box-shadow: 0 14px 30px -24px rgba(13, 148, 136, 0.95);
}

body[data-page="app"][data-app-mode="main"] .main-message.bot::before {
  content: none;
}

body[data-page="app"][data-app-mode="main"] .main-message.bot::after {
  content: none;
}

body[data-page="app"][data-app-mode="main"] .main-message.system {
  align-self: center;
  background: #192434;
  border-style: dashed;
  max-width: 95%;
}

body[data-page="app"][data-app-mode="main"] .main-message-text {
  font-size: 14px;
  line-height: 1.42;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
  width: 100%;
  display: block;
  position: relative;
  z-index: 2;
}

body[data-page="app"][data-app-mode="main"] .main-message-text .msg-strong,
body[data-page="app"][data-app-mode="meeting"] .meeting-message-text .msg-strong {
  display: inline-block;
  font-weight: 800;
  transform: scale(1.08);
  transform-origin: left center;
  letter-spacing: 0.01em;
  color: inherit;
}

body[data-page="app"][data-app-mode="main"] .main-message.typing {
  min-width: 240px;
}

body[data-page="app"][data-app-mode="main"] .typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

body[data-page="app"][data-app-mode="main"] .typing-dots i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #ccfbf1;
  opacity: 0.35;
  transform: translateY(0);
  animation: botTyping 1.2s ease-in-out infinite;
}

body[data-page="app"][data-app-mode="main"] .typing-dots i:nth-child(2) {
  animation-delay: 0.15s;
}

body[data-page="app"][data-app-mode="main"] .typing-dots i:nth-child(3) {
  animation-delay: 0.3s;
}

body[data-page="app"][data-app-mode="main"] .main-message-meta {
  font-size: 11px;
  color: rgba(204, 251, 241, 0.84);
  position: relative;
  z-index: 2;
}

@keyframes mainMessageIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mainMessageInUser {
  from {
    opacity: 0;
    transform: translate3d(18px, 14px, 0) scale(0.982);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes mainMessageInBot {
  from {
    opacity: 0;
    transform: translate3d(-18px, 14px, 0) scale(0.982);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes mainMessageGlow {
  0% {
    box-shadow: 0 0 0 rgba(34, 211, 238, 0);
  }
  35% {
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.18);
  }
  100% {
    box-shadow: 0 0 0 rgba(34, 211, 238, 0);
  }
}

@keyframes mainMessageGlowUser {
  0% {
    box-shadow: 0 0 0 rgba(56, 189, 248, 0);
  }
  40% {
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.24);
  }
  100% {
    box-shadow: 0 0 0 rgba(56, 189, 248, 0);
  }
}

@keyframes mainMessageGlowBot {
  0% {
    box-shadow: 0 0 0 rgba(20, 184, 166, 0);
  }
  40% {
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.24);
  }
  100% {
    box-shadow: 0 0 0 rgba(20, 184, 166, 0);
  }
}

@keyframes livePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.44);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(20, 184, 166, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(20, 184, 166, 0);
  }
}

@keyframes projectBrainPulse {
  0% {
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(0.94);
  }
  50% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1.03);
  }
  100% {
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(0.94);
  }
}

@keyframes botGlow {
  0% {
    transform: translateX(-12px);
    opacity: 0.24;
  }
  50% {
    transform: translateX(10px);
    opacity: 0.34;
  }
  100% {
    transform: translateX(-12px);
    opacity: 0.24;
  }
}

@keyframes botSpark {
  0% {
    transform: scale(0.84) translate(-2px, 1px);
    opacity: 0.38;
  }
  50% {
    transform: scale(1.18) translate(2px, -2px);
    opacity: 0.9;
  }
  100% {
    transform: scale(0.84) translate(-2px, 1px);
    opacity: 0.38;
  }
}

@keyframes botTyping {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  40% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

body[data-page="app"][data-app-mode="main"] .main-chat-form {
  display: flex;
  gap: 8px;
  align-items: center;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-voice-input {
  align-items: flex-end;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-tts-output {
  align-items: flex-end;
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form input {
  flex: 1;
  min-width: 220px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: #0f1724;
  color: #e2e8f0;
  padding: 10px 12px;
}

body[data-page="app"] .finora-voice-dock,
body[data-page="worker"] .finora-voice-dock {
  display: grid;
  gap: 8px;
  align-self: end;
  min-width: 196px;
  padding: 8px;
  border-radius: 22px;
  border: 1px solid rgba(56, 189, 248, 0.18);
  background: linear-gradient(180deg, rgba(6, 15, 29, 0.92), rgba(8, 22, 40, 0.82));
  box-shadow:
    0 22px 44px -36px rgba(8, 145, 178, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-page="app"] .finora-voice-actions,
body[data-page="worker"] .finora-voice-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}

body[data-page="app"] .finora-voice-trigger,
body[data-page="worker"] .finora-voice-trigger {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  min-height: 56px;
  width: 100%;
  padding: 0 18px;
  border-radius: 18px;
  border: 1px solid rgba(34, 211, 238, 0.28);
  background:
    radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.18), transparent 56%),
    linear-gradient(135deg, rgba(8, 15, 28, 0.94), rgba(7, 20, 34, 0.9));
  color: #d9f7ff;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

body[data-page="app"] .finora-voice-trigger:hover:not(:disabled),
body[data-page="worker"] .finora-voice-trigger:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(103, 232, 249, 0.42);
  box-shadow: 0 18px 36px -28px rgba(34, 211, 238, 0.8);
}

body[data-page="app"] .finora-voice-trigger:focus-visible,
body[data-page="worker"] .finora-voice-trigger:focus-visible {
  outline: 0;
  border-color: rgba(103, 232, 249, 0.5);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.14);
}

body[data-page="app"] .finora-voice-trigger:disabled,
body[data-page="worker"] .finora-voice-trigger:disabled {
  cursor: default;
}

body[data-page="app"] .finora-voice-trigger-pulse,
body[data-page="worker"] .finora-voice-trigger-pulse {
  position: absolute;
  inset: -24%;
  z-index: -1;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(34, 211, 238, 0.48) 0%, rgba(34, 211, 238, 0.12) 28%, transparent 68%);
  opacity: 0.22;
  transform: scale(0.88);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

body[data-page="app"] .finora-voice-trigger-core,
body[data-page="worker"] .finora-voice-trigger-core {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 6px rgba(34, 211, 238, 0.12);
}

body[data-page="app"] .finora-voice-trigger-label,
body[data-page="worker"] .finora-voice-trigger-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body[data-page="app"] .finora-voice-stop,
body[data-page="worker"] .finora-voice-stop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 14px;
  border-radius: 18px;
  border: 1px solid rgba(248, 113, 113, 0.22);
  background: linear-gradient(145deg, rgba(52, 14, 20, 0.94), rgba(25, 10, 16, 0.9));
  color: #ffe4e6;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateX(8px) scale(0.92);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

body[data-page="app"] .finora-voice-stop-icon,
body[data-page="worker"] .finora-voice-stop-icon {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: currentColor;
  box-shadow: 0 0 0 6px rgba(248, 113, 113, 0.12);
}

body[data-page="app"] .finora-voice-stop:hover:not(:disabled),
body[data-page="worker"] .finora-voice-stop:hover:not(:disabled) {
  border-color: rgba(252, 165, 165, 0.42);
  box-shadow: 0 18px 36px -28px rgba(248, 113, 113, 0.85);
}

body[data-page="app"] .finora-voice-stop:focus-visible,
body[data-page="worker"] .finora-voice-stop:focus-visible {
  outline: 0;
  border-color: rgba(252, 165, 165, 0.5);
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.14);
}

body[data-page="app"] .finora-voice-dock[data-state="recording"] .finora-voice-stop,
body[data-page="worker"] .finora-voice-dock[data-state="recording"] .finora-voice-stop {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

body[data-page="app"] .finora-voice-status,
body[data-page="worker"] .finora-voice-status {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.92);
  line-height: 1.3;
  text-align: center;
  white-space: normal;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(8, 15, 27, 0.44);
}

body[data-page="app"] .finora-voice-dock[data-state="recording"],
body[data-page="worker"] .finora-voice-dock[data-state="recording"] {
  border-color: rgba(34, 211, 238, 0.28);
  box-shadow:
    0 26px 50px -36px rgba(34, 211, 238, 0.78),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-page="app"] .finora-voice-dock[data-state="recording"] .finora-voice-status,
body[data-page="worker"] .finora-voice-dock[data-state="recording"] .finora-voice-status {
  color: #67e8f9;
  background: rgba(8, 145, 178, 0.16);
}

body[data-page="app"] .finora-voice-dock[data-state="processing"] .finora-voice-status,
body[data-page="worker"] .finora-voice-dock[data-state="processing"] .finora-voice-status {
  color: #a5f3fc;
  background: rgba(14, 116, 144, 0.18);
}

body[data-page="app"] .finora-voice-dock[data-state="submitting"] .finora-voice-status,
body[data-page="worker"] .finora-voice-dock[data-state="submitting"] .finora-voice-status {
  color: #dbeafe;
  background: rgba(29, 78, 216, 0.2);
}

body[data-page="app"] .finora-voice-dock[data-state="ready"] .finora-voice-status,
body[data-page="worker"] .finora-voice-dock[data-state="ready"] .finora-voice-status {
  color: #99f6e4;
}

body[data-page="app"] .finora-voice-dock[data-state="error"] .finora-voice-status,
body[data-page="worker"] .finora-voice-dock[data-state="error"] .finora-voice-status {
  color: #fca5a5;
}

body[data-page="app"] .finora-voice-trigger.is-recording,
body[data-page="worker"] .finora-voice-trigger.is-recording {
  border-color: rgba(103, 232, 249, 0.62);
  box-shadow:
    0 0 0 1px rgba(103, 232, 249, 0.16),
    0 0 32px -14px rgba(34, 211, 238, 0.9);
  animation: finoraVoicePulse 1.45s ease-in-out infinite;
}

body[data-page="app"] .finora-voice-trigger.is-recording .finora-voice-trigger-pulse,
body[data-page="worker"] .finora-voice-trigger.is-recording .finora-voice-trigger-pulse {
  opacity: 0.54;
  transform: scale(1.06);
  animation: finoraVoiceGlow 1.45s ease-in-out infinite;
}

body[data-page="app"] .finora-voice-trigger.is-processing,
body[data-page="worker"] .finora-voice-trigger.is-processing {
  border-color: rgba(125, 211, 252, 0.4);
  box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.1);
}

body[data-page="app"] .finora-voice-trigger.is-submitting,
body[data-page="worker"] .finora-voice-trigger.is-submitting {
  border-color: rgba(96, 165, 250, 0.48);
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.12),
    0 0 28px -16px rgba(59, 130, 246, 0.92);
}

body[data-page="app"] .is-voice-filled,
body[data-page="worker"] .is-voice-filled {
  animation: finoraVoiceInputFlash 0.72s ease;
}

body[data-page="app"] .finora-tts-dock,
body[data-page="worker"] .finora-tts-dock {
  display: grid;
  gap: 8px;
  align-self: end;
  min-width: 220px;
  padding: 8px;
  border-radius: 22px;
  border: 1px solid rgba(45, 212, 191, 0.18);
  background: linear-gradient(180deg, rgba(7, 17, 31, 0.92), rgba(6, 20, 35, 0.82));
  box-shadow:
    0 22px 44px -36px rgba(20, 184, 166, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-page="app"] .finora-tts-toggle,
body[data-page="worker"] .finora-tts-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  width: 100%;
  padding: 0 16px;
  border-radius: 18px;
  border: 1px solid rgba(45, 212, 191, 0.22);
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.16), transparent 50%),
    linear-gradient(135deg, rgba(7, 18, 32, 0.96), rgba(10, 25, 43, 0.9));
  color: #d5fbff;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

body[data-page="app"] .finora-tts-toggle:hover,
body[data-page="worker"] .finora-tts-toggle:hover {
  transform: translateY(-1px);
  border-color: rgba(94, 234, 212, 0.38);
  box-shadow: 0 18px 36px -30px rgba(45, 212, 191, 0.7);
}

body[data-page="app"] .finora-tts-toggle:focus-visible,
body[data-page="worker"] .finora-tts-toggle:focus-visible {
  outline: 0;
  border-color: rgba(94, 234, 212, 0.46);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.14);
}

body[data-page="app"] .finora-tts-controls,
body[data-page="worker"] .finora-tts-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

body[data-page="app"] .finora-tts-voice-group,
body[data-page="worker"] .finora-tts-voice-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

body[data-page="app"] .finora-tts-voice-option,
body[data-page="worker"] .finora-tts-voice-option,
body[data-page="app"] .finora-tts-loop,
body[data-page="worker"] .finora-tts-loop {
  min-height: 38px;
  padding: 0 10px;
  border-radius: 14px;
  border: 1px solid rgba(45, 212, 191, 0.12);
  background: rgba(8, 15, 27, 0.64);
  color: rgba(209, 250, 229, 0.9);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

body[data-page="app"] .finora-tts-voice-option:hover,
body[data-page="worker"] .finora-tts-voice-option:hover,
body[data-page="app"] .finora-tts-loop:hover,
body[data-page="worker"] .finora-tts-loop:hover {
  transform: translateY(-1px);
  border-color: rgba(94, 234, 212, 0.28);
  box-shadow: 0 16px 28px -26px rgba(45, 212, 191, 0.72);
}

body[data-page="app"] .finora-tts-voice-option:focus-visible,
body[data-page="worker"] .finora-tts-voice-option:focus-visible,
body[data-page="app"] .finora-tts-loop:focus-visible,
body[data-page="worker"] .finora-tts-loop:focus-visible {
  outline: 0;
  border-color: rgba(94, 234, 212, 0.4);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.14);
}

body[data-page="app"] .finora-tts-voice-option.is-active,
body[data-page="worker"] .finora-tts-voice-option.is-active,
body[data-page="app"] .finora-tts-loop.is-active,
body[data-page="worker"] .finora-tts-loop.is-active {
  border-color: rgba(94, 234, 212, 0.3);
  background:
    radial-gradient(circle at 50% 0%, rgba(20, 184, 166, 0.18), transparent 56%),
    rgba(7, 30, 41, 0.94);
  color: #d5fbff;
  box-shadow:
    0 0 0 1px rgba(94, 234, 212, 0.08),
    0 0 22px -18px rgba(45, 212, 191, 0.9);
}

body[data-page="app"] .finora-tts-bars,
body[data-page="worker"] .finora-tts-bars {
  display: inline-flex;
  align-items: end;
  gap: 3px;
  height: 16px;
}

body[data-page="app"] .finora-tts-bar,
body[data-page="worker"] .finora-tts-bar {
  width: 4px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.62;
}

body[data-page="app"] .finora-tts-bar:nth-child(1),
body[data-page="worker"] .finora-tts-bar:nth-child(1) {
  height: 7px;
}

body[data-page="app"] .finora-tts-bar:nth-child(2),
body[data-page="worker"] .finora-tts-bar:nth-child(2) {
  height: 14px;
}

body[data-page="app"] .finora-tts-bar:nth-child(3),
body[data-page="worker"] .finora-tts-bar:nth-child(3) {
  height: 10px;
}

body[data-page="app"] .finora-tts-label,
body[data-page="worker"] .finora-tts-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body[data-page="app"] .finora-tts-pill,
body[data-page="worker"] .finora-tts-pill {
  min-width: 42px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(45, 212, 191, 0.14);
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body[data-page="app"] .finora-tts-status,
body[data-page="worker"] .finora-tts-status {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(8, 15, 27, 0.42);
  color: rgba(148, 163, 184, 0.92);
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.3;
}

body[data-page="app"] .finora-tts-toggle.is-active,
body[data-page="worker"] .finora-tts-toggle.is-active {
  border-color: rgba(94, 234, 212, 0.34);
  box-shadow:
    0 0 0 1px rgba(94, 234, 212, 0.08),
    0 0 28px -18px rgba(45, 212, 191, 0.88);
}

body[data-page="app"] .finora-tts-toggle.is-loading,
body[data-page="worker"] .finora-tts-toggle.is-loading {
  border-color: rgba(125, 211, 252, 0.42);
}

body[data-page="app"] .finora-tts-toggle.is-playing,
body[data-page="worker"] .finora-tts-toggle.is-playing {
  border-color: rgba(110, 231, 183, 0.46);
  box-shadow:
    0 0 0 1px rgba(110, 231, 183, 0.08),
    0 0 36px -18px rgba(16, 185, 129, 0.9);
}

body[data-page="app"] .finora-tts-toggle.is-playing .finora-tts-bar,
body[data-page="worker"] .finora-tts-toggle.is-playing .finora-tts-bar {
  animation: finoraTtsBars 0.9s ease-in-out infinite;
}

body[data-page="app"] .finora-tts-toggle.is-playing .finora-tts-bar:nth-child(2),
body[data-page="worker"] .finora-tts-toggle.is-playing .finora-tts-bar:nth-child(2) {
  animation-delay: 0.1s;
}

body[data-page="app"] .finora-tts-toggle.is-playing .finora-tts-bar:nth-child(3),
body[data-page="worker"] .finora-tts-toggle.is-playing .finora-tts-bar:nth-child(3) {
  animation-delay: 0.2s;
}

body[data-page="app"] .finora-tts-dock[data-state="loading"] .finora-tts-status,
body[data-page="worker"] .finora-tts-dock[data-state="loading"] .finora-tts-status {
  color: #bfdbfe;
  background: rgba(29, 78, 216, 0.16);
}

body[data-page="app"] .finora-tts-dock[data-state="playing"] .finora-tts-status,
body[data-page="worker"] .finora-tts-dock[data-state="playing"] .finora-tts-status {
  color: #a7f3d0;
  background: rgba(6, 78, 59, 0.2);
}

body[data-page="app"] .finora-tts-dock[data-state="ready"] .finora-tts-status,
body[data-page="worker"] .finora-tts-dock[data-state="ready"] .finora-tts-status {
  color: #99f6e4;
}

body[data-page="app"] .finora-tts-dock[data-state="error"] .finora-tts-status,
body[data-page="worker"] .finora-tts-dock[data-state="error"] .finora-tts-status {
  color: #fecaca;
  background: rgba(127, 29, 29, 0.2);
}

@keyframes finoraVoicePulse {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-1px) scale(1.02);
  }
}

@keyframes finoraVoiceGlow {
  0%,
  100% {
    opacity: 0.34;
    transform: scale(0.92);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.12);
  }
}

@keyframes finoraVoiceInputFlash {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.28);
  }
  55% {
    box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.16);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0);
  }
}

@keyframes finoraTtsBars {
  0%,
  100% {
    transform: scaleY(0.72);
    opacity: 0.55;
  }
  50% {
    transform: scaleY(1.18);
    opacity: 1;
  }
}

body[data-page="app"][data-app-mode="main"] .preview-pane {
  align-content: start;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 116px);
  padding-right: 8px;
  scrollbar-gutter: stable;
}

body[data-page="app"][data-app-mode="main"] .preview-pane::-webkit-scrollbar {
  width: 10px;
}

body[data-page="app"][data-app-mode="main"] .preview-pane::-webkit-scrollbar-track {
  background: rgba(15, 23, 36, 0.75);
  border-radius: 999px;
}

body[data-page="app"][data-app-mode="main"] .preview-pane::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.5);
  border-radius: 999px;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-card {
  flex: none;
  min-height: 0;
  height: min(62vh, 660px);
  max-height: none;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: #111827;
  color: #cbd5e1;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-card::-webkit-scrollbar {
  width: 10px;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-card::-webkit-scrollbar-track {
  background: rgba(15, 23, 36, 0.75);
  border-radius: 999px;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-card::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.58);
  border-radius: 999px;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-meta {
  display: grid;
  gap: 4px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  padding-bottom: 8px;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-meta strong {
  font-size: 16px;
  color: #e2e8f0;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-meta span {
  font-size: 13px;
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-canvas {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #0b1321;
  padding: 10px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 14px;
  scrollbar-gutter: stable;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-a4 {
  position: relative;
  width: min(100%, 430px);
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: var(--preview-aspect, 210 / 297);
  background: #ffffff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 18px 40px -28px rgba(2, 6, 23, 0.82);
  border: 1px solid rgba(15, 23, 42, 0.16);
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-el {
  position: absolute;
  overflow: hidden;
  box-sizing: border-box;
  color: #0f172a;
  font-size: 10px;
  line-height: 1.25;
  border-radius: 2px;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-el.text,
body[data-page="app"][data-app-mode="main"] .main-template-preview-el.agb {
  white-space: pre-wrap;
  word-break: break-word;
  cursor: pointer;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-el.text,
body[data-page="app"][data-app-mode="main"] .main-template-preview-el.agb,
body[data-page="app"][data-app-mode="main"] .main-template-preview-el.invoice-details,
body[data-page="app"][data-app-mode="main"] .main-template-preview-el.signature,
body[data-page="app"][data-app-mode="main"] .main-template-preview-el.qr-box,
body[data-page="app"][data-app-mode="main"] .main-template-preview-el.table-note,
body[data-page="app"][data-app-mode="main"] .main-template-preview-el.footer-details {
  overflow: visible;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-el.text:hover,
body[data-page="app"][data-app-mode="main"] .main-template-preview-el.agb:hover {
  outline: 1px dashed rgba(2, 132, 199, 0.45);
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-el.signature,
body[data-page="app"][data-app-mode="main"] .main-template-preview-el.invoice-details {
  border: none;
  background: transparent;
  padding: 0;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-el.qr-box,
body[data-page="app"][data-app-mode="main"] .main-template-preview-el.table-note,
body[data-page="app"][data-app-mode="main"] .main-template-preview-el.footer-details {
  border: none;
  background: transparent;
  padding: 0;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-el.table {
  border: none;
  background: transparent;
  padding: 0;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-table-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  background: transparent;
  font-size: inherit;
  line-height: 1.15;
  color: #0f172a;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-table-grid th {
  background: rgba(15, 23, 42, 0.07);
  font-weight: 700;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-table-grid th,
body[data-page="app"][data-app-mode="main"] .main-template-preview-table-grid td {
  padding: 1px 3px;
  border: none;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
  vertical-align: top;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-table-grid td {
  background: transparent;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-service-blocks {
  margin-top: 3px;
  display: grid;
  gap: 2px;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-service-block {
  border-top: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 0;
  background: transparent;
  padding: 1px 0 0;
  display: grid;
  gap: 1px;
  cursor: pointer;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-service-block:hover {
  background: rgba(2, 132, 199, 0.04);
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-service-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-service-block-head strong {
  font-size: 0.95em;
  font-weight: 700;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-service-block-head span {
  font-size: 0.9em;
  font-weight: 700;
  white-space: nowrap;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-service-block-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px 4px;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-service-field {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: baseline;
  gap: 3px;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-service-field small {
  font-size: 0.78em;
  line-height: 1.1;
  color: #64748b;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-service-field strong {
  font-size: 0.9em;
  line-height: 1.1;
  color: #0f172a;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-table-summary {
  border-top: 1px solid rgba(15, 23, 42, 0.14);
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-table-summary td {
  background: transparent;
  padding: 1px 3px;
  border: none;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-weight: 600;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-table-summary tr.emph td {
  border-top: 1px solid rgba(15, 23, 42, 0.12);
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-table-summary tr.emph td:last-child {
  color: #047857;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-signature {
  width: 100%;
  height: 100%;
  display: grid;
  gap: 6px;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-signature-slot {
  display: grid;
  gap: 2px;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-signature-label {
  color: #0f172a;
  font-size: inherit;
  line-height: 1.2;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-signature-line {
  border-top: 1px solid rgba(15, 23, 42, 0.4);
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-signature-name {
  color: #64748b;
  font-size: 0.9em;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-invoice {
  width: 100%;
  display: grid;
  gap: 2px;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-invoice-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-invoice-row span {
  color: #64748b;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-invoice-row strong {
  color: #0f172a;
  font-weight: 600;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-qr-box {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22%;
  gap: 4px;
  align-items: center;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 6px;
  padding: 5px 6px;
  background: #ffffff;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-qr-box.align-left {
  grid-template-columns: 22% minmax(0, 1fr);
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-qr-copy {
  display: grid;
  gap: 2px;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-qr-copy strong {
  font-size: 0.98em;
  line-height: 1.1;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-qr-copy p {
  margin: 0;
  font-size: 0.9em;
  line-height: 1.25;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-qr-link {
  font-size: 0.8em;
  color: #64748b;
  overflow-wrap: anywhere;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-qr-code {
  height: 100%;
  min-height: 24px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 4px;
  display: grid;
  place-items: center;
  background: #ffffff;
  overflow: hidden;
  font-size: 0.82em;
  font-weight: 700;
  color: #64748b;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-qr-code img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-table-note {
  border-top: 1px solid rgba(15, 23, 42, 0.14);
  padding-top: 3px;
  color: #475569;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-table-note.is-empty {
  color: #94a3b8;
  font-style: italic;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-footer-details {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-footer-column {
  display: grid;
  gap: 1px;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-footer-line {
  color: #0f172a;
  font-size: 0.86em;
  line-height: 1.25;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-el.image,
body[data-page="app"][data-app-mode="main"] .main-template-preview-el.qrcode {
  border: none;
  background: transparent;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-el.image img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-el.qrcode img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-placeholder {
  font-size: 12px;
  color: #64748b;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 6px;
}

body[data-page="app"][data-app-mode="main"] .main-doc-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-page="app"][data-app-mode="main"] .main-doc-card {
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: #111827;
  padding: 10px;
  display: grid;
  gap: 8px;
}

body[data-page="app"][data-app-mode="main"] .main-doc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body[data-page="app"][data-app-mode="main"] .main-doc-head h3 {
  font-size: 13px;
  color: #e2e8f0;
}

body[data-page="app"][data-app-mode="main"] .main-doc-status {
  font-size: 11px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  padding: 3px 8px;
  color: #94a3b8;
  background: #0f1724;
}

body[data-page="app"][data-app-mode="main"] .main-doc-status[data-state="busy"] {
  color: #bae6fd;
  border-color: rgba(56, 189, 248, 0.46);
}

body[data-page="app"][data-app-mode="main"] .main-doc-status[data-state="saved"] {
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.38);
}

body[data-page="app"][data-app-mode="main"] .main-doc-status[data-state="error"] {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.45);
}

body[data-page="app"][data-app-mode="main"] .main-doc-status[data-state="dirty"] {
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.46);
}

body[data-page="app"][data-app-mode="main"] .main-doc-editor,
body[data-page="app"][data-app-mode="main"] .main-doc-summary {
  width: 100%;
  min-height: 170px;
  max-height: 260px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: #0f1724;
  color: #e2e8f0;
  padding: 9px 10px;
  font-size: 12px;
  line-height: 1.42;
  overflow: auto;
}

body[data-page="app"][data-app-mode="main"] .main-doc-editor {
  resize: vertical;
}

body[data-page="app"][data-app-mode="main"] .main-doc-summary {
  margin: 0;
  white-space: pre-wrap;
}

body[data-page="app"][data-app-mode="main"] .main-doc-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

body[data-page="app"][data-app-mode="main"] .main-doc-actions .btn {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 11px;
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit {
  --quick-edit-surface: #ffffff;
  --quick-edit-surface-soft: #f4f8ff;
  --quick-edit-border: #d6dfeb;
  --quick-edit-border-strong: #c0ccdc;
  --quick-edit-text: #111827;
  --quick-edit-muted: #5f6f85;
  --quick-edit-primary: #0b73dd;
  position: fixed;
  z-index: 390;
  width: min(460px, calc(100vw - 20px));
  max-height: min(80vh, 640px);
  display: none;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid var(--quick-edit-border);
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  color: var(--quick-edit-text);
  box-shadow: 0 30px 54px -30px rgba(15, 23, 42, 0.55), 0 16px 26px -22px rgba(15, 23, 42, 0.35);
  backdrop-filter: none;
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.75);
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit.show {
  display: grid;
  animation: mainPreviewQuickEditReveal 0.16s ease-out;
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5ecf6;
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-title {
  font-size: 1.45rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--quick-edit-text);
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-close {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--quick-edit-border-strong);
  background: var(--quick-edit-surface);
  color: #1f2937;
  font-size: 31px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-close:hover {
  border-color: #7f93ab;
  box-shadow: 0 14px 26px -24px rgba(15, 23, 42, 0.8);
  transform: translateY(-1px);
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-subtitle {
  font-size: 0.95rem;
  color: var(--quick-edit-muted);
  background: var(--quick-edit-surface-soft);
  border: 1px solid #e3ecf8;
  border-radius: 12px;
  padding: 10px 12px;
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-form {
  display: grid;
  gap: 12px;
  overflow: auto;
  padding-right: 4px;
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-form::-webkit-scrollbar {
  width: 10px;
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-form::-webkit-scrollbar-track {
  background: #eff4fb;
  border-radius: 999px;
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-form::-webkit-scrollbar-thumb {
  background: #c4d4e8;
  border-radius: 999px;
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-status {
  min-height: 38px;
  display: flex;
  align-items: center;
  border-radius: 12px;
  border: 1px solid #dbe6f4;
  background: #f6faff;
  color: #4f6380;
  padding: 8px 12px;
  font-size: 0.84rem;
  font-weight: 600;
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-status[data-state="busy"] {
  border-color: #b8d4f3;
  background: #ecf4ff;
  color: #155da6;
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-status[data-state="saved"] {
  border-color: #b8e5cf;
  background: #effcf5;
  color: #157347;
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-status[data-state="error"] {
  border-color: #f2c1c8;
  background: #fff4f6;
  color: #b4233a;
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-status[data-state="readonly"] {
  border-color: #d7deea;
  background: #f5f7fb;
  color: #64748b;
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-row-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #dbe7f6;
  background: #f8fbff;
  border-radius: 14px;
  padding: 8px 10px;
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-row-indicator {
  font-size: 0.82rem;
  font-weight: 700;
  color: #355072;
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-row-actions button {
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid #c6d4e6;
  background: #ffffff;
  color: #133a68;
  padding: 6px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-row-actions button:hover {
  border-color: #8ea7c6;
  box-shadow: 0 16px 22px -22px rgba(15, 23, 42, 0.7);
  transform: translateY(-1px);
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-row-actions .main-preview-quick-edit-row-remove {
  color: #9a1f36;
  border-color: #e4b2bc;
  background: #fff8f9;
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-row-actions button:disabled {
  border-color: #d4dceb;
  background: #eef2f8;
  color: #94a3b8;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-field {
  display: grid;
  gap: 6px;
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-field > span {
  font-size: 0.86rem;
  font-weight: 650;
  color: #304258;
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-field input,
body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-field textarea {
  width: 100%;
  border: 1px solid var(--quick-edit-border-strong);
  border-radius: 14px;
  background: var(--quick-edit-surface);
  color: #0f172a;
  padding: 11px 13px;
  font-size: 1rem;
  line-height: 1.4;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 8px 20px -20px rgba(15, 23, 42, 0.85);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-field input {
  min-height: 48px;
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-field textarea {
  min-height: 160px;
  resize: vertical;
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-field input:hover,
body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-field textarea:hover {
  border-color: #9bacc1;
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-field input:focus,
body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-field textarea:focus {
  border-color: var(--quick-edit-primary);
  box-shadow: 0 0 0 4px rgba(11, 115, 221, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-field input::placeholder,
body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-field textarea::placeholder {
  color: #93a2b6;
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #d7e3f2;
  background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-total span {
  font-size: 0.86rem;
  color: #4c617b;
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-total strong {
  font-size: 1.28rem;
  color: #0a5fb7;
  letter-spacing: -0.01em;
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-actions button {
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid var(--quick-edit-border-strong);
  background: #ffffff;
  color: #111827;
  padding: 10px 14px;
  font-size: 1.02rem;
  font-weight: 650;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-actions button:hover {
  border-color: #8ca1ba;
  box-shadow: 0 18px 26px -24px rgba(15, 23, 42, 0.72);
  transform: translateY(-1px);
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-actions .main-preview-quick-edit-save {
  border-color: #0b73dd;
  background: linear-gradient(180deg, #1c8ef4 0%, #0b77e5 100%);
  color: #f8fafc;
  box-shadow: 0 20px 30px -20px rgba(11, 119, 229, 0.9);
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-actions .main-preview-quick-edit-save:hover {
  border-color: #0a69cb;
  box-shadow: 0 24px 34px -20px rgba(11, 119, 229, 0.98);
}

body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit.readonly .main-preview-quick-edit-actions .main-preview-quick-edit-save {
  border-color: #c3cfdd;
  background: #e8edf4;
  color: #64748b;
  box-shadow: none;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit {
    width: calc(100vw - 14px);
    max-height: min(84vh, 680px);
    border-radius: 18px;
    padding: 14px;
    gap: 10px;
  }

  body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-title {
    font-size: 1.22rem;
  }

  body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-close {
    width: 38px;
    height: 38px;
    font-size: 27px;
  }

  body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-actions button {
    min-height: 44px;
    font-size: 0.98rem;
  }

  body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-row-tools {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-row-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-row-actions button {
    width: 100%;
    justify-content: center;
  }

  body[data-page="app"][data-app-mode="main"] .main-preview-quick-edit-field textarea {
    min-height: 132px;
  }
}

@keyframes mainPreviewQuickEditReveal {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

body[data-page="app"][data-app-mode="main"] .main-inline-prompt {
  position: fixed;
  inset: 0;
  z-index: 420;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(2, 6, 23, 0.62);
  backdrop-filter: blur(2px);
}

body[data-page="app"][data-app-mode="main"] .main-inline-prompt.show {
  display: flex;
}

body[data-page="app"][data-app-mode="main"] .main-inline-prompt-card {
  width: min(740px, 100%);
  max-height: min(88vh, 840px);
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #0f1724;
  padding: 14px;
  display: grid;
  gap: 10px;
  box-shadow: 0 28px 48px -34px rgba(2, 6, 23, 0.96);
  overflow: auto;
}

body[data-page="app"][data-app-mode="main"] .main-inline-form-card {
  border-color: rgba(125, 211, 252, 0.34);
  box-shadow: 0 30px 54px -36px rgba(14, 165, 233, 0.5);
}

body[data-page="app"][data-app-mode="main"] .main-inline-prompt-card h3 {
  font-size: 16px;
  color: #f1f5f9;
}

body[data-page="app"][data-app-mode="main"] .main-inline-prompt-card label {
  display: grid;
  gap: 6px;
}

body[data-page="app"][data-app-mode="main"] .main-inline-form-note {
  margin: 0;
  color: #a5b4cf;
  font-size: 13px;
  line-height: 1.4;
}

body[data-page="app"][data-app-mode="main"] .main-inline-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body[data-page="app"][data-app-mode="main"] .main-inline-form-wide {
  grid-column: 1 / -1;
}

body[data-page="app"][data-app-mode="main"] .main-inline-prompt-label {
  font-size: 12px;
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="main"] .main-inline-prompt-card input,
body[data-page="app"][data-app-mode="main"] .main-inline-prompt-card select,
body[data-page="app"][data-app-mode="main"] .main-inline-prompt-card textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.38);
  background: #0b1321;
  color: #e2e8f0;
  padding: 10px 12px;
  font-size: 14px;
}

body[data-page="app"][data-app-mode="main"] .main-inline-prompt-card input:focus,
body[data-page="app"][data-app-mode="main"] .main-inline-prompt-card select:focus,
body[data-page="app"][data-app-mode="main"] .main-inline-prompt-card textarea:focus {
  outline: none;
  border-color: rgba(56, 189, 248, 0.85);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
}

body[data-page="app"][data-app-mode="main"] .main-inline-prompt-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

body[data-page="app"][data-app-mode="main"] .main-customer-wizard-shell {
  display: grid;
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(125, 211, 252, 0.16);
  background:
    radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(8, 15, 28, 0.9), rgba(10, 17, 31, 0.94));
}

body[data-page="app"][data-app-mode="main"] .main-customer-wizard-mode {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page="app"][data-app-mode="main"] .main-customer-wizard-tab {
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.72);
  color: #cfe5f3;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

body[data-page="app"][data-app-mode="main"] .main-customer-wizard-tab.is-active {
  border-color: rgba(45, 212, 191, 0.42);
  background: rgba(13, 148, 136, 0.22);
  color: #eefcff;
}

body[data-page="app"][data-app-mode="main"] .main-customer-wizard-tab:hover {
  transform: translateY(-1px);
}

body[data-page="app"][data-app-mode="main"] .main-customer-wizard-panel {
  display: grid;
  gap: 12px;
}

body[data-page="app"][data-app-mode="main"] .main-customer-wizard-selected,
body[data-page="app"][data-app-mode="main"] .main-customer-wizard-results {
  display: grid;
  gap: 8px;
}

body[data-page="app"][data-app-mode="main"] .main-customer-wizard-selected-card,
body[data-page="app"][data-app-mode="main"] .main-customer-wizard-empty {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(8, 15, 28, 0.56);
  color: #b9cfe1;
  font-size: 13px;
  line-height: 1.55;
}

body[data-page="app"][data-app-mode="main"] .main-customer-wizard-selected-card strong,
body[data-page="app"][data-app-mode="main"] .main-customer-wizard-result strong {
  color: #f8fafc;
  font-size: 14px;
}

body[data-page="app"][data-app-mode="main"] .main-customer-wizard-selected-card p,
body[data-page="app"][data-app-mode="main"] .main-customer-wizard-selected-card small {
  margin: 0;
}

body[data-page="app"][data-app-mode="main"] .main-customer-wizard-selected-card small,
body[data-page="app"][data-app-mode="main"] .main-customer-wizard-result small {
  color: #8fb2c9;
}

body[data-page="app"][data-app-mode="main"] .main-customer-wizard-result {
  width: 100%;
  text-align: left;
  padding: 13px 14px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(8, 15, 28, 0.56);
  display: grid;
  gap: 4px;
  color: #cfe1ee;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

body[data-page="app"][data-app-mode="main"] .main-customer-wizard-result:hover,
body[data-page="app"][data-app-mode="main"] .main-customer-wizard-result.is-active {
  transform: translateY(-1px);
  border-color: rgba(45, 212, 191, 0.34);
  background: rgba(13, 148, 136, 0.14);
}

body[data-page="app"][data-app-mode="main"] .project-home-item {
  position: relative;
}

body[data-page="app"][data-app-mode="main"] .project-home-item-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body[data-page="app"][data-app-mode="main"] .project-home-item-frame {
  padding-right: 58px;
}

body[data-page="app"][data-app-mode="main"] .project-home-item-open {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  cursor: pointer;
  font: inherit;
  touch-action: manipulation;
  text-decoration: none;
}

body[data-page="app"][data-app-mode="main"] .project-home-item-detail {
  display: -webkit-box;
  margin-top: 4px;
  color: rgba(191, 219, 254, 0.82);
  font-size: 11px;
  line-height: 1.45;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

body[data-page="app"][data-app-mode="main"] .project-home-item-open > p {
  min-height: 5.8em;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body[data-page="app"][data-app-mode="main"] .project-home-item-menu-shell {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
}

body[data-page="app"][data-app-mode="main"] .project-home-item-menu-toggle {
  appearance: none;
  -webkit-appearance: none;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(103, 232, 249, 0.28);
  background:
    linear-gradient(160deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.9)),
    radial-gradient(circle at 30% 30%, rgba(34, 211, 238, 0.16), transparent 36%);
  color: #dbeafe;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 28px -22px rgba(2, 132, 199, 0.72);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

body[data-page="app"][data-app-mode="main"] .project-home-item-menu-toggle:hover,
body[data-page="app"][data-app-mode="main"] .project-home-item-menu-shell.is-open .project-home-item-menu-toggle {
  border-color: rgba(45, 212, 191, 0.58);
  background:
    linear-gradient(160deg, rgba(15, 23, 42, 0.96), rgba(6, 78, 59, 0.48)),
    radial-gradient(circle at 30% 30%, rgba(34, 211, 238, 0.2), transparent 38%);
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 22px 34px -22px rgba(20, 184, 166, 0.82);
}

body[data-page="app"][data-app-mode="main"] .project-home-item-menu-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

body[data-page="app"][data-app-mode="main"] .project-home-item-menu-dots span {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 10px rgba(125, 211, 252, 0.42);
}

body[data-page="app"][data-app-mode="main"] .project-home-item-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid rgba(103, 232, 249, 0.2);
  background:
    linear-gradient(160deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.96)),
    radial-gradient(circle at 0% 0%, rgba(34, 211, 238, 0.08), transparent 34%);
  box-shadow: 0 24px 48px -30px rgba(2, 132, 199, 0.72);
  display: none;
  gap: 6px;
}

body[data-page="app"][data-app-mode="main"] .project-home-item-menu.is-open {
  display: grid;
}

body[data-page="app"][data-app-mode="main"] .project-home-item-menu button {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  background: rgba(8, 15, 28, 0.62);
  color: #e2e8f0;
  padding: 10px 12px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

body[data-page="app"][data-app-mode="main"] .project-home-item-menu button:hover {
  border-color: rgba(45, 212, 191, 0.34);
  background: rgba(15, 118, 110, 0.2);
  transform: translateY(-1px);
}

body[data-page="app"][data-app-mode="main"] .project-home-hover-note {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 460;
  max-width: min(340px, calc(100vw - 32px));
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(103, 232, 249, 0.24);
  background:
    linear-gradient(160deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.94)),
    radial-gradient(circle at 14% 14%, rgba(34, 211, 238, 0.1), transparent 34%);
  box-shadow: 0 24px 46px -28px rgba(14, 165, 233, 0.66);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  transition: opacity 0.14s ease, transform 0.14s ease;
}

body[data-page="app"][data-app-mode="main"] .project-home-hover-note::after {
  content: "";
  position: absolute;
  top: -7px;
  left: 18px;
  width: 14px;
  height: 14px;
  border-top: 1px solid rgba(103, 232, 249, 0.24);
  border-left: 1px solid rgba(103, 232, 249, 0.24);
  background: rgba(15, 23, 42, 0.96);
  transform: rotate(45deg);
}

body[data-page="app"][data-app-mode="main"] .project-home-hover-note[data-visible="1"] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

body[data-page="app"][data-app-mode="main"] .project-home-hover-note-kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: 8px;
  color: #8ce8ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="main"] .project-home-hover-note-text {
  margin: 0;
  color: #e2e8f0;
  font-size: 13px;
  line-height: 1.55;
}

body[data-page="app"][data-app-mode="main"] .project-home-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
}

body[data-page="app"][data-app-mode="main"] .project-home-pagination-btn,
body[data-page="app"][data-app-mode="main"] .project-home-pagination-page {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(103, 232, 249, 0.18);
  background: rgba(8, 15, 28, 0.62);
  color: #dbeafe;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

body[data-page="app"][data-app-mode="main"] .project-home-pagination-btn {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="main"] .project-home-pagination-page {
  min-width: 40px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
}

body[data-page="app"][data-app-mode="main"] .project-home-pagination-btn:hover,
body[data-page="app"][data-app-mode="main"] .project-home-pagination-page:hover {
  border-color: rgba(45, 212, 191, 0.4);
  background: rgba(15, 118, 110, 0.2);
  transform: translateY(-1px);
}

body[data-page="app"][data-app-mode="main"] .project-home-pagination-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
}

body[data-page="app"][data-app-mode="main"] .project-home-pagination-pages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 auto;
}

body[data-page="app"][data-app-mode="main"] .project-home-pagination-page.active {
  border-color: rgba(45, 212, 191, 0.46);
  background: linear-gradient(135deg, rgba(17, 94, 89, 0.92), rgba(6, 78, 59, 0.88));
  color: #f0fdfa;
  box-shadow: 0 14px 26px -20px rgba(45, 212, 191, 0.9);
}

body[data-page="app"][data-app-mode="main"] .project-home-pagination-info {
  color: rgba(191, 219, 254, 0.84);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="main"] .project-desktop-last-opened {
  margin: 0;
  color: #94f3e4;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

body[data-page="app"][data-app-mode="main"] .project-desktop-search-row {
  display: flex;
  align-items: stretch;
}

body[data-page="app"][data-app-mode="main"] .project-home-search-wrap {
  width: 100%;
  display: grid;
  gap: 8px;
}

body[data-page="app"][data-app-mode="main"] .project-home-search-wrap span {
  color: #8ce8ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="main"] .project-home-search-wrap input {
  width: 100%;
  min-height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(103, 232, 249, 0.18);
  background: rgba(8, 15, 28, 0.68);
  color: #e2e8f0;
  padding: 0 16px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

body[data-page="app"][data-app-mode="main"] .project-home-search-wrap input:focus {
  border-color: rgba(45, 212, 191, 0.42);
  box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.1);
  background: rgba(9, 18, 31, 0.82);
}

body[data-page="app"][data-app-mode="main"] .main-rename-dialog {
  background:
    radial-gradient(circle at 20% 18%, rgba(34, 211, 238, 0.2), transparent 28%),
    radial-gradient(circle at 78% 22%, rgba(14, 165, 233, 0.18), transparent 24%),
    radial-gradient(circle at 50% 84%, rgba(16, 185, 129, 0.16), transparent 34%),
    rgba(2, 6, 23, 0.74);
  backdrop-filter: blur(10px);
}

body[data-page="app"][data-app-mode="main"] .main-rename-dialog-card {
  position: relative;
  width: min(560px, 100%);
  padding: 24px;
  gap: 16px;
  border-radius: 28px;
  border: 1px solid rgba(103, 232, 249, 0.26);
  background:
    linear-gradient(155deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.94)),
    radial-gradient(circle at 0% 0%, rgba(34, 211, 238, 0.12), transparent 30%);
  box-shadow:
    0 42px 90px -46px rgba(2, 132, 199, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

body[data-page="app"][data-app-mode="main"] .main-rename-dialog-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(130deg, rgba(34, 211, 238, 0.12), transparent 34%),
    linear-gradient(320deg, rgba(16, 185, 129, 0.1), transparent 36%);
  pointer-events: none;
}

body[data-page="app"][data-app-mode="main"] .main-rename-dialog-orb {
  position: absolute;
  top: -56px;
  right: -14px;
  width: 176px;
  height: 176px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 35%, rgba(207, 250, 254, 0.98), rgba(34, 211, 238, 0.88) 34%, rgba(14, 116, 144, 0.18) 72%, transparent 100%);
  filter: blur(8px);
  opacity: 0.92;
  pointer-events: none;
}

body[data-page="app"][data-app-mode="main"] .main-rename-dialog-head,
body[data-page="app"][data-app-mode="main"] .main-rename-dialog-field,
body[data-page="app"][data-app-mode="main"] .main-rename-dialog-card .main-inline-prompt-actions {
  position: relative;
  z-index: 1;
}

body[data-page="app"][data-app-mode="main"] .main-rename-dialog-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(103, 232, 249, 0.28);
  background: rgba(6, 78, 110, 0.28);
  color: #a5f3fc;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="main"] .main-rename-dialog-card h3 {
  margin: 10px 0 0;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 0.98;
  color: #f8fafc;
}

body[data-page="app"][data-app-mode="main"] .main-rename-dialog-note {
  max-width: 360px;
  color: #bfd5eb;
  font-size: 14px;
  line-height: 1.55;
}

body[data-page="app"][data-app-mode="main"] .main-rename-dialog-field {
  gap: 10px;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(103, 232, 249, 0.16);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.68), rgba(15, 23, 42, 0.36)),
    radial-gradient(circle at 10% 10%, rgba(34, 211, 238, 0.08), transparent 30%);
}

body[data-page="app"][data-app-mode="main"] .main-rename-dialog-field .main-inline-prompt-label {
  color: #8ce8ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="main"] .main-rename-dialog-input {
  min-height: 62px;
  border-radius: 18px;
  border: 1px solid rgba(125, 211, 252, 0.22);
  background:
    linear-gradient(180deg, rgba(2, 6, 23, 0.84), rgba(8, 15, 28, 0.92));
  color: #f8fafc;
  padding: 16px 18px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-page="app"][data-app-mode="main"] .main-rename-dialog-input::placeholder {
  color: rgba(148, 163, 184, 0.72);
  font-weight: 500;
}

body[data-page="app"][data-app-mode="main"] .main-rename-dialog-input:focus {
  border-color: rgba(103, 232, 249, 0.86);
  box-shadow:
    0 0 0 4px rgba(34, 211, 238, 0.14),
    0 0 44px rgba(34, 211, 238, 0.14);
}

body[data-page="app"][data-app-mode="main"] .main-rename-dialog-card .main-inline-prompt-actions {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}

body[data-page="app"][data-app-mode="main"] .main-rename-dialog-card .main-inline-prompt-actions::before {
  content: "Enter speichert direkt";
  color: #8fb4cf;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

body[data-page="app"][data-app-mode="main"] .main-rename-dialog-card .main-inline-prompt-actions .btn {
  min-width: 138px;
  min-height: 48px;
  border-radius: 16px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="main"] .main-rename-dialog-card .main-inline-prompt-actions .btn.ghost {
  border-color: rgba(148, 163, 184, 0.26);
  background: rgba(15, 23, 42, 0.52);
}

body[data-page="app"][data-app-mode="main"] .main-rename-dialog-card .main-inline-prompt-actions .btn.primary {
  border: 1px solid rgba(103, 232, 249, 0.22);
  background: linear-gradient(135deg, #0ea5e9, #14b8a6);
  color: #f8fafc;
  box-shadow: 0 18px 28px -18px rgba(14, 165, 233, 0.9);
}

body[data-page="app"][data-app-mode="main"] .main-rename-dialog-card .main-inline-prompt-actions .btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 24px 34px -18px rgba(14, 165, 233, 0.82);
}

body[data-page="app"][data-app-mode="main"] .main-send-dialog {
  background:
    radial-gradient(circle at 18% 18%, rgba(34, 211, 238, 0.18), transparent 26%),
    radial-gradient(circle at 82% 22%, rgba(16, 185, 129, 0.16), transparent 24%),
    rgba(2, 6, 23, 0.68);
  backdrop-filter: blur(8px);
  z-index: 426;
}

body[data-page="app"][data-app-mode="main"] .main-send-dialog-card {
  position: relative;
  width: min(560px, 100%);
  padding: 22px;
  gap: 16px;
  border-radius: 26px;
  border: 1px solid rgba(103, 232, 249, 0.24);
  background:
    linear-gradient(155deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.96)),
    radial-gradient(circle at 0% 0%, rgba(34, 211, 238, 0.1), transparent 32%);
  box-shadow:
    0 40px 90px -50px rgba(8, 145, 178, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

body[data-page="app"][data-app-mode="main"] .main-send-dialog-head {
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="main"] .main-send-dialog-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 32px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(45, 212, 191, 0.28);
  background: rgba(13, 148, 136, 0.16);
  color: #a7f3d0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="main"] .main-send-dialog-card h3 {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 0.98;
  color: #f8fafc;
}

body[data-page="app"][data-app-mode="main"] .main-send-dialog-summary {
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="main"] .main-send-dialog-item {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(125, 211, 252, 0.16);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.68), rgba(15, 23, 42, 0.4)),
    radial-gradient(circle at 0% 0%, rgba(34, 211, 238, 0.08), transparent 28%);
}

body[data-page="app"][data-app-mode="main"] .main-send-dialog-item span {
  color: #8ce8ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="main"] .main-send-dialog-item strong {
  color: #f8fafc;
  font-size: 15px;
  line-height: 1.35;
  word-break: break-word;
}

body[data-page="app"][data-app-mode="main"] .main-send-dialog-warning,
body[data-page="app"][data-app-mode="main"] .main-send-dialog-status {
  margin: 0;
  padding: 12px 14px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.45;
}

body[data-page="app"][data-app-mode="main"] .main-send-dialog-warning {
  border: 1px solid rgba(251, 191, 36, 0.24);
  background: rgba(120, 53, 15, 0.22);
  color: #fde68a;
}

body[data-page="app"][data-app-mode="main"] .main-send-dialog-status[data-state="error"] {
  border: 1px solid rgba(248, 113, 113, 0.26);
  background: rgba(127, 29, 29, 0.24);
  color: #fecaca;
}

body[data-page="app"][data-app-mode="main"] .main-send-dialog-status[data-state="idle"] {
  border: 1px solid rgba(125, 211, 252, 0.18);
  background: rgba(15, 23, 42, 0.42);
  color: #cbd5f5;
}

body[data-page="app"][data-app-mode="main"] .main-send-dialog-actions {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

body[data-page="app"][data-app-mode="main"] .main-send-dialog-actions::before {
  content: "Nach dem Versand ist das Dokument gesperrt";
  color: #8fb4cf;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

body[data-page="app"][data-app-mode="main"] .main-send-dialog-actions .btn {
  min-width: 148px;
  min-height: 48px;
  border-radius: 16px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="main"] .main-send-dialog-actions .btn.primary {
  border: 1px solid rgba(103, 232, 249, 0.24);
  background: linear-gradient(135deg, #0ea5e9, #14b8a6);
  color: #f8fafc;
  box-shadow: 0 18px 30px -18px rgba(14, 165, 233, 0.82);
}

body[data-page="app"][data-app-mode="main"] .main-send-dialog-actions .btn.primary:hover {
  transform: translateY(-1px);
}

body[data-page="app"][data-app-mode="main"] .main-send-toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 428;
  width: min(420px, calc(100vw - 32px));
  border-radius: 18px;
  border: 1px solid rgba(45, 212, 191, 0.34);
  background:
    linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(6, 78, 59, 0.92)),
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.14), transparent 34%);
  box-shadow: 0 34px 54px -32px rgba(20, 184, 166, 0.76);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  pointer-events: none;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

body[data-page="app"][data-app-mode="main"] .main-send-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

body[data-page="app"][data-app-mode="main"] .main-send-toast[hidden] {
  display: none !important;
}

body[data-page="app"][data-app-mode="main"] .main-send-toast-icon {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.3), rgba(14, 165, 233, 0.26));
  color: #ccfbf1;
  font-size: 20px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body[data-page="app"][data-app-mode="main"] .main-send-toast-copy {
  display: grid;
  gap: 4px;
}

body[data-page="app"][data-app-mode="main"] .main-send-toast-copy strong {
  color: #f8fafc;
  font-size: 15px;
  line-height: 1.2;
}

body[data-page="app"][data-app-mode="main"] .main-send-toast-copy span {
  color: #d1fae5;
  font-size: 13px;
  line-height: 1.4;
}

body[data-page="app"][data-app-mode="main"] .main-document-sheet {
  position: fixed;
  inset: 0;
  z-index: 430;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  overflow-x: hidden;
}

body[data-page="app"][data-app-mode="main"] .main-document-sheet.show {
  display: flex;
}

body[data-page="app"][data-app-mode="main"] .main-document-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.68);
  backdrop-filter: blur(2px);
}

body[data-page="app"][data-app-mode="main"] .main-document-sheet-card {
  position: relative;
  width: min(980px, 100%);
  min-height: 360px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: #0b1321;
  box-shadow: 0 34px 64px -42px rgba(2, 6, 23, 0.98);
  padding: 14px;
  display: grid;
  gap: 10px;
  grid-template-rows: auto auto auto;
}

body[data-page="app"][data-app-mode="main"] .main-document-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

body[data-page="app"][data-app-mode="main"] .main-document-sheet-head-copy {
  display: grid;
  gap: 3px;
}

body[data-page="app"][data-app-mode="main"] .main-document-sheet-head-copy h3 {
  font-size: 17px;
  color: #f1f5f9;
}

body[data-page="app"][data-app-mode="main"] .main-document-sheet-head-copy p {
  font-size: 12px;
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="main"] .main-document-sheet-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

body[data-page="app"][data-app-mode="main"] .main-document-sheet-close {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  width: 34px;
  height: 34px;
  font-size: 22px;
  line-height: 1;
  background: #0f1724;
  color: #cbd5e1;
  cursor: pointer;
}

body[data-page="app"][data-app-mode="main"] .main-document-sheet-close:hover {
  border-color: rgba(125, 211, 252, 0.7);
  color: #f8fafc;
}

body[data-page="app"][data-app-mode="main"] .main-document-sheet-status {
  font-size: 11px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  padding: 4px 10px;
  color: #94a3b8;
  background: #0f1724;
}

body[data-page="app"][data-app-mode="main"] .main-document-sheet-status[data-state="busy"] {
  color: #bae6fd;
  border-color: rgba(56, 189, 248, 0.46);
}

body[data-page="app"][data-app-mode="main"] .main-document-sheet-status[data-state="saved"] {
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.38);
}

body[data-page="app"][data-app-mode="main"] .main-document-sheet-status[data-state="error"] {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.45);
}

body[data-page="app"][data-app-mode="main"] .main-document-sheet-status[data-state="dirty"] {
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.46);
}

body[data-page="app"][data-app-mode="main"] .main-document-sheet-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

body[data-page="app"][data-app-mode="main"] .main-document-sheet-editor,
body[data-page="app"][data-app-mode="main"] .main-document-sheet-view {
  margin: 0;
  width: 100%;
  min-height: 260px;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: #0f1724;
  color: #e2e8f0;
  padding: 10px;
  font-size: 13px;
  line-height: 1.45;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}

body[data-page="app"][data-app-mode="main"] .main-document-sheet-editor {
  resize: none;
}

body[data-page="app"][data-app-mode="main"] .main-finance-card {
  display: none !important;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: #111827;
  padding: 10px;
  gap: 10px;
}

body[data-page="app"][data-app-mode="main"] .main-finance-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body[data-page="app"][data-app-mode="main"] .main-finance-card h3 {
  font-size: 14px;
}

body[data-page="app"][data-app-mode="main"] .main-finance-status {
  font-size: 11px;
  border-radius: 999px;
  padding: 3px 8px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: #94a3b8;
  background: #0f1724;
}

body[data-page="app"][data-app-mode="main"] .main-finance-status[data-state="dirty"] {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.5);
}

body[data-page="app"][data-app-mode="main"] .main-finance-status[data-state="saved"] {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.42);
}

body[data-page="app"][data-app-mode="main"] .main-finance-section {
  display: grid;
  gap: 8px;
}

body[data-page="app"][data-app-mode="main"] .main-finance-section h4 {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 600;
}

body[data-page="app"][data-app-mode="main"] .main-finance-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-page="app"][data-app-mode="main"] .main-finance-grid label,
body[data-page="app"][data-app-mode="main"] .main-agb-field {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="main"] .main-finance-grid input,
body[data-page="app"][data-app-mode="main"] .main-agb-field textarea {
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: #0f1724;
  color: #e2e8f0;
  padding: 8px 10px;
  font-size: 12px;
}

body[data-page="app"][data-app-mode="main"] .main-agb-field textarea {
  min-height: 88px;
  resize: vertical;
  line-height: 1.4;
}

body[data-page="app"][data-app-mode="main"] .main-finance-actions {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 1100px) {
  body[data-page="app"][data-app-mode="main"] .main-layout {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="main"] .main-chat-shell {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="main"] .main-chat-sidebar {
    grid-template-rows: none;
    grid-auto-rows: min-content;
  }

  body[data-page="app"][data-app-mode="main"] .main-sidebar-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="app"][data-app-mode="main"] .main-sidebar-dual {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="main"] .main-preview-actions {
    justify-content: flex-start;
  }

  body[data-page="app"][data-app-mode="main"] .main-chat-messages,
  body[data-page="app"][data-app-mode="main"] .main-template-preview-card {
    max-height: 360px;
  }

  body[data-page="app"][data-app-mode="main"] .main-finance-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="main"] .main-doc-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="main"] .main-catalog-preview {
    max-height: 180px;
  }

  body[data-page="app"][data-app-mode="main"] .main-ai-suggestions-head {
    flex-wrap: wrap;
  }

  body[data-page="app"][data-app-mode="main"] .main-ai-suggestions-head .btn {
    width: 100%;
    justify-content: center;
  }

  body[data-page="app"][data-app-mode="main"] .main-ai-suggestions-list {
    max-height: 160px;
  }

  body[data-page="app"][data-app-mode="main"] .main-inline-form-grid {
    grid-template-columns: 1fr;
  }
}

body[data-page="app"][data-app-mode="main"] .main-onboarding {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 23, 0.76);
  backdrop-filter: blur(4px);
  padding: 16px;
}

body[data-page="app"][data-app-mode="main"] .main-onboarding.show {
  display: flex;
}

body[data-page="app"][data-app-mode="main"] .main-onboarding-card {
  width: min(640px, 100%);
  border-radius: 12px;
  border: 1px solid rgba(125, 211, 252, 0.32);
  background: #0f1724;
  box-shadow: 0 24px 70px -42px rgba(56, 189, 248, 0.7);
  padding: 18px;
  display: grid;
  gap: 12px;
}

body[data-page="app"][data-app-mode="main"] .main-onboarding-card h2 {
  font-size: 21px;
}

body[data-page="app"][data-app-mode="main"] .main-onboarding-card p {
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.45;
}

body[data-page="app"][data-app-mode="main"] .main-data-drop {
  min-height: 130px;
  border-radius: 10px;
  border: 2px dashed rgba(125, 211, 252, 0.38);
  background: rgba(30, 41, 59, 0.42);
  color: #e2e8f0;
  font-weight: 600;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 14px;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

body[data-page="app"][data-app-mode="main"] .main-data-drop span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #7dd3fc;
}

body[data-page="app"][data-app-mode="main"] .main-data-drop.drag-over {
  border-color: rgba(56, 189, 248, 0.95);
  background: rgba(2, 132, 199, 0.25);
  transform: scale(1.01);
}

body[data-page="app"][data-app-mode="main"] .main-onboarding-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page="app"][data-app-mode="main"] .main-data-status {
  min-height: 20px;
  color: #7dd3fc;
  font-size: 12px;
}

/* Login hub */
body[data-page="app"][data-app-mode="hub"] {
  background: #0b1220;
  color: #e2e8f0;
  min-height: 100vh;
}

body[data-page="app"][data-app-mode="hub"] .hub-shell {
  min-height: 100vh;
  padding: 18px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #0b1220 0%, #121c30 48%, #0f1626 100%);
}

body[data-page="app"][data-app-mode="hub"] .hub-backdrop {
  position: absolute;
  border-radius: 999px;
  filter: blur(60px);
  opacity: 0.4;
  pointer-events: none;
}

body[data-page="app"][data-app-mode="hub"] .hub-backdrop-a {
  width: 480px;
  height: 480px;
  left: -120px;
  top: -140px;
  background: rgba(14, 165, 233, 0.45);
  animation: hubFloatA 9s ease-in-out infinite;
}

body[data-page="app"][data-app-mode="hub"] .hub-backdrop-b {
  width: 520px;
  height: 520px;
  right: -130px;
  bottom: -180px;
  background: rgba(59, 130, 246, 0.45);
  animation: hubFloatB 10s ease-in-out infinite;
}

body[data-page="app"][data-app-mode="hub"] .hub-topbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.66);
  backdrop-filter: blur(8px);
  margin-bottom: 14px;
}

body[data-page="app"][data-app-mode="hub"] .hub-eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #93c5fd;
}

body[data-page="app"][data-app-mode="hub"] .hub-topbar h1 {
  margin-top: 4px;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.1;
}

body[data-page="app"][data-app-mode="hub"] .hub-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #bfdbfe;
}

body[data-page="app"][data-app-mode="hub"] .hub-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
}

body[data-page="app"][data-app-mode="hub"] .hub-card {
  position: relative;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 16px;
  padding: 18px;
  text-align: left;
  color: #e2e8f0;
  background: rgba(15, 23, 42, 0.66);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transform: translateY(18px) scale(0.985);
  opacity: 0;
  transition: transform 0.34s ease, border-color 0.25s ease, box-shadow 0.28s ease, background 0.28s ease;
}

body[data-page="app"][data-app-mode="hub"] .hub-shell.is-ready .hub-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

body[data-page="app"][data-app-mode="hub"] .hub-shell.is-ready .hub-card-builder {
  transition-delay: 0.11s;
}

body[data-page="app"][data-app-mode="hub"] .hub-shell.is-ready .hub-card-generator {
  transition-delay: 0.18s;
}

body[data-page="app"][data-app-mode="hub"] .hub-shell.is-ready .hub-card-receivables {
  transition-delay: 0.14s;
}

body[data-page="app"][data-app-mode="hub"] .hub-shell.is-ready .hub-card-meeting {
  transition-delay: 0.22s;
}

body[data-page="app"][data-app-mode="hub"] .hub-card:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: rgba(125, 211, 252, 0.65);
  box-shadow: 0 24px 48px -34px rgba(14, 165, 233, 0.85);
}

body[data-page="app"][data-app-mode="hub"] .hub-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.24s ease;
}

body[data-page="app"][data-app-mode="hub"] .hub-card:hover::after {
  opacity: 1;
}

body[data-page="app"][data-app-mode="hub"] .hub-card-invoice::after {
  background: radial-gradient(circle at 20% 20%, rgba(56, 189, 248, 0.22), transparent 55%);
}

body[data-page="app"][data-app-mode="hub"] .hub-card-builder::after {
  background: radial-gradient(circle at 80% 20%, rgba(96, 165, 250, 0.24), transparent 55%);
}

body[data-page="app"][data-app-mode="hub"] .hub-card-generator::after {
  background: radial-gradient(circle at 30% 80%, rgba(34, 197, 94, 0.24), transparent 55%);
}

body[data-page="app"][data-app-mode="hub"] .hub-card-receivables::after {
  background: radial-gradient(circle at 18% 82%, rgba(245, 158, 11, 0.22), transparent 58%);
}

body[data-page="app"][data-app-mode="hub"] .hub-card-meeting::after {
  background: radial-gradient(circle at 78% 22%, rgba(45, 212, 191, 0.24), transparent 56%);
}

body[data-page="app"][data-app-mode="hub"] .hub-card-tag {
  display: inline-flex;
  border-radius: 999px;
  border: 1px solid rgba(125, 211, 252, 0.4);
  color: #7dd3fc;
  padding: 4px 9px;
  font-size: 11px;
  margin-bottom: 10px;
}

body[data-page="app"][data-app-mode="hub"] .hub-card h2 {
  font-size: clamp(21px, 2.7vw, 34px);
  line-height: 1.08;
}

body[data-page="app"][data-app-mode="hub"] .hub-card p {
  margin-top: 10px;
  color: #cbd5e1;
  font-size: 14px;
  max-width: 38ch;
}

body[data-page="app"][data-app-mode="hub"] .hub-card-list {
  margin: 10px 0 0;
  padding: 0 0 0 16px;
  display: grid;
  gap: 4px;
  color: #bfdbfe;
  font-size: 12px;
}

body[data-page="app"][data-app-mode="hub"] .hub-card.is-locked {
  opacity: 0.64;
  cursor: not-allowed;
}

body[data-page="app"][data-app-mode="hub"] .hub-card.is-locked:hover {
  transform: translateY(0) scale(1);
  border-color: rgba(148, 163, 184, 0.28);
  box-shadow: none;
}

body[data-page="app"][data-app-mode="hub"] .hub-card.is-locked::after {
  display: none;
}

body[data-page="app"][data-app-mode="hub"] .hub-card-cta {
  display: inline-flex;
  margin-top: 16px;
  font-size: 13px;
  color: #7dd3fc;
}

/* Besprechung mit AI */
body[data-page="app"][data-app-mode="meeting"] {
  min-height: 100vh;
  background: #0f172a;
  color: #e2e8f0;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-shell {
  min-height: 100vh;
  padding: 14px;
  background: radial-gradient(circle at 14% 0%, rgba(20, 184, 166, 0.16), transparent 46%),
    radial-gradient(circle at 86% 12%, rgba(14, 165, 233, 0.13), transparent 40%), #0f172a;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.85);
}

body[data-page="app"][data-app-mode="meeting"] .meeting-topbar h1 {
  margin-top: 4px;
  font-size: 21px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-top-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-layout {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
}

body[data-page="app"][data-app-mode="meeting"] .meeting-sidebar,
body[data-page="app"][data-app-mode="meeting"] .meeting-pane {
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.86);
  padding: 12px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-sidebar {
  display: grid;
  gap: 12px;
  align-content: start;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-sidebar-head h2 {
  font-size: 18px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-sidebar-head p {
  margin-top: 6px;
  color: #94a3b8;
  font-size: 13px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-mode-list {
  display: grid;
  gap: 8px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-mode-btn {
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: #111827;
  color: #cbd5e1;
  min-height: 42px;
  padding: 0 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-mode-btn:hover {
  border-color: rgba(45, 212, 191, 0.58);
  transform: translateY(-1px);
}

body[data-page="app"][data-app-mode="meeting"] .meeting-mode-btn.active {
  border-color: rgba(45, 212, 191, 0.8);
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.45) 0%, rgba(13, 148, 136, 0.33) 100%);
  color: #ecfeff;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-suggestions-wrap h3 {
  font-size: 13px;
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-suggestions {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-suggestion {
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(17, 24, 39, 0.86);
  color: #cbd5e1;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-suggestion:hover {
  border-color: rgba(14, 165, 233, 0.62);
  color: #e0f2fe;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-pane {
  display: grid;
  gap: 10px;
  min-height: 0;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-head {
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.82);
  padding: 10px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-head-copy {
  display: grid;
  gap: 3px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-head-copy strong {
  font-size: 14px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-head-copy span {
  font-size: 12px;
  color: #93c5fd;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-messages {
  min-height: 430px;
  max-height: calc(100vh - 230px);
  overflow: auto;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(2, 6, 23, 0.75);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-message {
  max-width: min(88%, 1020px);
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  padding: 12px 14px;
  display: grid;
  gap: 5px;
  animation: none;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-message.user {
  align-self: flex-end;
  background: linear-gradient(135deg, #0b84ff 0%, #2ea2ff 100%);
  color: #f0f8ff;
  border-color: rgba(125, 211, 252, 0.4);
}

body[data-page="app"][data-app-mode="meeting"] .meeting-message.bot {
  align-self: flex-start;
  background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
  color: #ecfeff;
  border-color: rgba(45, 212, 191, 0.45);
}

body[data-page="app"][data-app-mode="meeting"] .meeting-message.typing {
  min-width: 220px;
}

body[data-page="app"][data-app-mode="meeting"] .typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

body[data-page="app"][data-app-mode="meeting"] .typing-dots i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #ccfbf1;
  opacity: 0.35;
  transform: translateY(0);
  animation: botTyping 1.2s ease-in-out infinite;
}

body[data-page="app"][data-app-mode="meeting"] .typing-dots i:nth-child(2) {
  animation-delay: 0.15s;
}

body[data-page="app"][data-app-mode="meeting"] .typing-dots i:nth-child(3) {
  animation-delay: 0.3s;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-message-text {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.42;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-message-meta {
  font-size: 11px;
  color: rgba(224, 242, 254, 0.92);
}

body[data-page="app"][data-app-mode="meeting"] .meeting-form {
  display: flex;
  gap: 8px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-form input {
  flex: 1;
  min-height: 44px;
  border-radius: 9px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(15, 23, 42, 0.86);
  color: #e2e8f0;
  padding: 0 12px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-form input:focus {
  outline: 0;
  border-color: rgba(45, 212, 191, 0.78);
}

@keyframes meetingMessageIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Offene Rechnungen */
body[data-page="app"][data-app-mode="receivables"] {
  min-height: 100vh;
  background: #121821;
  color: #e2e8f0;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-shell {
  min-height: 100vh;
  padding: 14px;
  background: radial-gradient(circle at 18% 0%, rgba(56, 189, 248, 0.12), transparent 50%), #121821;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #1d2634;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-topbar h1 {
  margin-top: 4px;
  font-size: 20px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-top-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-layout {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
}

body[data-page="app"][data-app-mode="receivables"] .receivables-pane {
  min-height: 0;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: #1b2533;
  padding: 12px;
  display: grid;
  gap: 10px;
  align-content: start;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-stats {
  display: grid;
  gap: 8px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-stat {
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: #111827;
  padding: 10px;
  display: grid;
  gap: 4px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-stat span {
  font-size: 12px;
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-stat strong {
  font-size: 18px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-list {
  min-height: 0;
  max-height: calc(100vh - 190px);
  overflow: auto;
  display: grid;
  gap: 8px;
  align-content: start;
}

body[data-page="app"][data-app-mode="receivables"] .receivable-item {
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: #111827;
  padding: 10px;
  display: grid;
  gap: 8px;
}

body[data-page="app"][data-app-mode="receivables"] .receivable-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

body[data-page="app"][data-app-mode="receivables"] .receivable-item strong {
  font-size: 14px;
}

body[data-page="app"][data-app-mode="receivables"] .receivable-item p {
  font-size: 12px;
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="receivables"] .receivable-item-meta {
  font-size: 13px;
}

body[data-page="app"][data-app-mode="receivables"] .receivable-item-actions {
  display: flex;
  gap: 8px;
}

body[data-page="app"][data-app-mode="receivables"] .receivable-empty {
  border-radius: 8px;
  border: 1px dashed rgba(148, 163, 184, 0.24);
  color: #94a3b8;
  font-size: 12px;
  padding: 12px;
}

@media (max-width: 980px) {
  body[data-page="app"][data-app-mode="receivables"] .receivables-layout {
    grid-template-columns: 1fr;
  }
}

body[data-page="app"][data-app-mode="receivables"] .receivables-shell {
  display: grid;
  gap: 14px;
  padding: 16px;
  background:
    radial-gradient(circle at 10% 0%, rgba(45, 212, 191, 0.12), transparent 30%),
    radial-gradient(circle at 88% 8%, rgba(56, 189, 248, 0.12), transparent 30%),
    linear-gradient(180deg, #0b1220 0%, #08101d 100%);
}

body[data-page="app"][data-app-mode="receivables"] .receivables-hero {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-radius: 24px;
  border: 1px solid rgba(94, 234, 212, 0.24);
  background:
    radial-gradient(circle at top left, rgba(45, 212, 191, 0.16), transparent 42%),
    linear-gradient(135deg, rgba(17, 24, 39, 0.94) 0%, rgba(15, 23, 42, 0.92) 100%);
  box-shadow: 0 28px 60px -42px rgba(8, 145, 178, 0.96);
}

body[data-page="app"][data-app-mode="receivables"] .receivables-hero-copy {
  display: grid;
  gap: 10px;
  max-width: 760px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-hero-kicker {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #67e8f9;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-hero h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.02;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-hero p:last-child {
  margin: 0;
  max-width: 720px;
  color: rgba(226, 232, 240, 0.78);
  font-size: 15px;
  line-height: 1.65;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  max-width: 360px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-hero-badge {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(125, 211, 252, 0.22);
  background: rgba(8, 15, 28, 0.66);
  color: #d1fae5;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-layout {
  position: relative;
  z-index: 1;
  min-height: 0;
  height: calc(100dvh - 250px);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(290px, 340px) minmax(340px, 1.05fr) minmax(360px, 0.95fr);
  align-items: stretch;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-pane {
  min-height: 0;
  overflow: hidden;
  border-radius: 24px;
  padding: 16px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-summary,
body[data-page="app"][data-app-mode="receivables"] .receivables-main,
body[data-page="app"][data-app-mode="receivables"] .receivables-ai-pane {
  display: grid;
  align-content: start;
  gap: 14px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-summary {
  grid-template-rows: auto auto minmax(0, 1fr);
}

body[data-page="app"][data-app-mode="receivables"] .receivables-main {
  grid-template-rows: auto minmax(0, 1fr);
}

body[data-page="app"][data-app-mode="receivables"] .receivables-ai-pane {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-pane-head {
  align-items: flex-start;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-pane-head p,
body[data-page="app"][data-app-mode="receivables"] .receivables-pane-subtitle {
  margin: 4px 0 0;
  color: rgba(148, 163, 184, 0.86);
  font-size: 13px;
  line-height: 1.5;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-pane-note {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(94, 234, 212, 0.22);
  background: rgba(15, 118, 110, 0.16);
  color: #99f6e4;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-stat {
  min-height: 112px;
  border-radius: 18px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(8, 15, 28, 0.95) 0%, rgba(15, 23, 42, 0.86) 100%);
}

body[data-page="app"][data-app-mode="receivables"] .receivables-stat span {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7dd3fc;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-stat strong {
  font-size: 24px;
  line-height: 1.08;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-upload-card,
body[data-page="app"][data-app-mode="receivables"] .receivables-tip-card {
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(8, 15, 28, 0.62);
  padding: 14px;
  display: grid;
  gap: 12px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-upload-card {
  min-height: 0;
  grid-template-rows: auto auto minmax(0, 1fr);
}

body[data-page="app"][data-app-mode="receivables"] .receivables-tip-card {
  align-content: start;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-tip-card h3,
body[data-page="app"][data-app-mode="receivables"] .receivables-upload-card h3 {
  margin: 0;
  font-size: 16px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-tip-card p,
body[data-page="app"][data-app-mode="receivables"] .receivables-upload-card p {
  margin: 0;
  color: rgba(226, 232, 240, 0.78);
  font-size: 13px;
  line-height: 1.55;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-block-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-upload-status {
  margin: 0;
  font-size: 13px;
  color: #7dd3fc;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-upload-list,
body[data-page="app"][data-app-mode="receivables"] .receivables-list,
body[data-page="app"][data-app-mode="receivables"] .receivables-messages {
  min-height: 0;
  overflow: visible;
  display: grid;
  gap: 10px;
  align-content: start;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-upload-item,
body[data-page="app"][data-app-mode="receivables"] .receivable-item {
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background:
    linear-gradient(180deg, rgba(8, 15, 28, 0.96) 0%, rgba(15, 23, 42, 0.9) 100%);
  padding: 14px;
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-upload-item-head,
body[data-page="app"][data-app-mode="receivables"] .receivable-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-upload-item strong,
body[data-page="app"][data-app-mode="receivables"] .receivable-item strong {
  font-size: 16px;
  line-height: 1.2;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-upload-meta,
body[data-page="app"][data-app-mode="receivables"] .receivable-item-meta,
body[data-page="app"][data-app-mode="receivables"] .receivable-item-note,
body[data-page="app"][data-app-mode="receivables"] .receivable-item-meta-line {
  font-size: 13px;
  color: rgba(226, 232, 240, 0.82);
  line-height: 1.6;
}

body[data-page="app"][data-app-mode="receivables"] .receivable-item-customer-line {
  margin: 2px 0 0;
  color: #142132;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

body[data-page="app"][data-app-mode="receivables"] .receivable-item-customer-meta {
  margin-top: 4px;
  color: #4b5563;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.45;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-upload-summary {
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(191, 219, 254, 0.86);
  border-radius: 16px;
  border: 1px solid rgba(56, 189, 248, 0.12);
  background: rgba(14, 116, 144, 0.08);
  padding: 12px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-upload-item-actions,
body[data-page="app"][data-app-mode="receivables"] .receivable-item-actions,
body[data-page="app"][data-app-mode="receivables"] .receivables-main-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-search {
  width: min(100%, 320px);
}

body[data-page="app"][data-app-mode="receivables"] .receivables-search input {
  width: 100%;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-messages {
  padding-right: 4px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-message {
  max-width: 92%;
  border-radius: 24px;
  padding: 14px 16px;
  display: grid;
  gap: 8px;
  line-height: 1.6;
  box-shadow: 0 24px 48px -34px rgba(8, 145, 178, 0.88);
}

body[data-page="app"][data-app-mode="receivables"] .receivables-message.user {
  margin-left: auto;
  border: 1px solid rgba(56, 189, 248, 0.34);
  background: linear-gradient(135deg, rgba(11, 132, 255, 0.94) 0%, rgba(34, 211, 238, 0.9) 100%);
}

body[data-page="app"][data-app-mode="receivables"] .receivables-message.bot {
  border: 1px solid rgba(45, 212, 191, 0.28);
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.9) 0%, rgba(20, 184, 166, 0.84) 100%);
}

body[data-page="app"][data-app-mode="receivables"] .receivables-message.system {
  border: 1px dashed rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.88);
  color: rgba(226, 232, 240, 0.9);
}

body[data-page="app"][data-app-mode="receivables"] .receivables-message-text {
  white-space: pre-wrap;
  font-size: 15px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-message-meta {
  font-size: 12px;
  color: rgba(226, 232, 240, 0.72);
}

body[data-page="app"][data-app-mode="receivables"] .receivables-ai-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-ai-suggestion {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(94, 234, 212, 0.2);
  background: rgba(8, 15, 28, 0.72);
  color: #d1fae5;
  font: inherit;
  cursor: pointer;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-form textarea {
  min-height: 104px;
  resize: vertical;
}

body[data-page="app"][data-app-mode="receivables"] .receivable-item p,
body[data-page="app"][data-app-mode="receivables"] .receivable-item-meta-line,
body[data-page="app"][data-app-mode="receivables"] .receivables-empty,
body[data-page="app"][data-app-mode="receivables"] .receivable-empty {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(148, 163, 184, 0.88);
}

body[data-page="app"][data-app-mode="receivables"] .receivables-empty,
body[data-page="app"][data-app-mode="receivables"] .receivable-empty {
  border-radius: 18px;
  border: 1px dashed rgba(148, 163, 184, 0.22);
  background: rgba(8, 15, 28, 0.5);
  padding: 14px;
}

@media (max-width: 1460px) {
  body[data-page="app"][data-app-mode="receivables"] .receivables-layout {
    grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
  }

  body[data-page="app"][data-app-mode="receivables"] .receivables-ai-pane {
    grid-column: 1 / -1;
    min-height: 420px;
  }
}

@media (max-width: 980px) {
  body[data-page="app"][data-app-mode="receivables"] .receivables-shell {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  body[data-page="app"][data-app-mode="receivables"] .receivables-hero {
    flex-direction: column;
  }

  body[data-page="app"][data-app-mode="receivables"] .receivables-hero-badges {
    justify-content: flex-start;
    max-width: none;
  }

  body[data-page="app"][data-app-mode="receivables"] .receivables-layout {
    height: auto;
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="receivables"] .receivables-summary,
  body[data-page="app"][data-app-mode="receivables"] .receivables-main,
  body[data-page="app"][data-app-mode="receivables"] .receivables-ai-pane {
    min-height: 0;
  }

  body[data-page="app"][data-app-mode="receivables"] .receivables-form {
    grid-template-columns: 1fr;
  }
}

@keyframes hubFloatA {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(30px, 24px) scale(1.08);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes hubFloatB {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-34px, -28px) scale(1.1);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

@media (max-width: 980px) {
  body[data-page="app"][data-app-mode="meeting"] .meeting-layout {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="meeting"] .meeting-messages {
    max-height: min(70vh, 620px);
  }

  body[data-page="app"][data-app-mode="hub"] .hub-grid {
    grid-template-columns: 1fr;
  }
}

/* Finora Visual Boost (Global Override) */
:root {
  --fx-cyan: #22d3ee;
  --fx-sky: #38bdf8;
  --fx-teal: #14b8a6;
  --fx-indigo: #6366f1;
  --fx-glass: rgba(15, 23, 42, 0.64);
  --fx-glass-border: rgba(125, 211, 252, 0.26);
}

html {
  scroll-behavior: smooth;
}

html,
body,
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(34, 211, 238, 0.75) rgba(15, 23, 42, 0.56);
}

*::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

*::-webkit-scrollbar-track {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.72) 0%, rgba(2, 6, 23, 0.66) 100%);
}

*::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 2px solid rgba(15, 23, 42, 0.78);
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.92) 0%, rgba(14, 165, 233, 0.88) 100%);
  box-shadow: 0 0 0 1px rgba(186, 230, 253, 0.18), 0 0 18px -8px rgba(34, 211, 238, 0.95);
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(45, 212, 191, 0.95) 0%, rgba(56, 189, 248, 0.95) 100%);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

body[data-page="app"][data-app-mode="main"] .main-shell,
body[data-page="app"][data-app-mode="hub"] .hub-shell,
body[data-page="app"][data-app-mode="meeting"] .meeting-shell,
body[data-page="app"][data-app-mode="receivables"] .receivables-shell {
  background-size: 200% 200%;
  animation: finoraBgShift 15s ease-in-out infinite;
}

body[data-page="app"] .btn {
  border-color: rgba(125, 211, 252, 0.32);
  box-shadow: 0 10px 26px -20px rgba(56, 189, 248, 0.95);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.24s ease, background 0.24s ease;
}

body[data-page="app"] .btn:hover {
  transform: translateY(-1px);
  border-color: rgba(45, 212, 191, 0.66);
  box-shadow: 0 16px 34px -22px rgba(34, 211, 238, 0.96);
}

body[data-page="app"] .btn.primary {
  background: linear-gradient(135deg, #0b84ff 0%, #2ea2ff 44%, #22d3ee 100%);
  border-color: rgba(125, 211, 252, 0.56);
}

body[data-page="app"] .btn.ghost {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.82) 0%, rgba(15, 23, 42, 0.82) 100%);
}

body[data-page="app"] .main-pane,
body[data-page="app"] .meeting-pane,
body[data-page="app"] .meeting-sidebar,
body[data-page="app"] .receivables-pane,
body[data-page="app"][data-app-mode="hub"] .hub-card,
body[data-page="app"][data-app-mode="builder"] .builder-column {
  border-color: var(--fx-glass-border);
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.92) 0%, rgba(2, 6, 23, 0.88) 100%);
  box-shadow: 0 24px 50px -38px rgba(15, 118, 110, 0.95), inset 0 1px 0 rgba(186, 230, 253, 0.08);
  backdrop-filter: blur(6px);
}

body[data-page="app"] .main-topbar,
body[data-page="app"] .receivables-topbar,
body[data-page="app"] .meeting-topbar,
body[data-page="app"][data-app-mode="builder"] .app-topbar {
  border-color: rgba(125, 211, 252, 0.3);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.92) 100%);
  box-shadow: 0 18px 38px -34px rgba(56, 189, 248, 0.95);
}

body[data-page="app"] input,
body[data-page="app"] select,
body[data-page="app"] textarea {
  border-color: rgba(148, 163, 184, 0.34);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(2, 6, 23, 0.9) 100%);
  box-shadow: inset 0 1px 0 rgba(186, 230, 253, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

body[data-page="app"] input:focus,
body[data-page="app"] select:focus,
body[data-page="app"] textarea:focus {
  border-color: rgba(45, 212, 191, 0.9);
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.2), inset 0 1px 0 rgba(186, 230, 253, 0.1);
}

body[data-page="app"] .main-message.user,
body[data-page="app"] .meeting-message.user {
  box-shadow: 0 20px 36px -25px rgba(56, 189, 248, 0.95);
}

body[data-page="app"] .main-message.bot,
body[data-page="app"] .meeting-message.bot {
  box-shadow: 0 20px 36px -25px rgba(20, 184, 166, 0.96);
}

body[data-page="app"][data-app-mode="hub"] .hub-card:hover {
  box-shadow: 0 28px 54px -32px rgba(20, 184, 166, 0.95), 0 0 0 1px rgba(45, 212, 191, 0.2);
}

@keyframes finoraBgShift {
  0% {
    background-position: 0% 30%;
  }
  50% {
    background-position: 100% 70%;
  }
  100% {
    background-position: 0% 30%;
  }
}

/* Finora Visual Boost v2 (Stronger + Side Scroll Fix) */
body[data-page="app"] {
  overflow: hidden;
}

body[data-page="app"][data-app-mode="main"] .main-shell,
body[data-page="app"][data-app-mode="hub"] .hub-shell,
body[data-page="app"][data-app-mode="meeting"] .meeting-shell,
body[data-page="app"][data-app-mode="receivables"] .receivables-shell {
  height: 100dvh;
  overflow: hidden;
  position: relative;
}

body[data-page="app"][data-app-mode="main"] {
  overflow-y: auto;
  overflow-x: hidden;
}

body[data-page="app"][data-app-mode="main"] .main-shell {
  height: auto;
  min-height: 100dvh;
}

body[data-page="app"][data-app-mode="main"] .main-shell::before,
body[data-page="app"][data-app-mode="meeting"] .meeting-shell::before,
body[data-page="app"][data-app-mode="receivables"] .receivables-shell::before,
body[data-page="app"][data-app-mode="hub"] .hub-shell::before {
  content: "";
  position: absolute;
  inset: -15%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(45, 212, 191, 0.14), transparent 34%),
    radial-gradient(circle at 82% 25%, rgba(56, 189, 248, 0.16), transparent 36%),
    radial-gradient(circle at 50% 80%, rgba(99, 102, 241, 0.1), transparent 42%);
  filter: blur(8px) saturate(115%);
  animation: finoraNebula 14s ease-in-out infinite alternate;
}

body[data-page="app"][data-app-mode="main"] .main-topbar,
body[data-page="app"][data-app-mode="main"] .main-layout,
body[data-page="app"][data-app-mode="meeting"] .meeting-topbar,
body[data-page="app"][data-app-mode="meeting"] .meeting-layout,
body[data-page="app"][data-app-mode="receivables"] .receivables-topbar,
body[data-page="app"][data-app-mode="receivables"] .receivables-layout,
body[data-page="app"][data-app-mode="hub"] .hub-topbar,
body[data-page="app"][data-app-mode="hub"] .hub-grid {
  position: relative;
  z-index: 1;
}

body[data-page="app"] .main-template-list,
body[data-page="app"] .main-folder-list,
body[data-page="app"] .main-thread-list,
body[data-page="app"] .main-document-list,
body[data-page="app"] .main-chat-messages,
body[data-page="app"] .meeting-messages,
body[data-page="app"] .receivables-list,
body[data-page="app"] .canvas-drop,
body[data-page="app"] .property-panel,
body[data-page="app"] .element-explorer-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(34, 211, 238, 0.92) rgba(2, 6, 23, 0.68);
}

body[data-page="app"] .main-template-list::-webkit-scrollbar,
body[data-page="app"] .main-folder-list::-webkit-scrollbar,
body[data-page="app"] .main-thread-list::-webkit-scrollbar,
body[data-page="app"] .main-document-list::-webkit-scrollbar,
body[data-page="app"] .main-chat-messages::-webkit-scrollbar,
body[data-page="app"] .meeting-messages::-webkit-scrollbar,
body[data-page="app"] .receivables-list::-webkit-scrollbar,
body[data-page="app"] .canvas-drop::-webkit-scrollbar,
body[data-page="app"] .property-panel::-webkit-scrollbar,
body[data-page="app"] .element-explorer-list::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

body[data-page="app"] .main-template-list::-webkit-scrollbar-track,
body[data-page="app"] .main-folder-list::-webkit-scrollbar-track,
body[data-page="app"] .main-thread-list::-webkit-scrollbar-track,
body[data-page="app"] .main-document-list::-webkit-scrollbar-track,
body[data-page="app"] .main-chat-messages::-webkit-scrollbar-track,
body[data-page="app"] .meeting-messages::-webkit-scrollbar-track,
body[data-page="app"] .receivables-list::-webkit-scrollbar-track,
body[data-page="app"] .canvas-drop::-webkit-scrollbar-track,
body[data-page="app"] .property-panel::-webkit-scrollbar-track,
body[data-page="app"] .element-explorer-list::-webkit-scrollbar-track {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.84) 0%, rgba(2, 6, 23, 0.76) 100%);
  border-radius: 999px;
}

body[data-page="app"] .main-template-list::-webkit-scrollbar-thumb,
body[data-page="app"] .main-folder-list::-webkit-scrollbar-thumb,
body[data-page="app"] .main-thread-list::-webkit-scrollbar-thumb,
body[data-page="app"] .main-document-list::-webkit-scrollbar-thumb,
body[data-page="app"] .main-chat-messages::-webkit-scrollbar-thumb,
body[data-page="app"] .meeting-messages::-webkit-scrollbar-thumb,
body[data-page="app"] .receivables-list::-webkit-scrollbar-thumb,
body[data-page="app"] .canvas-drop::-webkit-scrollbar-thumb,
body[data-page="app"] .property-panel::-webkit-scrollbar-thumb,
body[data-page="app"] .element-explorer-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 2px solid rgba(15, 23, 42, 0.84);
  background: linear-gradient(180deg, rgba(45, 212, 191, 0.96) 0%, rgba(56, 189, 248, 0.95) 100%);
  box-shadow: 0 0 24px -8px rgba(45, 212, 191, 0.98);
}

body[data-page="app"] .btn {
  position: relative;
  overflow: hidden;
  border-width: 1px;
  border-color: rgba(125, 211, 252, 0.45);
}

body[data-page="app"] .btn::after {
  content: none;
}

body[data-page="app"] .btn:hover::after {
  opacity: 0;
  animation: none;
}

body[data-page="app"] .btn.primary {
  background-size: auto;
  box-shadow: 0 22px 38px -22px rgba(14, 165, 233, 0.98);
  animation: none;
}

body[data-page="app"] .btn.primary:hover {
  box-shadow: 0 28px 46px -22px rgba(34, 211, 238, 0.98);
}

body[data-page="app"] input,
body[data-page="app"] select,
body[data-page="app"] textarea {
  border-radius: 12px;
  border-color: rgba(148, 163, 184, 0.42);
  box-shadow: inset 0 1px 0 rgba(186, 230, 253, 0.13), 0 8px 24px -24px rgba(56, 189, 248, 0.75);
}

body[data-page="app"] input:hover,
body[data-page="app"] select:hover,
body[data-page="app"] textarea:hover {
  border-color: rgba(125, 211, 252, 0.64);
}

body[data-page="app"][data-app-mode="main"] .main-message.user,
body[data-page="app"][data-app-mode="meeting"] .meeting-message.user {
  background-size: auto;
  animation: none;
}

body[data-page="app"][data-app-mode="main"] .main-message.bot,
body[data-page="app"][data-app-mode="meeting"] .meeting-message.bot {
  background-size: auto;
  animation: none;
  border-color: rgba(45, 212, 191, 0.58);
}

body[data-page="app"][data-app-mode="hub"] .hub-card,
body[data-page="app"][data-app-mode="main"] .main-pane,
body[data-page="app"][data-app-mode="meeting"] .meeting-pane,
body[data-page="app"][data-app-mode="meeting"] .meeting-sidebar,
body[data-page="app"][data-app-mode="receivables"] .receivables-pane {
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

body[data-page="app"][data-app-mode="hub"] .hub-card:hover,
body[data-page="app"][data-app-mode="main"] .main-pane:hover,
body[data-page="app"][data-app-mode="meeting"] .meeting-pane:hover,
body[data-page="app"][data-app-mode="meeting"] .meeting-sidebar:hover,
body[data-page="app"][data-app-mode="receivables"] .receivables-pane:hover {
  transform: translateY(-1px);
  border-color: rgba(45, 212, 191, 0.5);
  box-shadow: 0 30px 56px -36px rgba(34, 211, 238, 0.95), inset 0 1px 0 rgba(186, 230, 253, 0.13);
}

body[data-page="app"][data-app-mode="meeting"] .meeting-shell {
  padding: 0;
  background: #111111;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-shell::before {
  display: none;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-layout {
  min-height: 100dvh;
  gap: 0;
  grid-template-columns: minmax(292px, 332px) minmax(0, 1fr);
}

body[data-page="app"][data-app-mode="meeting"] .meeting-sidebar {
  min-height: 100dvh;
  border: 0;
  border-right: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 0;
  background:
    radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(20, 24, 34, 0.98), rgba(12, 15, 22, 0.98));
  padding: 10px 14px 14px;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04);
}

body[data-page="app"][data-app-mode="meeting"] .meeting-sidebar:hover,
body[data-page="app"][data-app-mode="meeting"] .meeting-pane:hover {
  transform: none;
  box-shadow: none;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-sidebar-top {
  display: grid;
  gap: 12px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-primary-action {
  min-height: 52px;
  border-radius: 18px;
  border: 1px solid rgba(125, 211, 252, 0.28);
  background:
    radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.26), transparent 52%),
    linear-gradient(135deg, rgba(31, 41, 55, 0.9), rgba(18, 24, 38, 0.96));
  color: #f8fbff;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  padding: 0 18px;
  cursor: pointer;
  box-shadow: 0 18px 30px -24px rgba(14, 165, 233, 0.55);
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-primary-action:hover {
  transform: translateY(-1px);
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.28), transparent 52%),
    linear-gradient(135deg, rgba(24, 36, 58, 0.95), rgba(13, 19, 30, 0.98));
  border-color: rgba(103, 232, 249, 0.42);
  box-shadow: 0 24px 38px -26px rgba(45, 212, 191, 0.48);
}

body[data-page="app"][data-app-mode="meeting"] .meeting-search-shell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  padding: 0 14px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-search-icon {
  color: #b4b4b4;
  font-size: 18px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-search-shell input {
  min-height: 44px;
  border: 0;
  box-shadow: none;
  background: transparent;
  color: #f2f2f2;
  padding: 0;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-search-shell input:hover,
body[data-page="app"][data-app-mode="meeting"] .meeting-search-shell input:focus {
  border: 0;
  outline: 0;
  box-shadow: none;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-shortcuts {
  display: grid;
  gap: 4px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-shortcut-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 0 8px;
  border-radius: 14px;
  color: #f0f0f0;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-shortcut-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-shortcut-icon {
  width: 30px;
  color: #cfcfcf;
  font-size: 18px;
  text-align: center;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-chat-library {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  margin-top: 2px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-sidebar-label {
  margin: 0;
  padding: 0 6px;
  color: #9d9d9d;
  font-size: 14px;
  font-weight: 600;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-chat-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 8px;
  padding-right: 4px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-chat-item {
  display: grid;
  gap: 6px;
  text-align: left;
  padding: 16px 16px 14px;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: #f2f2f2;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  animation: meetingChatSlideIn 0.32s ease;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-chat-item:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}

body[data-page="app"][data-app-mode="meeting"] .meeting-chat-item.active {
  background:
    radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.14), transparent 54%),
    rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.18);
}

body[data-page="app"][data-app-mode="meeting"] .meeting-chat-item.meeting-chat-starter {
  border: 1px solid rgba(56, 189, 248, 0.24);
  background:
    radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.12), transparent 48%),
    rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-page="app"][data-app-mode="meeting"] .meeting-chat-item.meeting-chat-starter:hover {
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.18), transparent 48%),
    rgba(255, 255, 255, 0.06);
}

body[data-page="app"][data-app-mode="meeting"] .meeting-chat-item-title {
  font-size: 16px;
  font-weight: 500;
  color: #f7f7f7;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-chat-item-meta,
body[data-page="app"][data-app-mode="meeting"] .meeting-chat-item-preview,
body[data-page="app"][data-app-mode="meeting"] .meeting-chat-empty {
  color: #a9a9a9;
  font-size: 12px;
  line-height: 1.35;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-chat-item-preview {
  color: #cdcdcd;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-sidebar-foot {
  margin-top: auto;
  padding-top: 12px;
  display: grid;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-page="app"][data-app-mode="meeting"] .meeting-profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 6px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-profile-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff9a8a 0%, #ffb3a6 100%);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-profile-copy {
  display: grid;
  gap: 3px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-profile-copy strong {
  color: #ffffff;
  font-size: 15px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-profile-copy span {
  color: #b6b6b6;
  font-size: 13px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-pane {
  min-height: 100dvh;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.11), transparent 32%),
    radial-gradient(circle at 100% 0%, rgba(45, 212, 191, 0.09), transparent 30%),
    linear-gradient(180deg, #0d1118, #0b0f15 46%, #090d13 100%);
  padding: 14px 22px 18px;
  gap: 12px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-head-copy {
  display: grid;
  gap: 4px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-head-copy strong {
  font-size: 22px;
  color: #ffffff;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-head-copy span {
  font-size: 14px;
  color: #a8b3c7;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-shell[data-meeting-stage="chat"] .meeting-mode-list,
body[data-page="app"][data-app-mode="meeting"] .meeting-shell[data-meeting-stage="chat"] .meeting-suggestions-wrap {
  display: none;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-shell[data-meeting-stage="chat"] .meeting-pane {
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  padding: 0 clamp(16px, 2vw, 24px) calc(16px + env(safe-area-inset-bottom, 0px));
  gap: 0;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-shell[data-meeting-stage="chat"] .meeting-head {
  position: sticky;
  top: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin: 0 calc(clamp(16px, 2vw, 24px) * -1);
  padding: 12px clamp(16px, 3vw, 34px) 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  background:
    linear-gradient(180deg, rgba(8, 12, 18, 0.96), rgba(8, 12, 18, 0.86) 70%, rgba(8, 12, 18, 0));
  backdrop-filter: blur(18px);
}

body[data-page="app"][data-app-mode="meeting"] .meeting-shell[data-meeting-stage="chat"] .meeting-head-copy strong {
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-shell[data-meeting-stage="chat"] .meeting-head-copy span {
  color: #8ea0bc;
  font-size: 13px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-shell[data-meeting-stage="composer"] .meeting-pane {
  justify-content: center;
  padding: 20px 30px 28px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-shell[data-meeting-stage="composer"] .meeting-head {
  justify-content: center;
  text-align: center;
  margin-top: clamp(8px, 4vh, 48px);
}

body[data-page="app"][data-app-mode="meeting"] .meeting-shell[data-meeting-stage="composer"] .meeting-head-copy {
  display: grid;
  gap: 14px;
  justify-items: center;
  max-width: 840px;
  margin: 0 auto;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-shell[data-meeting-stage="composer"] .meeting-head-copy strong {
  font-size: clamp(44px, 7vw, 74px);
  line-height: 0.96;
  letter-spacing: -0.05em;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-shell[data-meeting-stage="composer"] .meeting-head-copy span {
  max-width: 760px;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.55;
  color: #dbe5f4;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-shell[data-meeting-stage="composer"] .meeting-head-actions {
  display: none;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-head-actions .btn.primary {
  min-height: 42px;
  padding-inline: 16px;
  border-radius: 999px;
  border-color: rgba(103, 232, 249, 0.32);
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.28), transparent 52%),
    linear-gradient(135deg, rgba(30, 64, 175, 0.88), rgba(37, 99, 235, 0.92));
  box-shadow: 0 18px 30px -24px rgba(59, 130, 246, 0.55);
}

body[data-page="app"][data-app-mode="meeting"] .meeting-shell[data-meeting-stage="chat"] .meeting-head-actions a.btn.ghost {
  display: none;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-shell[data-meeting-stage="chat"] .meeting-head-actions .btn.ghost,
body[data-page="app"][data-app-mode="meeting"] .meeting-shell[data-meeting-stage="chat"] .meeting-head-actions .btn.primary {
  min-height: 40px;
  padding-inline: 14px;
  border-radius: 999px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-mode-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-shell[data-meeting-stage="composer"] .meeting-mode-list {
  justify-content: center;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-mode-btn {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #e8edf7;
  font-size: 14px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-mode-btn.active {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-suggestions-wrap {
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-mail-card {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 100% 0%, rgba(45, 212, 191, 0.1), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
}

body[data-page="app"][data-app-mode="meeting"] .meeting-mail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-mail-head strong {
  display: block;
  color: #f8fafc;
  font-size: 16px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-mail-head span,
body[data-page="app"][data-app-mode="meeting"] .meeting-mail-meta,
body[data-page="app"][data-app-mode="meeting"] .meeting-mail-draft {
  margin: 0;
  color: #9fb0c9;
  font-size: 13px;
  line-height: 1.55;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-mail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-mail-list {
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-mail-empty {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px dashed rgba(148, 163, 184, 0.18);
  color: #90a1bb;
  background: rgba(8, 10, 16, 0.36);
}

body[data-page="app"][data-app-mode="meeting"] .meeting-mail-item {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 10, 16, 0.46);
  color: #f8fafc;
  text-align: left;
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-mail-item:hover,
body[data-page="app"][data-app-mode="meeting"] .meeting-mail-item.is-active {
  transform: translateY(-1px);
  border-color: rgba(103, 232, 249, 0.28);
  background: rgba(15, 23, 42, 0.76);
  box-shadow: 0 20px 34px -28px rgba(15, 23, 42, 0.9);
}

body[data-page="app"][data-app-mode="meeting"] .meeting-mail-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-mail-item-head strong {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-mail-item-head span {
  color: #67e8f9;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-mail-item-copy {
  display: grid;
  gap: 4px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-mail-item-copy strong {
  color: #eef4ff;
  font-size: 15px;
  line-height: 1.35;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-mail-item-copy small,
body[data-page="app"][data-app-mode="meeting"] .meeting-mail-item-copy p {
  margin: 0;
  color: #9fb0c9;
  line-height: 1.5;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-shell[data-meeting-stage="composer"] .meeting-suggestions-wrap {
  width: min(100%, 980px);
  margin: 0 auto;
  gap: 16px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-suggestions-wrap h3 {
  margin: 0;
  color: #98a6bf;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-shell[data-meeting-stage="composer"] .meeting-suggestions-wrap h3 {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.16em;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-suggestions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-prompt-card {
  min-height: 152px;
  display: grid;
  align-content: start;
  gap: 12px;
  text-align: left;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.12), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.028) 100%);
  color: #f4f7fb;
  padding: 16px;
  cursor: pointer;
  transition: opacity 0.9s ease, transform 0.9s ease, filter 0.9s ease, border-color 0.2s ease, background 0.2s ease;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-shell[data-meeting-stage="composer"] .meeting-prompt-card {
  min-height: 220px;
  padding: 24px;
  gap: 18px;
  border-radius: 28px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-prompt-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.22);
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.16), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.04) 100%);
}

body[data-page="app"][data-app-mode="meeting"] .meeting-suggestions.is-swapping .meeting-prompt-card {
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  filter: blur(6px);
}

body[data-page="app"][data-app-mode="meeting"] .meeting-prompt-emoji {
  font-size: 30px;
  line-height: 1;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-shell[data-meeting-stage="composer"] .meeting-prompt-emoji {
  font-size: 42px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-prompt-text {
  font-size: 14px;
  line-height: 1.45;
  color: #eef4ff;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-shell[data-meeting-stage="composer"] .meeting-prompt-text {
  font-size: 17px;
  line-height: 1.55;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-messages {
  min-height: 0;
  max-height: calc(100dvh - 270px);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 10, 16, 0.84);
  padding: 18px;
  gap: 12px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-shell[data-meeting-stage="chat"] .meeting-messages {
  min-height: 0;
  max-height: none;
  height: 100%;
  width: min(100%, 1120px);
  justify-self: center;
  display: grid;
  align-content: start;
  gap: 16px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 18px clamp(8px, 2vw, 18px) 144px;
  scroll-behavior: auto;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-shell[data-meeting-stage="composer"] .meeting-messages {
  display: none;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-message {
  width: fit-content;
  max-width: min(72ch, 78%);
  border-radius: 26px;
  padding: 16px 18px 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: 0 24px 44px -34px rgba(2, 6, 23, 0.9);
  backdrop-filter: blur(16px);
}

body[data-page="app"][data-app-mode="meeting"] .meeting-message.user {
  justify-self: end;
  border-top-right-radius: 12px;
  background:
    radial-gradient(circle at 0% 0%, rgba(125, 211, 252, 0.34), transparent 54%),
    linear-gradient(135deg, rgba(37, 99, 235, 0.96), rgba(59, 130, 246, 0.94));
}

body[data-page="app"][data-app-mode="meeting"] .meeting-message.bot {
  justify-self: start;
  border-top-left-radius: 12px;
  background:
    radial-gradient(circle at 0% 0%, rgba(125, 211, 252, 0.16), transparent 54%),
    linear-gradient(135deg, rgba(15, 118, 110, 0.96), rgba(45, 212, 191, 0.9));
}

body[data-page="app"][data-app-mode="meeting"] .meeting-message-text {
  font-size: 15.5px;
  line-height: 1.66;
  color: #f7fbff;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-message.user .meeting-message-meta {
  text-align: right;
  color: rgba(255, 255, 255, 0.78);
}

body[data-page="app"][data-app-mode="meeting"] .meeting-message.bot .meeting-message-meta {
  color: rgba(236, 253, 245, 0.84);
}

body[data-page="app"][data-app-mode="meeting"] .meeting-message-text.is-typewriting::after {
  content: "";
  display: inline-block;
  width: 0.52ch;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.12em;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.72;
  animation: meetingTypingCaret 0.86s steps(1, end) infinite;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-form.has-voice-input {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-form.has-tts-output {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-form.has-voice-input.has-tts-output {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-shell[data-meeting-stage="chat"] .meeting-form {
  position: sticky;
  bottom: 0;
  z-index: 5;
  justify-self: center;
  width: min(100%, 1040px);
  margin: 0 auto;
  padding: 18px 0 calc(18px + env(safe-area-inset-bottom, 0px));
  background:
    linear-gradient(180deg, rgba(15, 17, 21, 0) 0%, rgba(15, 17, 21, 0.78) 22%, rgba(15, 17, 21, 0.96) 58%, #0f1115 100%);
  backdrop-filter: blur(16px);
}

body[data-page="app"][data-app-mode="meeting"] .meeting-shell[data-meeting-stage="composer"] .meeting-form {
  width: min(100%, 860px);
  margin: 4px auto 0;
  gap: 12px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-form input {
  min-height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
  padding: 0 14px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-shell[data-meeting-stage="chat"] .meeting-form input {
  min-height: 52px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.07);
  padding-inline: 18px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-shell[data-meeting-stage="composer"] .meeting-form input {
  min-height: 52px;
  font-size: 16px;
  padding: 0 16px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-form input:focus {
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
}

@keyframes meetingChatSlideIn {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes meetingTypingCaret {
  0%,
  46% {
    opacity: 0;
  }
  47%,
  100% {
    opacity: 0.72;
  }
}

@media (max-width: 980px) {
  body[data-page="app"][data-app-mode="meeting"] .meeting-layout {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="meeting"] .meeting-sidebar,
  body[data-page="app"][data-app-mode="meeting"] .meeting-pane {
    min-height: auto;
  }

  body[data-page="app"][data-app-mode="meeting"] .meeting-sidebar {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  body[data-page="app"][data-app-mode="meeting"] .meeting-chat-list {
    max-height: 280px;
  }

  body[data-page="app"][data-app-mode="meeting"] .meeting-suggestions {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="meeting"] .meeting-messages {
    max-height: 52dvh;
  }

  body[data-page="app"][data-app-mode="meeting"] .meeting-shell[data-meeting-stage="chat"] .meeting-head {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  body[data-page="app"][data-app-mode="meeting"] .meeting-shell[data-meeting-stage="chat"] .meeting-head-actions {
    justify-content: flex-start;
  }

  body[data-page="app"][data-app-mode="meeting"] .meeting-shell[data-meeting-stage="chat"] .meeting-message {
    max-width: min(88%, 72ch);
  }
}

@keyframes finoraNebula {
  0% {
    transform: translate3d(-1%, -1%, 0) scale(1);
  }
  100% {
    transform: translate3d(1%, 1%, 0) scale(1.04);
  }
}

body[data-page="app"][data-app-mode="receivables"] {
  overflow-y: visible !important;
  overflow-x: hidden;
  min-height: 100dvh;
  overscroll-behavior-y: none;
  background:
    radial-gradient(circle at 10% 0%, rgba(45, 212, 191, 0.12), transparent 30%),
    radial-gradient(circle at 88% 8%, rgba(56, 189, 248, 0.12), transparent 30%),
    linear-gradient(180deg, #0b1220 0%, #08101d 100%);
  color: #e2e8f0;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-shell {
  height: auto !important;
  min-height: 100dvh;
  overflow: visible !important;
  padding-bottom: 24px;
  align-content: start;
  background: transparent;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-layout {
  height: auto !important;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-layout {
  min-height: calc(100dvh - 210px);
  height: auto;
  align-items: stretch;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-pane {
  height: 100%;
  min-height: max(560px, calc(100dvh - 250px));
}

body[data-page="app"][data-app-mode="receivables"] .receivables-upload-list,
body[data-page="app"][data-app-mode="receivables"] .receivables-list,
body[data-page="app"][data-app-mode="receivables"] .receivables-messages {
  height: auto;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-messages {
  align-content: end;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-form {
  margin-top: auto;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-form textarea,
body[data-page="app"][data-app-mode="receivables"] .receivables-search input {
  color: #f8fafc;
  caret-color: #f8fafc;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-form textarea {
  overflow-y: auto;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-form textarea::placeholder,
body[data-page="app"][data-app-mode="receivables"] .receivables-search input::placeholder {
  color: rgba(226, 232, 240, 0.42);
}

body[data-page="app"][data-app-mode="receivables"] .receivables-empty,
body[data-page="app"][data-app-mode="receivables"] .receivable-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  text-align: center;
}

@keyframes finoraBtnSweep {
  0% {
    transform: translateX(-120%) rotate(20deg);
  }
  100% {
    transform: translateX(420%) rotate(20deg);
  }
}

@keyframes finoraPrimaryFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

html,
body {
  background-color: #08101d !important;
}

body[data-page="app"][data-app-mode="receivables"] {
  position: relative;
  isolation: isolate;
  background: transparent !important;
}

body[data-page="app"][data-app-mode="receivables"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 0%, rgba(45, 212, 191, 0.12), transparent 30%),
    radial-gradient(circle at 88% 8%, rgba(56, 189, 248, 0.12), transparent 30%),
    linear-gradient(180deg, #0b1220 0%, #08101d 100%);
}

html,
body,
body[data-page="app"],
body[data-page="app"] .main-shell,
body[data-page="app"] .receivables-shell,
body[data-page="app"] .project-home,
body[data-page="app"] .project-desktop-shell,
body[data-page="app"] .project-desktop-ai,
body[data-page="app"] .project-desktop-workspace,
body[data-page="app"] .project-desktop-surface,
body[data-page="app"] .project-home-list,
body[data-page="app"] .project-home-pagination,
body[data-page="app"] .project-home-pagination-pages,
body[data-page="app"] .receivables-layout,
body[data-page="app"] .receivables-pane {
  max-width: 100%;
}

html,
body,
body[data-page="app"] {
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

body[data-page="app"] .main-shell,
body[data-page="app"] .receivables-shell,
body[data-page="app"] .project-home,
body[data-page="app"] .project-desktop-shell,
body[data-page="app"] .project-desktop-ai,
body[data-page="app"] .project-desktop-workspace,
body[data-page="app"] .project-home-list,
body[data-page="app"] .receivables-layout {
  overflow-x: clip;
}

body[data-page="app"] .project-desktop-surface,
body[data-page="app"] .receivables-pane {
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

body[data-page="app"] .project-home-pagination-pages {
  flex-wrap: wrap;
  max-width: 100%;
}

@keyframes finoraBubbleUser {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes finoraBubbleBot {
  0% {
    background-position: 0% 40%;
  }
  50% {
    background-position: 100% 60%;
  }
  100% {
    background-position: 0% 40%;
  }
}

/* Builder UI refresh: clear hierarchy, better readability, no overlap */
body[data-page="app"][data-app-mode="builder"] {
  overflow-y: auto;
  overflow-x: hidden;
}

body[data-page="app"][data-app-mode="builder"] .app-shell {
  min-height: 100dvh;
  height: auto;
  overflow: visible;
  background:
    radial-gradient(1200px 560px at 6% -10%, rgba(14, 165, 233, 0.15), transparent 58%),
    radial-gradient(1000px 620px at 92% 0%, rgba(45, 212, 191, 0.12), transparent 54%),
    linear-gradient(180deg, #041126 0%, #020617 100%);
}

body[data-page="app"][data-app-mode="builder"] .app-main {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  overflow: visible;
}

body[data-page="app"][data-app-mode="builder"] .app-topbar {
  border-color: rgba(125, 211, 252, 0.34);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.94) 0%, rgba(3, 7, 18, 0.9) 100%);
  box-shadow: 0 16px 34px -28px rgba(14, 165, 233, 0.95);
}

body[data-page="app"][data-app-mode="builder"] .builder {
  grid-template-columns: minmax(280px, 318px) minmax(680px, 1fr) minmax(300px, 360px);
  gap: 20px;
  align-items: start;
}

body[data-page="app"][data-app-mode="builder"] .builder-column.canvas {
  min-height: 0;
}

body[data-page="app"][data-app-mode="builder"] .builder-column {
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.96) 0%, rgba(241, 245, 249, 0.94) 100%);
  box-shadow: 0 20px 42px -34px rgba(15, 23, 42, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body[data-page="app"][data-app-mode="builder"] .builder-column h3,
body[data-page="app"][data-app-mode="builder"] .builder-column h4,
body[data-page="app"][data-app-mode="builder"] .builder-column p,
body[data-page="app"][data-app-mode="builder"] .builder-column span,
body[data-page="app"][data-app-mode="builder"] .builder-column label {
  color: #0f172a;
}

body[data-page="app"][data-app-mode="builder"] .btn.primary {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 46%, #22d3ee 100%);
  border-color: rgba(56, 189, 248, 0.62);
  box-shadow: 0 20px 34px -24px rgba(14, 165, 233, 0.9);
}

body[data-page="app"][data-app-mode="builder"] .btn.ghost {
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(241, 245, 249, 0.84) 100%);
}

body[data-page="app"][data-app-mode="builder"] .btn.ghost:hover {
  border-color: rgba(2, 132, 199, 0.45);
  box-shadow: 0 14px 24px -20px rgba(14, 165, 233, 0.64);
}

body[data-page="app"][data-app-mode="builder"] .add-menu-list {
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.96) 100%);
  box-shadow: 0 22px 34px -26px rgba(15, 23, 42, 0.45);
}

body[data-page="app"][data-app-mode="builder"] .upload-btn {
  border: 1px solid rgba(148, 163, 184, 0.32);
  background: linear-gradient(180deg, rgba(226, 232, 240, 0.74) 0%, rgba(241, 245, 249, 0.9) 100%);
  color: #0f172a;
}

body[data-page="app"][data-app-mode="builder"] input,
body[data-page="app"][data-app-mode="builder"] select,
body[data-page="app"][data-app-mode="builder"] textarea {
  color: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.36);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(248, 250, 252, 0.95) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body[data-page="app"][data-app-mode="builder"] input:focus,
body[data-page="app"][data-app-mode="builder"] select:focus,
body[data-page="app"][data-app-mode="builder"] textarea:focus {
  border-color: rgba(2, 132, 199, 0.72);
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.14);
}

body[data-page="app"][data-app-mode="builder"] .element-explorer {
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(241, 245, 249, 0.9) 0%, rgba(248, 250, 252, 0.96) 100%);
  padding: 12px;
  gap: 10px;
}

body[data-page="app"][data-app-mode="builder"] .element-explorer-head h4 {
  letter-spacing: 0.14em;
  font-size: 12px;
  color: #334155;
}

body[data-page="app"][data-app-mode="builder"] .element-explorer-head span {
  font-size: 12px;
  color: #64748b;
}

body[data-page="app"][data-app-mode="builder"] .element-explorer-list {
  max-height: min(56vh, 700px);
  gap: 8px;
  padding-right: 6px;
}

body[data-page="app"][data-app-mode="builder"] .element-explorer-item {
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.9) 100%);
  padding: 10px;
}

body[data-page="app"][data-app-mode="builder"] .element-explorer-item.active {
  border-color: rgba(2, 132, 199, 0.72);
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.16);
}

body[data-page="app"][data-app-mode="builder"] .element-explorer-meta {
  color: #64748b;
  font-size: 11px;
}

body[data-page="app"][data-app-mode="builder"] .element-explorer-name {
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(255, 255, 255, 0.98);
  color: #0f172a;
  font-size: 13px;
}

body[data-page="app"][data-app-mode="builder"] .canvas-drop,
body[data-page="app"][data-app-mode="builder"] .property-panel {
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(248, 250, 252, 0.9) 100%);
}

body[data-page="app"][data-app-mode="builder"] .canvas-drop {
  min-height: calc(100dvh - 260px);
  max-height: calc(100dvh - 220px);
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 10px;
}

body[data-page="app"][data-app-mode="builder"] .a4-wrapper {
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  min-height: max-content;
  overflow: visible;
}

body[data-page="app"][data-app-mode="builder"] .a4-element.table .element-content,
body[data-page="app"][data-app-mode="builder"] .invoice-table,
body[data-page="app"][data-app-mode="builder"] .invoice-details-panel {
  overflow: visible;
}

body[data-page="app"][data-app-mode="builder"] .a4-element.invoice-details .element-content {
  overflow: hidden;
}

body[data-page="app"][data-app-mode="builder"] .a4-element.table .invoice-meta-field input,
body[data-page="app"][data-app-mode="builder"] .a4-element.table .invoice-meta-field select,
body[data-page="app"][data-app-mode="builder"] .a4-element.table .invoice-meta-field textarea,
body[data-page="app"][data-app-mode="builder"] .a4-element.invoice-details .invoice-meta-field input,
body[data-page="app"][data-app-mode="builder"] .a4-element.invoice-details .invoice-meta-field select,
body[data-page="app"][data-app-mode="builder"] .a4-element.invoice-details .invoice-meta-field textarea {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 2px 0 !important;
}

body[data-page="app"][data-app-mode="builder"] .a4-element.table .invoice-meta-field input:focus,
body[data-page="app"][data-app-mode="builder"] .a4-element.table .invoice-meta-field select:focus,
body[data-page="app"][data-app-mode="builder"] .a4-element.table .invoice-meta-field textarea:focus,
body[data-page="app"][data-app-mode="builder"] .a4-element.invoice-details .invoice-meta-field input:focus,
body[data-page="app"][data-app-mode="builder"] .a4-element.invoice-details .invoice-meta-field select:focus,
body[data-page="app"][data-app-mode="builder"] .a4-element.invoice-details .invoice-meta-field textarea:focus {
  border: none !important;
  box-shadow: none !important;
}

body[data-page="app"][data-app-mode="builder"] .invoice-meta-field span {
  color: #64748b;
}

body[data-page="app"][data-app-mode="builder"] .table-grid th {
  background: rgba(15, 23, 42, 0.05);
}

body[data-page="app"][data-app-mode="builder"] .table-grid td {
  background: transparent;
}

body[data-page="app"][data-app-mode="builder"] .table-grid th,
body[data-page="app"][data-app-mode="builder"] .table-grid td {
  color: #0f172a;
}

body[data-page="app"][data-app-mode="builder"] .element-explorer-list::-webkit-scrollbar {
  width: 10px;
}

body[data-page="app"][data-app-mode="builder"] .element-explorer-list::-webkit-scrollbar-track {
  background: rgba(226, 232, 240, 0.86);
}

body[data-page="app"][data-app-mode="builder"] .element-explorer-list::-webkit-scrollbar-thumb {
  border: 2px solid rgba(226, 232, 240, 0.92);
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.9) 0%, rgba(6, 182, 212, 0.9) 100%);
}

@media (max-width: 1500px) {
  body[data-page="app"][data-app-mode="builder"] .builder {
    grid-template-columns: minmax(250px, 300px) minmax(560px, 1fr) minmax(280px, 330px);
  }
}

@media (max-width: 1280px) {
  body[data-page="app"][data-app-mode="builder"] .builder {
    grid-template-columns: 1fr;
  }
  body[data-page="app"][data-app-mode="builder"] .canvas-drop {
    max-height: none;
  }
}

/* Calendar Dashboard */
body[data-page="app"][data-app-mode="calendar"] {
  overflow: hidden;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-shell {
  min-height: 100dvh;
  height: 100dvh;
  overflow: auto;
  padding: 18px;
  background:
    radial-gradient(circle at 9% 7%, rgba(239, 68, 68, 0.2), transparent 35%),
    radial-gradient(circle at 88% 12%, rgba(14, 165, 233, 0.15), transparent 34%),
    linear-gradient(180deg, #090f20 0%, #030711 100%);
  color: #e2e8f0;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-radius: 16px;
  border: 1px solid rgba(248, 113, 113, 0.3);
  background: linear-gradient(180deg, rgba(28, 12, 22, 0.96) 0%, rgba(7, 11, 24, 0.95) 100%);
  box-shadow: 0 22px 44px -34px rgba(248, 113, 113, 0.48);
  padding: 14px 16px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-topbar h1 {
  margin: 0;
  color: #f8fafc;
  font-size: clamp(27px, 2.2vw, 36px);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-top-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-layout {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 14px;
  min-height: 0;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-pane {
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  background: linear-gradient(160deg, rgba(15, 18, 34, 0.92) 0%, rgba(4, 8, 20, 0.92) 100%);
  box-shadow: 0 24px 44px -36px rgba(2, 6, 23, 0.95);
  min-height: 0;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-board-pane {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
  gap: 10px;
  padding: 14px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-pane-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-pane-head h2 {
  margin: 0;
  color: #f8fafc;
  font-size: clamp(25px, 2vw, 33px);
  line-height: 1.1;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-pane-head p {
  margin: 6px 0 0;
  color: #94a3b8;
  font-size: 13px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-weekdays span {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(98px, auto);
  align-content: start;
  gap: 6px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-cell {
  min-height: 98px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  background: rgba(15, 23, 42, 0.62);
  color: #e2e8f0;
  padding: 8px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 4px;
  text-align: left;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-cell:hover {
  border-color: rgba(251, 113, 133, 0.66);
  transform: translateY(-1px);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-cell.is-outside {
  opacity: 0.56;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-cell.is-today {
  border-color: rgba(248, 113, 113, 0.82);
  box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.26);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-cell.is-selected {
  border-color: rgba(251, 113, 133, 0.94);
  background: linear-gradient(145deg, rgba(251, 113, 133, 0.24), rgba(56, 189, 248, 0.18));
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-top strong {
  color: #f8fafc;
  font-size: 13px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-count {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f8fafc;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.96), rgba(236, 72, 153, 0.96));
  font-size: 11px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-preview {
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-cell.has-done-events:not(.has-events) .calendar-day-preview {
  color: rgba(148, 163, 184, 0.88);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-detail-pane {
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;
  gap: 10px;
  padding: 14px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-detail-head h2 {
  margin: 0;
  color: #f8fafc;
  font-size: 20px;
  line-height: 1.25;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-detail-head span {
  color: #fecdd3;
  font-size: 14px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(248, 113, 113, 0.52);
  background: rgba(127, 29, 29, 0.34);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-form input,
body[data-page="app"][data-app-mode="calendar"] .calendar-event-form textarea {
  color: #f8fafc;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-form input::placeholder,
body[data-page="app"][data-app-mode="calendar"] .calendar-event-form textarea::placeholder {
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-form .calendar-event-title-input,
body[data-page="app"][data-app-mode="calendar"] .calendar-event-form textarea {
  grid-column: 1 / -1;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-form .calendar-time-input {
  text-align: center;
  letter-spacing: 0.06em;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-reminder-row {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.52);
  padding: 10px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-reminder-row label {
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-reminder-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-reminder-controls select {
  color: #f8fafc;
  border: 1px solid rgba(248, 113, 113, 0.42);
  background: rgba(30, 41, 59, 0.66);
  border-radius: 10px;
  min-height: 40px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 600;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-reminder-row small {
  color: #fda4af;
  font-size: 11px;
  font-weight: 600;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-actions {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-status {
  margin: 0;
  min-height: 18px;
  color: #94a3b8;
  font-size: 12px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-status[data-state="saved"] {
  color: #6ee7b7;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-status[data-state="error"] {
  color: #fda4af;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-status[data-state="warning"] {
  color: #fde68a;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-now-card {
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.7), rgba(2, 6, 23, 0.7));
  padding: 12px;
  display: grid;
  gap: 8px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-now-card.is-now {
  border-color: rgba(248, 113, 113, 0.85);
  background: linear-gradient(140deg, rgba(127, 29, 29, 0.44), rgba(30, 41, 59, 0.7));
  box-shadow: 0 20px 34px -26px rgba(248, 113, 113, 0.75);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-now-card.is-upcoming {
  border-color: rgba(56, 189, 248, 0.48);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-now-card.is-overdue {
  border-color: rgba(251, 113, 133, 0.88);
  background: linear-gradient(140deg, rgba(127, 29, 29, 0.4), rgba(30, 41, 59, 0.74));
}

body[data-page="app"][data-app-mode="calendar"] .calendar-now-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-now-card-head strong {
  color: #f8fafc;
  font-size: 16px;
  line-height: 1.2;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-now-card-head span {
  color: #fecdd3;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid rgba(248, 113, 113, 0.52);
  background: rgba(127, 29, 29, 0.34);
  padding: 4px 9px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-now-card-note {
  margin: 0;
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.35;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-now-card-done {
  width: fit-content;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 10px;
  padding-right: 2px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-empty {
  border-radius: 12px;
  border: 1px dashed rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.58);
  color: #94a3b8;
  text-align: center;
  padding: 14px 10px;
  font-size: 13px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-item {
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.72), rgba(2, 6, 23, 0.74));
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr auto;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 12px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-item.is-now {
  border-color: rgba(248, 113, 113, 0.86);
  box-shadow: 0 18px 32px -26px rgba(248, 113, 113, 0.8);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-item.is-overdue:not(.is-done) {
  border-color: rgba(251, 113, 133, 0.74);
  background: linear-gradient(145deg, rgba(127, 29, 29, 0.36), rgba(15, 23, 42, 0.74));
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-item.is-done {
  opacity: 0.68;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-item.is-done .calendar-event-content strong {
  text-decoration: line-through;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-time {
  min-width: 92px;
  color: #fda4af;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  border-radius: 10px;
  border: 1px solid rgba(248, 113, 113, 0.34);
  background: rgba(127, 29, 29, 0.18);
  padding: 5px 8px;
  text-align: center;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-content strong {
  display: block;
  color: #f8fafc;
  font-size: 14px;
  line-height: 1.3;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-state-label {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-item.is-now .calendar-event-state-label {
  border-color: rgba(248, 113, 113, 0.8);
  color: #fecdd3;
  background: rgba(127, 29, 29, 0.3);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-item.is-overdue:not(.is-done) .calendar-event-state-label {
  border-color: rgba(251, 113, 133, 0.8);
  color: #fecdd3;
  background: rgba(127, 29, 29, 0.28);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-content p {
  margin: 4px 0 0;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.35;
  white-space: pre-wrap;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-reminder-meta {
  margin-top: 4px;
  color: #fda4af;
  font-size: 11px;
  font-weight: 600;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-item-actions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-toggle {
  width: 16px;
  height: 16px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-edit,
body[data-page="app"][data-app-mode="calendar"] .calendar-event-delete {
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 7px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-edit {
  border: 1px solid rgba(56, 189, 248, 0.44);
  background: rgba(15, 23, 42, 0.72);
  color: #bfdbfe;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-edit:hover {
  border-color: rgba(56, 189, 248, 0.72);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-delete {
  border: 1px solid rgba(248, 113, 113, 0.38);
  background: rgba(127, 29, 29, 0.26);
  color: #fecaca;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-delete:hover {
  border-color: rgba(248, 113, 113, 0.66);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-reminder-popup {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  width: min(420px, calc(100vw - 24px));
  border-radius: 16px;
  border: 1px solid rgba(248, 113, 113, 0.6);
  background: linear-gradient(150deg, rgba(127, 29, 29, 0.9), rgba(15, 23, 42, 0.94));
  box-shadow: 0 26px 56px -30px rgba(248, 113, 113, 0.86);
  padding: 12px;
  display: grid;
  gap: 10px;
  transform: translateY(10px) scale(0.98);
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-reminder-popup.is-visible {
  transform: translateY(0) scale(1);
  opacity: 1;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-reminder-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-reminder-popup-head strong {
  color: #fff1f2;
  font-size: 15px;
  line-height: 1.2;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-reminder-popup-head span {
  border-radius: 999px;
  border: 1px solid rgba(251, 113, 133, 0.64);
  background: rgba(127, 29, 29, 0.34);
  color: #ffe4e6;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-reminder-popup p {
  margin: 0;
  color: #ffe4e6;
  font-size: 13px;
  line-height: 1.35;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-reminder-popup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 1280px) {
  body[data-page="app"][data-app-mode="calendar"] .calendar-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 920px) {
  body[data-page="app"][data-app-mode="calendar"] .calendar-shell {
    padding: 12px;
  }

  body[data-page="app"][data-app-mode="calendar"] .calendar-topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  body[data-page="app"][data-app-mode="calendar"] .calendar-top-actions {
    width: 100%;
    justify-content: space-between;
  }

  body[data-page="app"][data-app-mode="calendar"] .calendar-pane-head {
    flex-direction: column;
    align-items: flex-start;
  }

  body[data-page="app"][data-app-mode="calendar"] .calendar-nav {
    width: 100%;
  }

  body[data-page="app"][data-app-mode="calendar"] .calendar-nav .btn {
    flex: 1 1 auto;
  }

  body[data-page="app"][data-app-mode="calendar"] .calendar-day-cell {
    min-height: 88px;
  }

  body[data-page="app"][data-app-mode="calendar"] .calendar-event-item {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="calendar"] .calendar-event-time {
    width: fit-content;
  }

  body[data-page="app"][data-app-mode="calendar"] .calendar-reminder-controls {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="calendar"] .calendar-reminder-popup {
    right: 12px;
    left: 12px;
    width: auto;
    bottom: 12px;
  }
}

/* Start Dashboard Redesign */
body[data-page="app"][data-app-mode="hub"] .start-shell {
  min-height: 100dvh;
  height: 100dvh;
  overflow: auto;
  padding: 20px;
  background:
    radial-gradient(circle at 12% 8%, rgba(14, 165, 233, 0.18), transparent 34%),
    radial-gradient(circle at 88% 10%, rgba(45, 212, 191, 0.14), transparent 34%),
    linear-gradient(180deg, #061228 0%, #040a1b 100%);
  color: #e2e8f0;
}

body[data-page="app"][data-app-mode="hub"] .start-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(2, 6, 23, 0.92) 100%);
  box-shadow: 0 24px 44px -36px rgba(15, 23, 42, 0.95);
  padding: 12px 16px;
}

body[data-page="app"][data-app-mode="hub"] .start-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

body[data-page="app"][data-app-mode="hub"] .start-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #ecfeff;
  background: linear-gradient(135deg, #0b84ff 0%, #14b8a6 100%);
  box-shadow: 0 18px 26px -18px rgba(56, 189, 248, 0.95);
}

body[data-page="app"][data-app-mode="hub"] .start-brand strong {
  display: block;
  font-size: 15px;
  letter-spacing: 0.03em;
}

body[data-page="app"][data-app-mode="hub"] .start-brand small {
  display: block;
  margin-top: 2px;
  color: #94a3b8;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="hub"] .start-nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
}

body[data-page="app"][data-app-mode="hub"] .start-nav-link {
  color: #cbd5e1;
  text-decoration: none;
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 9px 12px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

body[data-page="app"][data-app-mode="hub"] .start-nav-link:hover,
body[data-page="app"][data-app-mode="hub"] .start-nav-link.is-active {
  color: #f8fafc;
  border-color: rgba(125, 211, 252, 0.36);
  background: rgba(15, 23, 42, 0.76);
}

body[data-page="app"][data-app-mode="hub"] .start-nav-tools {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

body[data-page="app"][data-app-mode="hub"] .start-user {
  font-size: 13px;
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="hub"] .start-main {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

body[data-page="app"][data-app-mode="hub"] .start-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.88) 0%, rgba(2, 6, 23, 0.84) 100%);
  padding: 18px 20px;
}

body[data-page="app"][data-app-mode="hub"] .start-head-copy {
  display: grid;
  gap: 8px;
}

body[data-page="app"][data-app-mode="hub"] .start-head h1 {
  margin: 0;
}

body[data-page="app"][data-app-mode="hub"] .start-company-name {
  padding: 0;
  border: 0;
  background: transparent;
  color: #f8fafc;
  font: inherit;
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 800;
  letter-spacing: -0.04em;
  cursor: pointer;
}

body[data-page="app"][data-app-mode="hub"] .start-company-name:hover {
  color: #67e8f9;
}

body[data-page="app"][data-app-mode="hub"] .start-company-name:focus-visible {
  outline: 2px solid rgba(103, 232, 249, 0.42);
  outline-offset: 10px;
}

body[data-page="app"][data-app-mode="hub"] .start-company-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

body[data-page="app"][data-app-mode="hub"] .start-company-form input {
  min-width: min(320px, 100%);
  flex: 1 1 280px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(15, 23, 42, 0.6);
  color: #f8fafc;
}

body[data-page="app"][data-app-mode="hub"] .start-company-form input::placeholder {
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="hub"] .start-company-status {
  margin: 0;
  color: #67e8f9;
  font-size: 13px;
}

body[data-page="app"][data-app-mode="hub"] .start-head p {
  margin: 6px 0 0;
  color: #94a3b8;
  font-size: 14px;
}

body[data-page="app"][data-app-mode="hub"] .start-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

body[data-page="app"][data-app-mode="hub"] .start-notification-strip {
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="hub"] .start-notification-strip[hidden] {
  display: none;
}

body[data-page="app"][data-app-mode="hub"] .start-notification-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background:
    radial-gradient(circle at top right, rgba(34, 211, 238, 0.12), transparent 34%),
    linear-gradient(160deg, rgba(15, 23, 42, 0.84), rgba(2, 6, 23, 0.86));
}

body[data-page="app"][data-app-mode="hub"] .start-notification-card[data-kind="receivable_reminder_failed"] {
  border-color: rgba(248, 113, 113, 0.28);
  background:
    radial-gradient(circle at top right, rgba(248, 113, 113, 0.14), transparent 36%),
    linear-gradient(160deg, rgba(15, 23, 42, 0.84), rgba(2, 6, 23, 0.86));
}

body[data-page="app"][data-app-mode="hub"] .start-notification-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

body[data-page="app"][data-app-mode="hub"] .start-notification-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(103, 232, 249, 0.24);
  background: rgba(13, 148, 136, 0.12);
  color: #b7fff3;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="hub"] .start-notification-card[data-kind="receivable_reminder_failed"] .start-notification-badge {
  border-color: rgba(248, 113, 113, 0.28);
  background: rgba(127, 29, 29, 0.22);
  color: #fecaca;
}

body[data-page="app"][data-app-mode="hub"] .start-notification-copy strong {
  color: #f8fafc;
  font-size: 16px;
}

body[data-page="app"][data-app-mode="hub"] .start-notification-copy p,
body[data-page="app"][data-app-mode="hub"] .start-notification-copy small {
  margin: 0;
  color: #aab8cb;
}

body[data-page="app"][data-app-mode="hub"] .start-notification-dismiss {
  flex-shrink: 0;
}

body[data-page="app"][data-app-mode="hub"] .start-private-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #cbd5e1;
  font-size: 14px;
}

body[data-page="app"][data-app-mode="hub"] .start-private-toggle input {
  width: 17px;
  height: 17px;
}

body[data-page="app"][data-app-mode="hub"] .start-grid {
  display: grid;
  grid-template-columns: 1.15fr 1.85fr;
  grid-template-areas:
    "bank chart"
    "calendar chart"
    "tasks actions"
    "tax actions";
  gap: 16px;
}

body[data-page="app"][data-app-mode="hub"] .start-card {
  border-radius: 18px;
  border: 1px solid rgba(125, 211, 252, 0.24);
  background: linear-gradient(155deg, rgba(15, 23, 42, 0.9) 0%, rgba(2, 6, 23, 0.9) 100%);
  box-shadow: 0 26px 44px -36px rgba(15, 23, 42, 0.95);
  padding: 16px;
}

body[data-page="app"][data-app-mode="hub"] .start-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

body[data-page="app"][data-app-mode="hub"] .start-card-head h2 {
  margin: 0;
  font-size: 26px;
  line-height: 1.15;
  color: #f8fafc;
}

body[data-page="app"][data-app-mode="hub"] .start-card-head > span {
  color: #6ee7b7;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

body[data-page="app"][data-app-mode="hub"] .start-bank {
  grid-area: bank;
}

body[data-page="app"][data-app-mode="hub"] .start-chart {
  grid-area: chart;
  display: grid;
  gap: 12px;
}

body[data-page="app"][data-app-mode="hub"] .start-calendar {
  grid-area: calendar;
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="hub"] .start-tasks {
  grid-area: tasks;
}

body[data-page="app"][data-app-mode="hub"] .start-tax {
  grid-area: tax;
}

body[data-page="app"][data-app-mode="hub"] .start-actions {
  grid-area: actions;
}

body[data-page="app"][data-app-mode="hub"] .start-balance-label {
  margin: 0;
  color: #94a3b8;
  font-size: 13px;
}

body[data-page="app"][data-app-mode="hub"] .start-balance-value {
  margin: 4px 0 12px;
  color: #f8fafc;
  font-size: 34px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-meta-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.52);
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-upload-btn,
body[data-page="app"][data-app-mode="hub"] .start-bank-secondary-btn {
  min-height: 42px;
  border-radius: 12px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-upload-btn {
  border: 1px solid rgba(103, 232, 249, 0.48);
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.32), rgba(13, 148, 136, 0.22));
  color: #d5fbff;
  box-shadow: 0 18px 34px -28px rgba(34, 211, 238, 0.92);
}

body[data-page="app"][data-app-mode="hub"] .start-bank-upload-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(125, 211, 252, 0.72);
  box-shadow: 0 20px 38px -28px rgba(34, 211, 238, 0.98);
}

body[data-page="app"][data-app-mode="hub"] .start-bank-secondary-btn {
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.68);
  color: #d8e2f1;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-secondary-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(148, 163, 184, 0.46);
  box-shadow: 0 18px 28px -26px rgba(15, 23, 42, 0.95);
}

body[data-page="app"][data-app-mode="hub"] .start-bank-list li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.7);
}

body[data-page="app"][data-app-mode="hub"] .start-bank-list li.is-empty {
  opacity: 0.88;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-list-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-list strong {
  font-size: 15px;
  color: #e2e8f0;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-list small {
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.45;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-list span {
  color: #f8fafc;
  font-weight: 700;
  white-space: nowrap;
  align-self: center;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-list li.is-review-case {
  align-items: center;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-list-actions {
  display: grid;
  justify-items: end;
  gap: 8px;
  flex-shrink: 0;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-case-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.55);
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-case-tag.is-approval {
  border-color: rgba(103, 232, 249, 0.35);
  background: rgba(13, 148, 136, 0.16);
  color: #b9fff4;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-approve-btn {
  min-height: 34px;
  border: 1px solid rgba(74, 222, 128, 0.34);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.26), rgba(20, 184, 166, 0.18));
  color: #ecfdf5;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-approve-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(110, 231, 183, 0.62);
  box-shadow: 0 18px 28px -24px rgba(34, 197, 94, 0.72);
}

body[data-page="app"][data-app-mode="hub"] .start-bank-approve-btn.is-review {
  border-color: rgba(125, 211, 252, 0.24);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(14, 116, 144, 0.16));
  color: #dbeafe;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-approve-btn.is-review:hover:not(:disabled) {
  border-color: rgba(125, 211, 252, 0.46);
  box-shadow: 0 18px 28px -24px rgba(56, 189, 248, 0.5);
}

body[data-page="app"][data-app-mode="hub"] .start-bank-approve-btn:disabled {
  opacity: 0.58;
  cursor: wait;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-foot {
  margin: 12px 0 0;
  color: #86efac;
  font-size: 13px;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-foot[data-state="dirty"] {
  color: #a5f3fc;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-foot[data-state="error"] {
  color: #fda4af;
}

body[data-page="app"][data-app-mode="hub"] {
  --document-upload-table-bg: rgba(15, 23, 42, 0.72);
  --document-upload-table-border: rgba(148, 163, 184, 0.18);
  --document-upload-table-head-copy: #e2e8f0;
  --document-upload-table-sub-copy: #94a3b8;
  --document-upload-table-cell-copy: #dbe7f5;
  --document-upload-table-row: rgba(15, 23, 42, 0.52);
  --document-upload-table-row-border: rgba(148, 163, 184, 0.12);
  --document-upload-table-scroll: rgba(2, 6, 23, 0.34);
}

body[data-page="app"][data-app-mode="hub"] .start-bank-table-host {
  margin-top: 12px;
}

body[data-page="app"] .document-upload-table-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--document-upload-table-border, rgba(148, 163, 184, 0.18));
  background: var(--document-upload-table-bg, rgba(15, 23, 42, 0.7));
}

body[data-page="app"] .document-upload-table-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

body[data-page="app"] .document-upload-table-head strong {
  color: var(--document-upload-table-head-copy, #e2e8f0);
  font-size: 14px;
  line-height: 1.3;
}

body[data-page="app"] .document-upload-table-head span {
  color: var(--document-upload-table-sub-copy, #94a3b8);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

body[data-page="app"] .document-upload-table-scroll {
  overflow-x: auto;
  border-radius: 14px;
  background: var(--document-upload-table-scroll, rgba(2, 6, 23, 0.2));
}

body[data-page="app"] .document-upload-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

body[data-page="app"] .document-upload-table th,
body[data-page="app"] .document-upload-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--document-upload-table-row-border, rgba(148, 163, 184, 0.12));
  text-align: left;
  vertical-align: top;
}

body[data-page="app"] .document-upload-table thead th {
  color: var(--document-upload-table-sub-copy, #94a3b8);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-page="app"] .document-upload-table tbody tr:last-child td {
  border-bottom: none;
}

body[data-page="app"] .document-upload-table tbody tr {
  background: var(--document-upload-table-row, rgba(15, 23, 42, 0.42));
}

body[data-page="app"] .document-upload-table-copy {
  display: grid;
  gap: 3px;
}

body[data-page="app"] .document-upload-table-copy strong {
  color: var(--document-upload-table-cell-copy, #e2e8f0);
  font-size: 13px;
  line-height: 1.45;
}

body[data-page="app"] .document-upload-table-copy small {
  color: var(--document-upload-table-sub-copy, #94a3b8);
  font-size: 11px;
  line-height: 1.45;
}

body[data-page="app"] .document-upload-table-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.38rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.22);
  background: rgba(30, 41, 59, 0.88);
  color: #dbe7f5;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

body[data-page="app"] .document-upload-table-result {
  display: grid;
  gap: 0.38rem;
  min-width: 180px;
}

body[data-page="app"] .document-upload-table-result small {
  color: var(--document-upload-table-sub-copy, #94a3b8);
  font-size: 11px;
  line-height: 1.45;
}

body[data-page="app"] .document-upload-table td {
  color: var(--document-upload-table-cell-copy, #dbe7f5);
  font-size: 12px;
  line-height: 1.45;
}

body[data-page="app"] .document-upload-table td.is-positive {
  color: #6ee7b7;
  font-weight: 700;
}

body[data-page="app"] .document-upload-table td.is-negative {
  color: #fca5a5;
  font-weight: 700;
}

body[data-page="app"] .document-upload-table td.is-neutral {
  color: var(--document-upload-table-sub-copy, #94a3b8);
}

body[data-page="app"] .document-upload-table-note {
  margin: 0;
  color: var(--document-upload-table-sub-copy, #94a3b8);
  font-size: 12px;
}

body[data-page="app"] .document-upload-series-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background:
    radial-gradient(circle at 12% 10%, rgba(56, 189, 248, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.76), rgba(15, 23, 42, 0.6));
}

body[data-page="app"] .document-upload-series-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  flex-wrap: wrap;
}

body[data-page="app"] .document-upload-series-head strong {
  display: block;
  color: #f8fafc;
  font-size: 14px;
}

body[data-page="app"] .document-upload-series-head span {
  color: #94a3b8;
  font-size: 12px;
}

body[data-page="app"] .document-upload-series-legend,
body[data-page="app"] .document-upload-series-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page="app"] .document-upload-series-legend span,
body[data-page="app"] .document-upload-series-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(2, 6, 23, 0.34);
  color: #d7e3f3;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

body[data-page="app"] .document-upload-series-legend .is-net::before,
body[data-page="app"] .document-upload-series-legend .is-balance::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-right: 8px;
}

body[data-page="app"] .document-upload-series-legend .is-net::before {
  background: linear-gradient(180deg, #67e8f9, #38bdf8);
}

body[data-page="app"] .document-upload-series-legend .is-balance::before {
  background: linear-gradient(180deg, #f8fafc, #94a3b8);
}

body[data-page="app"] .document-upload-series-frame {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(2, 6, 23, 0.24);
}

body[data-page="app"] .document-upload-series-frame svg {
  width: 100%;
  height: auto;
  display: block;
}

body[data-page="app"] .document-upload-series-grid line {
  stroke: rgba(148, 163, 184, 0.16);
  stroke-width: 1;
}

body[data-page="app"] .document-upload-series-bars rect.is-positive {
  fill: rgba(103, 232, 249, 0.92);
}

body[data-page="app"] .document-upload-series-bars rect.is-negative {
  fill: rgba(248, 113, 113, 0.88);
}

body[data-page="app"] .document-upload-series-line {
  stroke: rgba(255, 255, 255, 0.8);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-page="app"] .document-upload-series-axis text {
  fill: rgba(203, 213, 225, 0.86);
  font-size: 11px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="hub"] .start-selects {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.bank-checker-open {
  overflow: hidden;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-checker-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(45, 212, 191, 0.28);
  background:
    linear-gradient(180deg, rgba(20, 32, 58, 0.96), rgba(8, 14, 28, 0.96));
  color: #ccfbf1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-checker-btn:hover,
body[data-page="app"][data-app-mode="hub"] .start-bank-checker-btn:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(45, 212, 191, 0.42);
  box-shadow: 0 14px 26px rgba(13, 148, 136, 0.18);
  outline: none;
}

body[data-page="app"][data-app-mode="hub"] .start-scope-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(15, 23, 42, 0.78);
  color: #cbd5e1;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
}

body[data-page="app"][data-app-mode="hub"] .start-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body[data-page="app"][data-app-mode="hub"] .start-kpi-row div {
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.64);
  padding: 10px 12px;
}

body[data-page="app"][data-app-mode="hub"] .start-kpi-row span {
  color: #94a3b8;
  font-size: 12px;
}

body[data-page="app"][data-app-mode="hub"] .start-kpi-row strong {
  display: block;
  margin-top: 4px;
  color: #f8fafc;
  font-size: clamp(22px, 2.1vw, 36px);
  line-height: 1.1;
}

body[data-page="app"][data-app-mode="hub"] .start-overview-detail-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body[data-page="app"][data-app-mode="hub"] .start-overview-detail-grid[hidden] {
  display: none;
}

body[data-page="app"][data-app-mode="hub"] .start-overview-detail-card {
  display: inline-grid;
  min-width: 0;
  flex: 1 1 180px;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.58);
}

body[data-page="app"][data-app-mode="hub"] .start-overview-detail-card span {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

body[data-page="app"][data-app-mode="hub"] .start-overview-detail-card strong {
  color: #f8fafc;
  font-size: clamp(16px, 1.35vw, 22px);
  line-height: 1.18;
}

body[data-page="app"][data-app-mode="hub"] .start-overview-detail-card small {
  color: #7b93ab;
  font-size: 11px;
  line-height: 1.35;
}

body[data-page="app"][data-app-mode="hub"] .start-overview-table-host {
  display: grid;
}

body[data-page="app"][data-app-mode="hub"] .start-overview-table-host[hidden] {
  display: none;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-checker-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-checker-modal[hidden] {
  display: none;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-checker-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(12px);
}

body[data-page="app"][data-app-mode="hub"] .start-bank-checker-card {
  position: relative;
  z-index: 1;
  width: min(1080px, calc(100vw - 36px));
  max-height: min(84vh, 920px);
  overflow: auto;
  display: grid;
  gap: 16px;
  padding: 22px;
  border-radius: 28px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background:
    radial-gradient(circle at 12% 0%, rgba(56, 189, 248, 0.12), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(45, 212, 191, 0.12), transparent 26%),
    linear-gradient(180deg, rgba(8, 14, 28, 0.98), rgba(6, 11, 24, 0.98));
  box-shadow: 0 40px 90px rgba(2, 6, 23, 0.48);
  transform: translateY(18px) scale(0.985);
  opacity: 0;
  transition: transform 180ms ease, opacity 180ms ease;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-checker-modal.is-open .start-bank-checker-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-checker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-checker-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(45, 212, 191, 0.18);
  background: rgba(15, 23, 42, 0.76);
  color: #8befe0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-checker-head h3 {
  margin: 10px 0 6px;
  color: #f8fafc;
  font-size: clamp(24px, 2vw, 34px);
  line-height: 1.08;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-checker-head p {
  margin: 0;
  max-width: 720px;
  color: #94a3b8;
  line-height: 1.6;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-checker-close {
  flex: 0 0 auto;
}

@media (max-width: 1180px) {
  body[data-page="app"][data-app-mode="hub"] .start-overview-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body[data-page="app"][data-app-mode="hub"] .start-overview-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="app"][data-app-mode="hub"] .start-bank-checker-head {
    flex-direction: column;
  }

  body[data-page="app"][data-app-mode="hub"] .start-bank-checker-card {
    width: min(100vw - 18px, 1080px);
    padding: 18px;
    border-radius: 22px;
  }
}

body[data-page="app"][data-app-mode="hub"] .start-chart-frame {
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.8) 0%, rgba(15, 23, 42, 0.8) 100%);
  overflow: hidden;
  min-height: 280px;
}

body[data-page="app"][data-app-mode="hub"] .start-chart-canvas,
body[data-page="app"][data-app-mode="hub"] .start-chart-frame svg {
  width: 100%;
  height: 100%;
  display: block;
}

body[data-page="app"][data-app-mode="hub"] .start-chart-canvas {
  min-height: 280px;
}

body[data-page="app"][data-app-mode="hub"] .start-chart-empty {
  min-height: 280px;
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
  padding: 28px 22px;
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="hub"] .start-chart-empty strong {
  color: #e2e8f0;
  font-size: 17px;
}

body[data-page="app"][data-app-mode="hub"] .start-chart-empty p {
  margin: 0;
  max-width: 340px;
  line-height: 1.5;
}

body[data-page="app"][data-app-mode="hub"] .start-grid-lines line {
  stroke: rgba(148, 163, 184, 0.22);
  stroke-width: 1;
}

body[data-page="app"][data-app-mode="hub"] .start-chart-axis text {
  fill: rgba(148, 163, 184, 0.78);
  font-size: 11px;
}

body[data-page="app"][data-app-mode="hub"] .start-chart-axis line {
  stroke: rgba(148, 163, 184, 0.22);
  stroke-width: 1;
}

body[data-page="app"][data-app-mode="hub"] .start-chart-note {
  margin: 0;
  color: #94a3b8;
  font-size: 12px;
}

body[data-page="app"][data-app-mode="hub"] .start-finance-transfer {
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background:
    radial-gradient(circle at 100% 0%, rgba(45, 212, 191, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.82) 0%, rgba(15, 23, 42, 0.78) 100%);
  padding: 14px;
  min-height: 180px;
  display: grid;
  align-items: stretch;
}

body[data-page="app"][data-app-mode="hub"] .start-finance-transfer-stack {
  display: grid;
  gap: 10px;
  align-self: stretch;
}

body[data-page="app"][data-app-mode="hub"] .start-finance-transfer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body[data-page="app"][data-app-mode="hub"] .start-finance-transfer-item {
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.72);
  padding: 14px 15px;
  display: grid;
  gap: 7px;
}

body[data-page="app"][data-app-mode="hub"] .start-finance-transfer-item span {
  color: #92a7bf;
  font-size: 12px;
  font-weight: 600;
}

body[data-page="app"][data-app-mode="hub"] .start-finance-transfer-item strong {
  color: #f8fafc;
  font-size: clamp(22px, 2.1vw, 34px);
  line-height: 1.08;
}

body[data-page="app"][data-app-mode="hub"] .start-finance-transfer-item small {
  color: #7dd3c6;
  font-size: 12px;
  line-height: 1.45;
}

body[data-page="app"][data-app-mode="hub"] .start-finance-transfer .document-upload-series-card {
  padding: 16px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 12% 10%, rgba(56, 189, 248, 0.1), transparent 30%),
    linear-gradient(180deg, rgba(3, 10, 24, 0.8), rgba(11, 18, 32, 0.7));
}

body[data-page="app"][data-app-mode="hub"] .start-finance-transfer .document-upload-series-head strong {
  font-size: 15px;
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-card {
  display: grid;
  gap: 10px;
  padding: 10px 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at 12% 0%, rgba(56, 189, 248, 0.05), transparent 32%),
    linear-gradient(180deg, rgba(3, 10, 24, 0.78), rgba(9, 16, 30, 0.72));
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-card.is-positive {
  box-shadow: inset 0 1px 0 rgba(74, 222, 128, 0.08);
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-card.is-negative {
  box-shadow: inset 0 1px 0 rgba(248, 113, 113, 0.12);
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-head strong {
  display: block;
  color: #f8fafc;
  font-size: 14px;
  line-height: 1.2;
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-head span {
  display: block;
  margin-top: 2px;
  color: #89a0b8;
  font-size: 11px;
  line-height: 1.5;
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-stage {
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  background:
    linear-gradient(180deg, rgba(2, 6, 23, 0.8), rgba(7, 14, 28, 0.72));
  overflow: visible;
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-stage svg {
  width: 100%;
  height: auto;
  display: block;
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-grid line {
  stroke: rgba(148, 163, 184, 0.14);
  stroke-width: 1;
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-area {
  opacity: 0.22;
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-area.is-positive {
  fill: url(#hub-transaction-positive-fill);
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-area.is-negative {
  fill: url(#hub-transaction-negative-fill);
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-line {
  stroke: #22c55e;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 10px 20px rgba(34, 197, 94, 0.18));
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-card.is-negative .hub-transaction-chart-line {
  stroke: #ef4444;
  filter: drop-shadow(0 10px 20px rgba(239, 68, 68, 0.2));
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-points {
  position: absolute;
  inset: 0;
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-point {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 3px solid #22c55e;
  background: rgba(15, 23, 42, 0.98);
  box-shadow: 0 14px 24px rgba(2, 6, 23, 0.4);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-point::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: inherit;
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-point.is-positive {
  border-color: #22c55e;
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-point.is-negative {
  border-color: #f87171;
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-point.is-neutral {
  border-color: #67e8f9;
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-card.is-negative .hub-transaction-chart-point {
  border-color: #ef4444;
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-point:hover,
body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-point:focus-visible {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 18px 30px rgba(8, 15, 31, 0.5);
  outline: none;
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-tooltip {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  min-width: 220px;
  max-width: 280px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background:
    linear-gradient(180deg, rgba(12, 20, 34, 0.98), rgba(7, 12, 24, 0.98));
  box-shadow: 0 24px 48px rgba(2, 6, 23, 0.42);
  display: grid;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 4;
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 14px;
  height: 14px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 1px solid rgba(148, 163, 184, 0.2);
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(7, 12, 24, 0.98);
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-point:hover .hub-transaction-chart-tooltip,
body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-point:focus-visible .hub-transaction-chart-tooltip {
  opacity: 1;
  transform: translate(-50%, 0);
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-point.is-left .hub-transaction-chart-tooltip {
  left: 0;
  transform: translate(0, 10px);
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-point.is-left .hub-transaction-chart-tooltip::after {
  left: 18px;
  transform: rotate(45deg);
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-point.is-left:hover .hub-transaction-chart-tooltip,
body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-point.is-left:focus-visible .hub-transaction-chart-tooltip {
  transform: translate(0, 0);
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-point.is-right .hub-transaction-chart-tooltip {
  left: auto;
  right: 0;
  transform: translate(0, 10px);
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-point.is-right .hub-transaction-chart-tooltip::after {
  left: auto;
  right: 18px;
  transform: rotate(45deg);
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-point.is-right:hover .hub-transaction-chart-tooltip,
body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-point.is-right:focus-visible .hub-transaction-chart-tooltip {
  transform: translate(0, 0);
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-tooltip strong {
  color: #f8fafc;
  font-size: 13px;
  line-height: 1.35;
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-tooltip span,
body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-tooltip small {
  color: #cbd5e1;
  font-size: 11px;
  line-height: 1.45;
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-tooltip small:last-child {
  color: #7dd3c6;
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-axis {
  position: relative;
  min-height: 18px;
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-axis span {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  color: rgba(203, 213, 225, 0.82);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.7);
  color: #e2e8f0;
  font-size: 11px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-list li.is-summary {
  padding-top: 10px;
  border-top: 1px dashed rgba(148, 163, 184, 0.16);
}

body[data-page="app"][data-app-mode="hub"] .start-bank-list li.is-summary strong {
  color: #dbe7f5;
}

body[data-page="app"][data-app-mode="hub"] .start-bank-list li.is-summary small,
body[data-page="app"][data-app-mode="hub"] .start-bank-list li.is-summary span {
  color: #8aa2ba;
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-stage svg defs stop:first-child {
  stop-opacity: 0.34;
}

body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-stage svg defs stop:last-child {
  stop-opacity: 0;
}

body[data-page="app"][data-app-mode="hub"] .start-finance-transfer-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
  padding: 20px 18px;
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="hub"] .start-finance-transfer-empty strong {
  color: #e2e8f0;
  font-size: 18px;
}

body[data-page="app"][data-app-mode="hub"] .start-finance-transfer-empty p {
  margin: 0;
  max-width: 420px;
  line-height: 1.55;
}

@media (max-width: 900px) {
  body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-tooltip {
    min-width: 180px;
    max-width: 220px;
  }

  body[data-page="app"][data-app-mode="hub"] .hub-transaction-chart-axis span {
    font-size: 10px;
  }
}

body[data-page="app"][data-app-mode="hub"] .start-calendar-headline strong {
  color: #f8fafc;
  font-size: 16px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="hub"] .start-calendar-head-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body[data-page="app"][data-app-mode="hub"] .start-calendar-open {
  border: 1px solid rgba(125, 211, 252, 0.4);
  background: rgba(15, 23, 42, 0.74);
  color: #67e8f9;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 6px 9px;
}

body[data-page="app"][data-app-mode="hub"] .start-calendar-open:hover {
  border-color: rgba(125, 211, 252, 0.66);
  color: #a5f3fc;
}

body[data-page="app"][data-app-mode="hub"] .start-calendar-day-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

body[data-page="app"][data-app-mode="hub"] .start-calendar-day {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.62);
  color: #cbd5e1;
  display: grid;
  gap: 1px;
  justify-items: center;
  padding: 7px 4px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

body[data-page="app"][data-app-mode="hub"] .start-calendar-day:hover {
  border-color: rgba(125, 211, 252, 0.54);
  transform: translateY(-1px);
}

body[data-page="app"][data-app-mode="hub"] .start-calendar-day small {
  color: #94a3b8;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

body[data-page="app"][data-app-mode="hub"] .start-calendar-day strong {
  color: #f8fafc;
  font-size: 12px;
}

body[data-page="app"][data-app-mode="hub"] .start-calendar-day.is-today {
  border-color: rgba(45, 212, 191, 0.54);
}

body[data-page="app"][data-app-mode="hub"] .start-calendar-day.is-active {
  border-color: rgba(56, 189, 248, 0.9);
  background: linear-gradient(140deg, rgba(14, 165, 233, 0.28), rgba(20, 184, 166, 0.24));
}

body[data-page="app"][data-app-mode="hub"] .start-calendar-form {
  display: grid;
  grid-template-columns: 108px 108px 1fr auto;
  gap: 8px;
}

body[data-page="app"][data-app-mode="hub"] .start-calendar-form input {
  width: 100%;
  color: #f8fafc;
}

body[data-page="app"][data-app-mode="hub"] .start-calendar-form .start-calendar-time-input {
  text-align: center;
  letter-spacing: 0.05em;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="hub"] .start-calendar-form input::placeholder {
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="hub"] .start-calendar-form .btn {
  height: 100%;
  min-height: 42px;
}

body[data-page="app"][data-app-mode="hub"] .start-calendar-status {
  margin: 0;
  min-height: 18px;
  color: #94a3b8;
  font-size: 12px;
}

body[data-page="app"][data-app-mode="hub"] .start-calendar-status[data-state="saved"] {
  color: #6ee7b7;
}

body[data-page="app"][data-app-mode="hub"] .start-calendar-status[data-state="error"] {
  color: #fda4af;
}

body[data-page="app"][data-app-mode="hub"] .start-calendar-list {
  display: grid;
  gap: 8px;
  max-height: 236px;
  overflow: auto;
  padding-right: 2px;
}

body[data-page="app"][data-app-mode="hub"] .start-calendar-empty {
  border-radius: 12px;
  border: 1px dashed rgba(148, 163, 184, 0.3);
  background: rgba(15, 23, 42, 0.54);
  color: #94a3b8;
  font-size: 13px;
  text-align: center;
  padding: 12px 10px;
}

body[data-page="app"][data-app-mode="hub"] .start-calendar-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.64);
  padding: 8px 10px;
}

body[data-page="app"][data-app-mode="hub"] .start-calendar-item.is-done {
  opacity: 0.68;
}

body[data-page="app"][data-app-mode="hub"] .start-calendar-item.is-done .start-calendar-item-title {
  text-decoration: line-through;
}

body[data-page="app"][data-app-mode="hub"] .start-calendar-item-time {
  min-width: 86px;
  color: #67e8f9;
  font-size: 12px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="hub"] .start-calendar-item-main {
  min-width: 0;
}

body[data-page="app"][data-app-mode="hub"] .start-calendar-item-title {
  color: #f8fafc;
  font-size: 14px;
  line-height: 1.3;
  word-break: break-word;
}

body[data-page="app"][data-app-mode="hub"] .start-calendar-item-meta {
  margin-top: 2px;
  color: #94a3b8;
  font-size: 11px;
}

body[data-page="app"][data-app-mode="hub"] .start-calendar-item-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body[data-page="app"][data-app-mode="hub"] .start-calendar-toggle {
  width: 16px;
  height: 16px;
}

body[data-page="app"][data-app-mode="hub"] .start-calendar-delete {
  border: 1px solid rgba(248, 113, 113, 0.35);
  background: rgba(127, 29, 29, 0.24);
  color: #fecaca;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 8px;
}

body[data-page="app"][data-app-mode="hub"] .start-calendar-delete:hover {
  border-color: rgba(248, 113, 113, 0.65);
  background: rgba(127, 29, 29, 0.38);
}

body[data-page="app"][data-app-mode="hub"] .start-tasks ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

body[data-page="app"][data-app-mode="hub"] .start-tasks li {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.64);
  padding: 8px 10px;
}

body[data-page="app"][data-app-mode="hub"] .start-tasks li strong {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #f8fafc;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.95), rgba(20, 184, 166, 0.95));
}

body[data-page="app"][data-app-mode="hub"] .start-tasks li span {
  color: #cbd5e1;
  font-size: 14px;
}

body[data-page="app"][data-app-mode="hub"] .start-tax dl {
  margin: 0;
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="hub"] .start-tax dl div {
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.64);
  padding: 10px 12px;
}

body[data-page="app"][data-app-mode="hub"] .start-tax dt {
  color: #94a3b8;
  font-size: 12px;
}

body[data-page="app"][data-app-mode="hub"] .start-tax dd {
  margin: 6px 0 0;
  color: #f8fafc;
  font-size: 23px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="hub"] .start-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body[data-page="app"][data-app-mode="hub"] .start-action-btn {
  border: 1px solid rgba(148, 163, 184, 0.26);
  background: linear-gradient(150deg, rgba(15, 23, 42, 0.82) 0%, rgba(2, 6, 23, 0.78) 100%);
  border-radius: 14px;
  color: #e2e8f0;
  min-height: 104px;
  text-align: left;
  padding: 12px;
  display: grid;
  gap: 4px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

body[data-page="app"][data-app-mode="hub"] .start-action-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(125, 211, 252, 0.5);
  box-shadow: 0 20px 32px -24px rgba(56, 189, 248, 0.9);
}

body[data-page="app"][data-app-mode="hub"] .start-action-btn strong {
  font-size: 16px;
  line-height: 1.2;
}

body[data-page="app"][data-app-mode="hub"] .start-action-btn small {
  color: #94a3b8;
  font-size: 12px;
}

body[data-page="app"][data-app-mode="hub"] .start-action-btn .hub-card-cta {
  margin-top: auto;
  color: #67e8f9;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="hub"] .start-action-btn.is-locked {
  opacity: 0.55;
  pointer-events: none;
}

@media (max-width: 1320px) {
  body[data-page="app"][data-app-mode="hub"] .start-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "bank"
      "calendar"
      "chart"
      "tasks"
      "tax"
      "actions";
  }

  body[data-page="app"][data-app-mode="hub"] .start-kpi-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  body[data-page="app"][data-app-mode="hub"] .start-shell {
    padding: 12px;
  }

  body[data-page="app"][data-app-mode="hub"] .start-nav {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body[data-page="app"][data-app-mode="hub"] .start-nav-tools {
    justify-content: space-between;
  }

  body[data-page="app"][data-app-mode="hub"] .start-head {
    flex-direction: column;
    align-items: flex-start;
  }

  body[data-page="app"][data-app-mode="hub"] .start-head-actions {
    width: 100%;
    justify-content: space-between;
  }

  body[data-page="app"][data-app-mode="hub"] .start-company-form {
    flex-direction: column;
    align-items: stretch;
  }

  body[data-page="app"][data-app-mode="hub"] .start-action-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="hub"] .start-calendar-form {
    grid-template-columns: 1fr 1fr;
  }

  body[data-page="app"][data-app-mode="hub"] .start-calendar-form .start-calendar-title-input {
    grid-column: 1 / -1;
  }

  body[data-page="app"][data-app-mode="hub"] .start-calendar-form .btn {
    grid-column: 1 / -1;
  }
}

/* Calendar Multi-Select + Global Reminder + Larger Select UI */
body[data-page="app"] select {
  min-height: 46px;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 600;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form input {
  min-height: 50px;
  font-size: 16px;
  color: #ffffff;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form input::placeholder {
  color: #cbd5e1;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-detail-pane {
  grid-template-rows: auto auto auto auto auto auto auto auto minmax(170px, 1fr) auto;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-selection-bar {
  border-radius: 12px;
  border: 1px solid rgba(248, 113, 113, 0.36);
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.72), rgba(15, 23, 42, 0.74));
  padding: 10px;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 10px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-select-all-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-select-all-wrap input {
  width: 18px;
  height: 18px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-selected-count {
  border-radius: 999px;
  border: 1px solid rgba(248, 113, 113, 0.48);
  background: rgba(127, 29, 29, 0.32);
  color: #fecdd3;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home {
  min-height: calc(100vh - 110px);
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-shell {
  min-height: calc(100vh - 110px);
  display: grid;
  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
  gap: 18px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-ai,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-workspace {
  border-radius: 26px;
  border: 1px solid rgba(94, 234, 212, 0.22);
  background:
    radial-gradient(circle at 20% 10%, rgba(45, 212, 191, 0.12), transparent 38%),
    radial-gradient(circle at 82% 12%, rgba(59, 130, 246, 0.14), transparent 32%),
    linear-gradient(160deg, rgba(15, 23, 42, 0.96), rgba(9, 20, 32, 0.94));
  box-shadow: 0 32px 56px -42px rgba(13, 148, 136, 0.72);
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-ai {
  padding: 24px;
  display: grid;
  align-content: start;
  gap: 18px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-ai-head,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-toolbar,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-toolbar-actions,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-pill,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-state,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-count,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-item-type,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-item-foot strong {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-pill {
  border: 1px solid rgba(125, 211, 252, 0.34);
  background: rgba(7, 89, 133, 0.28);
  color: #c7f9ff;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-state {
  border: 1px solid rgba(74, 222, 128, 0.3);
  background: rgba(20, 83, 45, 0.32);
  color: #bbf7d0;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-brain {
  position: relative;
  min-height: 168px;
  border-radius: 28px;
  border: 1px solid rgba(125, 211, 252, 0.18);
  background:
    radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.14), transparent 36%),
    linear-gradient(180deg, rgba(8, 15, 28, 0.54), rgba(8, 15, 28, 0.18));
  overflow: hidden;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-brain-ring,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-brain-core {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-brain-ring {
  border: 1px solid rgba(125, 211, 252, 0.24);
  animation: projectBrainPulse 5.4s ease-in-out infinite;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-brain-ring.ring-a {
  width: 104px;
  height: 104px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-brain-ring.ring-b {
  width: 156px;
  height: 156px;
  animation-delay: 1.2s;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-brain-core {
  width: 54px;
  height: 54px;
  background: radial-gradient(circle at 35% 35%, #cffafe, #06b6d4 60%, #0f172a 100%);
  box-shadow: 0 0 36px rgba(34, 211, 238, 0.42);
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-kicker,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-toolbar-label {
  margin: 0;
  color: #8ce8ff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-copy h2 {
  margin: 10px 0 12px;
  color: #f8fafc;
  font-size: clamp(32px, 3vw, 48px);
  line-height: 1.02;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-copy p,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-hint p,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-item p,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-footer span {
  margin: 0;
  color: #abc0d6;
  font-size: 14px;
  line-height: 1.6;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-thoughts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-thoughts span,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-hint,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-item-metric,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-empty {
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(8, 15, 28, 0.54);
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-thoughts span {
  padding: 9px 12px;
  color: #d9f99d;
  font-size: 12px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-actions {
  margin-top: 2px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-hint {
  padding: 16px;
  display: grid;
  gap: 8px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-hint strong,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-toolbar h3 {
  color: #f8fafc;
  font-size: 22px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-workspace {
  padding: 18px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 16px;
  min-height: 0;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-count {
  border: 1px solid rgba(45, 212, 191, 0.34);
  background: rgba(13, 148, 136, 0.2);
  color: #ccfbf1;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-surface {
  min-height: 0;
  overflow: visible;
  border-radius: 24px;
  border: 1px solid rgba(125, 211, 252, 0.16);
  background:
    radial-gradient(circle at 12% 18%, rgba(34, 197, 94, 0.1), transparent 22%),
    radial-gradient(circle at 84% 12%, rgba(14, 165, 233, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(9, 16, 26, 0.78), rgba(11, 20, 32, 0.68));
  padding: 18px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 16px;
  align-content: start;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-item,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-empty {
  min-height: 270px;
  padding: 18px 16px 16px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-item {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 0;
  border: 1px solid rgba(125, 211, 252, 0.16);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(18, 34, 50, 0.72), rgba(7, 14, 24, 0.9)),
    radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.1), transparent 40%);
  color: inherit;
  text-align: left;
  display: grid;
  align-content: start;
  gap: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02), 0 18px 34px -28px rgba(15, 23, 42, 0.9);
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-item:hover,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-item.active {
  transform: translateY(-4px);
  border-color: rgba(45, 212, 191, 0.54);
  box-shadow: 0 28px 46px -30px rgba(45, 212, 191, 0.54);
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-item-frame {
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-folder-art {
  position: relative;
  width: 118px;
  height: 86px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-folder-tab,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-folder-body {
  position: absolute;
  left: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #fde68a, #f59e0b);
  box-shadow: inset 0 -8px 18px rgba(146, 64, 14, 0.16);
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-folder-tab {
  top: 6px;
  width: 52px;
  height: 22px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-folder-body {
  top: 20px;
  width: 118px;
  height: 64px;
  border-top-left-radius: 12px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-item-head {
  display: grid;
  gap: 6px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-item strong {
  color: #f8fafc;
  font-size: 20px;
  line-height: 1.08;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-item-type {
  width: fit-content;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(125, 211, 252, 0.24);
  background: rgba(7, 89, 133, 0.28);
  color: #a5f3fc;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-item-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-item-metric {
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-item-metric small {
  color: #7dd3fc;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-item-metric b {
  color: #f8fafc;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-item-foot {
  margin-top: auto;
  padding-top: 4px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-item-foot span {
  color: #94a3b8;
  font-size: 12px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-item-foot strong {
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(45, 212, 191, 0.34);
  background: rgba(15, 118, 110, 0.22);
  color: #ccfbf1;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  text-align: center;
  color: #b6c7db;
  font-size: 14px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-studio-layout {
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  align-items: stretch;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-data-pane,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-builder-pane {
  min-height: calc(100vh - 126px);
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-data-pane {
  overflow: auto;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-data-pane,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-builder-pane {
  padding: 14px;
  gap: 10px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-pane-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-pane-eyebrow {
  margin: 0 0 6px;
  color: #7dd3fc;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-pane-head h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.1;
  color: #f8fafc;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-pane-head .main-pane-sub {
  margin-top: 4px;
  font-size: 13px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-pane-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-pane-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(125, 211, 252, 0.28);
  background: rgba(8, 47, 73, 0.42);
  color: #dbeafe;
  padding: 7px 11px;
  font-size: 11px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-pane-badge[data-state="ready"],
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-pane-badge[data-state="approved"] {
  border-color: rgba(45, 212, 191, 0.4);
  color: #ccfbf1;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-pane-badge[data-state="review"] {
  border-color: rgba(250, 204, 21, 0.4);
  color: #fde68a;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-pane-badge[data-state="revision"] {
  border-color: rgba(248, 113, 113, 0.44);
  color: #fecaca;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-data-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  gap: 10px;
  align-content: start;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-builder-shell {
  flex: 1;
  height: 100%;
  min-height: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(480px, 600px);
  overflow: hidden;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-builder-chat-card,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-builder-preview-card {
  min-height: 0;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(8, 15, 28, 0.52);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  scrollbar-gutter: stable;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .main-sidebar-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .main-sidebar-actions .btn {
  min-height: 40px;
  font-size: 13px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .main-chat-head {
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .main-chat-title {
  display: grid;
  gap: 2px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .main-chat-title span {
  display: none;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-template-library {
  display: grid;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid rgba(125, 211, 252, 0.2);
  background: rgba(8, 15, 28, 0.36);
  padding: 10px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-template-library .main-template-list {
  max-height: clamp(120px, 16vh, 180px);
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-builder-preview-card .main-template-preview-card {
  flex: 1 1 auto;
  height: min(76vh, 920px);
  min-height: 0;
  max-height: calc(100vh - 248px);
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-builder-preview-card .main-template-preview-canvas {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  padding-right: 6px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-builder-preview-card .main-template-preview-a4 {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"]
  .project-builder-preview-card
  .main-template-preview-a4::-webkit-scrollbar {
  width: 10px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"]
  .project-builder-preview-card
  .main-template-preview-a4::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.12);
  border-radius: 999px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"]
  .project-builder-preview-card
  .main-template-preview-a4::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.76), rgba(59, 130, 246, 0.7));
  border-radius: 999px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-builder-preview-card .main-template-card-actions {
  display: none;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-builder-preview-card .main-template-card {
  padding: 12px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-builder-preview-card .main-preview-actions {
  gap: 8px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-builder-preview-card .main-preview-actions .btn {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 13px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-source-list {
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: #0f1724;
  overflow: auto;
  max-height: 160px;
  padding: 8px;
  display: grid;
  gap: 8px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .main-catalog-preview {
  max-height: clamp(260px, 34vh, 460px);
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .main-ai-suggestions {
  display: none !important;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .main-sidebar-file-pill {
  min-height: 42px;
  padding: 10px 12px;
  font-size: 13px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] #project-approval-status,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .main-list-window,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .main-list-search,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .main-folder-list,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .main-thread-list {
  display: none !important;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-source-card,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] #main-catalog-card {
  padding: 12px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-source-card .main-catalog-head,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] #main-catalog-card .main-catalog-head {
  align-items: center;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-source-card .main-catalog-head h3,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] #main-catalog-card .main-catalog-head h3 {
  font-size: 15px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-source-card .main-catalog-actions .btn,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] #main-catalog-card .main-catalog-actions .btn {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 12px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] #main-catalog-card .main-catalog-entry {
  gap: 10px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] #main-catalog-card .main-catalog-table-wrap {
  max-height: 240px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .main-chat-form {
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .main-chat-form #main-chat-input {
  min-height: 46px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-source-item {
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(2, 6, 23, 0.62);
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-source-item strong {
  color: #f8fafc;
  font-size: 13px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-source-item span {
  color: #7dd3fc;
  font-size: 11px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-source-item p {
  margin: 4px 0 0;
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.5;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home {
  display: grid;
  gap: 18px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-shell {
  display: grid;
  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
  gap: 18px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-ai,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-workspace {
  border-radius: 26px;
  border: 1px solid rgba(94, 234, 212, 0.22);
  background:
    radial-gradient(circle at 20% 10%, rgba(45, 212, 191, 0.12), transparent 38%),
    radial-gradient(circle at 82% 12%, rgba(59, 130, 246, 0.14), transparent 32%),
    linear-gradient(160deg, rgba(15, 23, 42, 0.96), rgba(9, 20, 32, 0.94));
  box-shadow: 0 32px 56px -42px rgba(13, 148, 136, 0.72);
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-ai {
  padding: 24px;
  display: grid;
  align-content: start;
  gap: 18px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-ai-head,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-toolbar,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-toolbar-actions,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-pill,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-state,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-count,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-item-type,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-item-foot strong {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-pill {
  border: 1px solid rgba(125, 211, 252, 0.34);
  background: rgba(7, 89, 133, 0.28);
  color: #c7f9ff;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-state {
  border: 1px solid rgba(74, 222, 128, 0.3);
  background: rgba(20, 83, 45, 0.32);
  color: #bbf7d0;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-brain {
  position: relative;
  min-height: 168px;
  border-radius: 28px;
  border: 1px solid rgba(125, 211, 252, 0.18);
  background:
    radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.14), transparent 36%),
    linear-gradient(180deg, rgba(8, 15, 28, 0.54), rgba(8, 15, 28, 0.18));
  overflow: hidden;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-brain-ring,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-brain-core {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-brain-ring {
  border: 1px solid rgba(125, 211, 252, 0.24);
  animation: projectBrainPulse 5.4s ease-in-out infinite;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-brain-ring.ring-a {
  width: 104px;
  height: 104px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-brain-ring.ring-b {
  width: 156px;
  height: 156px;
  animation-delay: 1.2s;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-brain-core {
  width: 54px;
  height: 54px;
  background: radial-gradient(circle at 35% 35%, #cffafe, #06b6d4 60%, #0f172a 100%);
  box-shadow: 0 0 36px rgba(34, 211, 238, 0.42);
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-kicker,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-toolbar-label {
  margin: 0;
  color: #8ce8ff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-copy h2 {
  margin: 10px 0 12px;
  color: #f8fafc;
  font-size: clamp(32px, 3vw, 48px);
  line-height: 1.02;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-copy p,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-hint p,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-item p,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-footer span {
  margin: 0;
  color: #abc0d6;
  font-size: 14px;
  line-height: 1.6;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-thoughts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-thoughts span,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-hint,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-item-metric,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-empty {
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(8, 15, 28, 0.54);
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-thoughts span {
  padding: 9px 12px;
  color: #d9f99d;
  font-size: 12px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-actions {
  margin-top: 2px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-hint {
  padding: 16px;
  display: grid;
  gap: 8px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-hint strong,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-toolbar h3 {
  color: #f8fafc;
  font-size: 22px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-workspace {
  padding: 18px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 16px;
  min-height: 0;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-count {
  border: 1px solid rgba(45, 212, 191, 0.34);
  background: rgba(13, 148, 136, 0.2);
  color: #ccfbf1;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-surface {
  min-height: 0;
  overflow: visible;
  border-radius: 24px;
  border: 1px solid rgba(125, 211, 252, 0.16);
  background:
    radial-gradient(circle at 12% 18%, rgba(34, 197, 94, 0.1), transparent 22%),
    radial-gradient(circle at 84% 12%, rgba(14, 165, 233, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(9, 16, 26, 0.78), rgba(11, 20, 32, 0.68));
  padding: 18px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 16px;
  align-content: start;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-item,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-empty {
  min-height: 270px;
  padding: 18px 16px 16px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-item {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 0;
  border: 1px solid rgba(125, 211, 252, 0.16);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(18, 34, 50, 0.72), rgba(7, 14, 24, 0.9)),
    radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.1), transparent 40%);
  color: inherit;
  text-align: left;
  display: grid;
  align-content: start;
  gap: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02), 0 18px 34px -28px rgba(15, 23, 42, 0.9);
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-item:hover,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-item.active {
  transform: translateY(-4px);
  border-color: rgba(45, 212, 191, 0.54);
  box-shadow: 0 28px 46px -30px rgba(45, 212, 191, 0.54);
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-item-frame {
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-folder-art {
  position: relative;
  width: 118px;
  height: 86px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-folder-tab,
body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-folder-body {
  position: absolute;
  left: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #fde68a, #f59e0b);
  box-shadow: inset 0 -8px 18px rgba(146, 64, 14, 0.16);
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-folder-tab {
  top: 6px;
  width: 52px;
  height: 22px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-folder-body {
  top: 20px;
  width: 118px;
  height: 64px;
  border-top-left-radius: 12px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-item-head {
  display: grid;
  gap: 6px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-item strong {
  color: #f8fafc;
  font-size: 20px;
  line-height: 1.08;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-item-type {
  width: fit-content;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(125, 211, 252, 0.24);
  background: rgba(7, 89, 133, 0.28);
  color: #a5f3fc;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-item-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-item-metric {
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-item-metric small {
  color: #7dd3fc;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-item-metric b {
  color: #f8fafc;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-item-foot {
  margin-top: auto;
  padding-top: 4px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-item-foot span {
  color: #94a3b8;
  font-size: 12px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-item-foot strong {
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(45, 212, 191, 0.34);
  background: rgba(15, 118, 110, 0.22);
  color: #ccfbf1;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  text-align: center;
  color: #b6c7db;
  font-size: 14px;
}

body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="main"] .customer-intel-panel,
body[data-page="app"][data-app-mode="main"] .main-customer-intel-card {
  border-radius: 24px;
  border: 1px solid rgba(94, 234, 212, 0.18);
  background:
    radial-gradient(circle at 16% 12%, rgba(34, 211, 238, 0.12), transparent 26%),
    radial-gradient(circle at 88% 14%, rgba(251, 191, 36, 0.1), transparent 24%),
    linear-gradient(160deg, rgba(8, 15, 28, 0.96), rgba(12, 20, 34, 0.94));
  box-shadow: 0 24px 48px -36px rgba(8, 145, 178, 0.58);
}

body[data-page="app"][data-app-mode="main"] .customer-intel-panel {
  padding: 16px;
  display: grid;
  gap: 14px;
}

body[data-page="app"][data-app-mode="main"] .customer-intel-panel-head,
body[data-page="app"][data-app-mode="main"] .main-customer-intel-head,
body[data-page="app"][data-app-mode="main"] .customer-intel-card-head,
body[data-page="app"][data-app-mode="main"] .customer-intel-actions,
body[data-page="app"][data-app-mode="main"] .customer-sheet-section-head,
body[data-page="app"][data-app-mode="main"] .customer-sheet-contact-actions,
body[data-page="app"][data-app-mode="main"] .customer-sheet-linked-meta,
body[data-page="app"][data-app-mode="main"] .main-customer-sheet-head,
body[data-page="app"][data-app-mode="main"] .main-customer-sheet-head-actions,
body[data-page="app"][data-app-mode="main"] .main-customer-sheet-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="main"] .customer-intel-eyebrow,
body[data-page="app"][data-app-mode="main"] .customer-intel-card-kicker,
body[data-page="app"][data-app-mode="main"] .main-customer-sheet-kicker {
  margin: 0;
  color: #7dd3fc;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="main"] .customer-intel-panel h4,
body[data-page="app"][data-app-mode="main"] .main-customer-intel-head h3,
body[data-page="app"][data-app-mode="main"] .customer-intel-card h4,
body[data-page="app"][data-app-mode="main"] .customer-sheet-hero h4 {
  margin: 6px 0 0;
  color: #f8fafc;
}

body[data-page="app"][data-app-mode="main"] .customer-intel-summary,
body[data-page="app"][data-app-mode="main"] .main-customer-intel-meta,
body[data-page="app"][data-app-mode="main"] .main-customer-sheet-head-copy p,
body[data-page="app"][data-app-mode="main"] .customer-sheet-section-head span {
  color: #9fb6cc;
  font-size: 13px;
  line-height: 1.5;
}

body[data-page="app"][data-app-mode="main"] .customer-intel-grid,
body[data-page="app"][data-app-mode="main"] .main-customer-intel-list {
  display: grid;
  gap: 14px;
}

body[data-page="app"][data-app-mode="main"] .customer-intel-grid-home {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-page="app"][data-app-mode="main"] .main-customer-intel-list {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

body[data-page="app"][data-app-mode="main"] .customer-intel-card,
body[data-page="app"][data-app-mode="main"] .customer-sheet-section,
body[data-page="app"][data-app-mode="main"] .customer-sheet-linked-card,
body[data-page="app"][data-app-mode="main"] .customer-sheet-meter-card,
body[data-page="app"][data-app-mode="main"] .customer-sheet-stats article,
body[data-page="app"][data-app-mode="main"] .customer-sheet-contact-list div,
body[data-page="app"][data-app-mode="main"] .customer-sheet-profile-grid div {
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(8, 15, 28, 0.6);
}

body[data-page="app"][data-app-mode="main"] .customer-intel-card {
  padding: 16px;
  display: grid;
  gap: 12px;
  cursor: pointer;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

body[data-page="app"][data-app-mode="main"] .customer-intel-card:hover,
body[data-page="app"][data-app-mode="main"] .customer-intel-card.active {
  transform: translateY(-3px);
  border-color: rgba(45, 212, 191, 0.42);
  box-shadow: 0 24px 40px -34px rgba(45, 212, 191, 0.48);
}

body[data-page="app"][data-app-mode="main"] .customer-intel-card-head h4,
body[data-page="app"][data-app-mode="main"] .customer-intel-card-head p {
  margin: 0;
}

body[data-page="app"][data-app-mode="main"] .customer-intel-pill-row,
body[data-page="app"][data-app-mode="main"] .customer-intel-tags,
body[data-page="app"][data-app-mode="main"] .customer-sheet-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page="app"][data-app-mode="main"] .customer-intel-pill,
body[data-page="app"][data-app-mode="main"] .customer-intel-tags span,
body[data-page="app"][data-app-mode="main"] .customer-sheet-pill,
body[data-page="app"][data-app-mode="main"] .customer-sheet-tag,
body[data-page="app"][data-app-mode="main"] .main-customer-sheet-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(125, 211, 252, 0.22);
  background: rgba(7, 89, 133, 0.22);
  color: #c7f9ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="main"] .customer-sheet-tag.muted {
  color: #94a3b8;
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 36, 0.6);
}

body[data-page="app"][data-app-mode="main"] .customer-intel-score-chip {
  min-width: 122px;
  border-radius: 18px;
  border: 1px solid rgba(125, 211, 252, 0.22);
  background: rgba(6, 78, 59, 0.34);
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

body[data-page="app"][data-app-mode="main"] .customer-intel-score-chip span,
body[data-page="app"][data-app-mode="main"] .customer-intel-stats article span,
body[data-page="app"][data-app-mode="main"] .customer-intel-meta-grid span,
body[data-page="app"][data-app-mode="main"] .customer-sheet-stats article span,
body[data-page="app"][data-app-mode="main"] .customer-sheet-contact-list span,
body[data-page="app"][data-app-mode="main"] .customer-sheet-profile-grid span,
body[data-page="app"][data-app-mode="main"] .customer-sheet-meter-card span {
  color: #8fb2c9;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="main"] .customer-intel-score-chip strong,
body[data-page="app"][data-app-mode="main"] .customer-intel-stats article strong,
body[data-page="app"][data-app-mode="main"] .customer-intel-meta-grid strong,
body[data-page="app"][data-app-mode="main"] .customer-sheet-stats article strong,
body[data-page="app"][data-app-mode="main"] .customer-sheet-contact-list strong,
body[data-page="app"][data-app-mode="main"] .customer-sheet-profile-grid strong,
body[data-page="app"][data-app-mode="main"] .customer-sheet-meter-card strong {
  color: #f8fafc;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}

body[data-page="app"][data-app-mode="main"] .customer-intel-contact-line {
  display: grid;
  gap: 4px;
  color: #d5e7f7;
  font-size: 13px;
}

body[data-page="app"][data-app-mode="main"] .customer-intel-stats,
body[data-page="app"][data-app-mode="main"] .customer-intel-meta-grid,
body[data-page="app"][data-app-mode="main"] .customer-sheet-stats,
body[data-page="app"][data-app-mode="main"] .customer-sheet-profile-grid,
body[data-page="app"][data-app-mode="main"] .customer-sheet-contact-list,
body[data-page="app"][data-app-mode="main"] .customer-sheet-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body[data-page="app"][data-app-mode="main"] .customer-intel-stats article,
body[data-page="app"][data-app-mode="main"] .customer-intel-meta-grid div,
body[data-page="app"][data-app-mode="main"] .customer-sheet-stats article,
body[data-page="app"][data-app-mode="main"] .customer-sheet-contact-list div,
body[data-page="app"][data-app-mode="main"] .customer-sheet-profile-grid div {
  padding: 12px;
  display: grid;
  gap: 4px;
}

body[data-page="app"][data-app-mode="main"] .customer-intel-meter-stack {
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="main"] .customer-intel-meter-stack > div {
  display: grid;
  gap: 6px;
}

body[data-page="app"][data-app-mode="main"] .customer-intel-meter-stack > div span {
  color: #8fb2c9;
  font-size: 12px;
}

body[data-page="app"][data-app-mode="main"] .customer-intel-meter {
  height: 11px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(125, 211, 252, 0.12);
  overflow: hidden;
}

body[data-page="app"][data-app-mode="main"] .customer-intel-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #2dd4bf);
}

body[data-page="app"][data-app-mode="main"] .customer-intel-meter.danger i {
  background: linear-gradient(90deg, #f59e0b, #ef4444);
}

body[data-page="app"][data-app-mode="main"] .customer-intel-activity {
  margin: 0;
  color: #d7e6f5;
  font-size: 13px;
  line-height: 1.55;
}

body[data-page="app"][data-app-mode="main"] .customer-intel-actions .btn,
body[data-page="app"][data-app-mode="main"] .customer-sheet-contact-actions .btn,
body[data-page="app"][data-app-mode="main"] .main-customer-sheet-footer .btn {
  min-height: 34px;
}

body[data-page="app"][data-app-mode="main"] .customer-intel-empty,
body[data-page="app"][data-app-mode="main"] .customer-sheet-empty {
  border-radius: 18px;
  border: 1px dashed rgba(148, 163, 184, 0.26);
  background: rgba(15, 23, 36, 0.52);
  color: #a7bed2;
  padding: 18px;
  font-size: 13px;
  line-height: 1.6;
}

body[data-page="app"][data-app-mode="main"] .main-customer-intel-card {
  padding: 14px;
  display: grid;
  gap: 12px;
}

body[data-page="app"][data-app-mode="main"] .main-customer-intel-head .btn {
  min-height: 34px;
}

body[data-page="app"][data-app-mode="main"] .main-customer-sheet {
  position: fixed;
  inset: 0;
  z-index: 440;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}

body[data-page="app"][data-app-mode="main"] .main-customer-sheet.show {
  display: flex;
}

body[data-page="app"][data-app-mode="main"] .main-customer-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.76);
  backdrop-filter: blur(4px);
}

body[data-page="app"][data-app-mode="main"] .main-customer-sheet-card {
  position: relative;
  width: min(1080px, 100%);
  border-radius: 24px;
  border: 1px solid rgba(94, 234, 212, 0.2);
  background:
    radial-gradient(circle at 18% 10%, rgba(34, 211, 238, 0.12), transparent 28%),
    linear-gradient(160deg, rgba(8, 15, 28, 0.98), rgba(12, 20, 34, 0.98));
  box-shadow: 0 40px 80px -48px rgba(2, 6, 23, 0.98);
  padding: 18px;
  display: grid;
  gap: 16px;
}

body[data-page="app"][data-app-mode="main"] .main-customer-sheet-head-copy {
  display: grid;
  gap: 4px;
}

body[data-page="app"][data-app-mode="main"] .main-customer-sheet-head-copy h3 {
  margin: 0;
  color: #f8fafc;
  font-size: 28px;
}

body[data-page="app"][data-app-mode="main"] .main-customer-sheet-status[data-state="busy"] {
  color: #bae6fd;
  border-color: rgba(56, 189, 248, 0.46);
}

body[data-page="app"][data-app-mode="main"] .main-customer-sheet-status[data-state="saved"] {
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, 0.38);
}

body[data-page="app"][data-app-mode="main"] .main-customer-sheet-status[data-state="error"] {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.45);
}

body[data-page="app"][data-app-mode="main"] .main-customer-sheet-close {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  width: 38px;
  height: 38px;
  background: rgba(15, 23, 36, 0.82);
  color: #d7e6f5;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

body[data-page="app"][data-app-mode="main"] .main-customer-sheet-body {
  display: grid;
  gap: 16px;
}

body[data-page="app"][data-app-mode="main"] .customer-sheet-hero,
body[data-page="app"][data-app-mode="main"] .customer-sheet-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.95fr);
  gap: 14px;
}

body[data-page="app"][data-app-mode="main"] .customer-sheet-hero-main,
body[data-page="app"][data-app-mode="main"] .customer-sheet-hero-meters {
  display: grid;
  gap: 12px;
}

body[data-page="app"][data-app-mode="main"] .customer-sheet-hero-main {
  border-radius: 24px;
  border: 1px solid rgba(125, 211, 252, 0.18);
  background: rgba(8, 15, 28, 0.68);
  padding: 18px;
}

body[data-page="app"][data-app-mode="main"] .customer-sheet-hero-main p {
  margin: 0;
  color: #c5d8ea;
  font-size: 14px;
  line-height: 1.6;
}

body[data-page="app"][data-app-mode="main"] .customer-sheet-hero-meters {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-page="app"][data-app-mode="main"] .customer-sheet-meter-card,
body[data-page="app"][data-app-mode="main"] .customer-sheet-section {
  padding: 16px;
  display: grid;
  gap: 12px;
}

body[data-page="app"][data-app-mode="main"] .customer-sheet-meter-card.risk {
  border-color: rgba(248, 113, 113, 0.18);
}

body[data-page="app"][data-app-mode="main"] .customer-sheet-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body[data-page="app"][data-app-mode="main"] .customer-sheet-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-page="app"][data-app-mode="main"] .customer-sheet-section.accent {
  border-color: rgba(45, 212, 191, 0.34);
  box-shadow: 0 18px 36px -34px rgba(45, 212, 191, 0.56);
}

body[data-page="app"][data-app-mode="main"] .customer-sheet-section h5,
body[data-page="app"][data-app-mode="main"] .customer-sheet-linked-card strong {
  margin: 0;
  color: #f8fafc;
  font-size: 16px;
}

body[data-page="app"][data-app-mode="main"] .customer-sheet-contact-list,
body[data-page="app"][data-app-mode="main"] .customer-sheet-profile-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-page="app"][data-app-mode="main"] .customer-sheet-profile-grid .wide {
  grid-column: 1 / -1;
}

body[data-page="app"][data-app-mode="main"] .customer-sheet-linked-list {
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="main"] .customer-sheet-linked-card p {
  margin: 0;
  color: #c4d7ea;
  font-size: 13px;
  line-height: 1.55;
}

body[data-page="app"][data-app-mode="main"] .customer-sheet-form-grid label {
  display: grid;
  gap: 6px;
}

body[data-page="app"][data-app-mode="main"] .customer-sheet-form-grid label span {
  color: #8fb2c9;
  font-size: 12px;
}

body[data-page="app"][data-app-mode="main"] .customer-sheet-form-grid .wide {
  grid-column: 1 / -1;
}

body[data-page="app"][data-app-mode="main"] .customer-sheet-form-grid input,
body[data-page="app"][data-app-mode="main"] .customer-sheet-form-grid select,
body[data-page="app"][data-app-mode="main"] .customer-sheet-form-grid textarea {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(11, 19, 33, 0.92);
  color: #e2e8f0;
  padding: 11px 12px;
  font-size: 14px;
}

body[data-page="app"][data-app-mode="main"] .customer-sheet-form-grid input:focus,
body[data-page="app"][data-app-mode="main"] .customer-sheet-form-grid select:focus,
body[data-page="app"][data-app-mode="main"] .customer-sheet-form-grid textarea:focus {
  outline: none;
  border-color: rgba(56, 189, 248, 0.82);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.16);
}

body[data-page="app"][data-app-mode="main"] .customer-sheet-form-grid textarea {
  resize: vertical;
  min-height: 110px;
}

@media (max-width: 1180px) {
  body[data-page="app"][data-app-mode="main"] .customer-intel-grid-home,
  body[data-page="app"][data-app-mode="main"] .customer-sheet-stats,
  body[data-page="app"][data-app-mode="main"] .customer-sheet-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  body[data-page="app"][data-app-mode="main"] .customer-intel-grid-home,
  body[data-page="app"][data-app-mode="main"] .customer-intel-stats,
  body[data-page="app"][data-app-mode="main"] .customer-intel-meta-grid,
  body[data-page="app"][data-app-mode="main"] .customer-sheet-hero,
  body[data-page="app"][data-app-mode="main"] .customer-sheet-grid,
  body[data-page="app"][data-app-mode="main"] .customer-sheet-contact-list,
  body[data-page="app"][data-app-mode="main"] .customer-sheet-profile-grid,
  body[data-page="app"][data-app-mode="main"] .customer-sheet-form-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  body[data-page="app"][data-app-mode="main"] .customer-sheet-hero-meters {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-page-stack {
  display: grid;
  gap: 14px;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-page-frame {
  display: grid;
  gap: 8px;
}

body[data-page="app"][data-app-mode="main"] .main-template-preview-page-badge {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.78);
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="main"] .project-wizard-card {
  max-width: 920px;
}

body[data-page="app"][data-app-mode="main"] .project-wizard-card textarea {
  min-height: 168px;
  resize: vertical;
}

@media (max-width: 1180px) {
  body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-shell,
  body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-studio-layout {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-builder-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-ai,
  body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-workspace,
  body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-surface {
    padding: 16px;
  }

  body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-desktop-copy h2 {
    font-size: 32px;
  }

  body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-list {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="main"][data-workspace-scope="project_generator"] .project-home-item-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-shell {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-ai,
  body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-workspace,
  body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-surface {
    padding: 16px;
  }

  body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-desktop-copy h2 {
    font-size: 32px;
  }

  body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-list {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="main"][data-workspace-scope="default"][data-workspace-theme="desktop"] .project-home-item-grid {
    grid-template-columns: 1fr;
  }
}

body[data-page="app"][data-app-mode="calendar"] .calendar-selection-actions {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-selection-actions .btn {
  min-height: 38px;
  padding: 0 12px;
  font-size: 12px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-selection-actions .btn:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-archive-card {
  border-radius: 12px;
  border: 1px solid rgba(248, 113, 113, 0.32);
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.66), rgba(15, 23, 42, 0.7));
  padding: 10px;
  display: grid;
  gap: 8px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-archive-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-archive-head strong {
  color: #f8fafc;
  font-size: 14px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-archive-head .btn {
  min-height: 34px;
  font-size: 12px;
  padding: 0 10px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-archive-head .btn:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-archive-list {
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow: auto;
  padding-right: 2px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-archive-empty {
  border-radius: 10px;
  border: 1px dashed rgba(148, 163, 184, 0.34);
  color: #94a3b8;
  background: rgba(15, 23, 42, 0.56);
  text-align: center;
  padding: 10px 8px;
  font-size: 12px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-archive-item {
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(15, 23, 42, 0.72);
  padding: 8px;
  display: grid;
  gap: 7px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-archive-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-archive-item-head strong {
  color: #f8fafc;
  font-size: 12px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-archive-item-head span {
  border-radius: 999px;
  border: 1px solid rgba(248, 113, 113, 0.42);
  color: #fecdd3;
  background: rgba(127, 29, 29, 0.28);
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-archive-item-list {
  display: grid;
  gap: 3px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-archive-item-list p {
  margin: 0;
  color: #cbd5e1;
  font-size: 11px;
  line-height: 1.3;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-archive-item-list em {
  color: #94a3b8;
  font-size: 11px;
  font-style: normal;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-archive-item-actions {
  display: flex;
  justify-content: flex-end;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-archive-delete {
  min-height: 32px;
  font-size: 11px;
  padding: 0 10px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-item-actions {
  align-items: center;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-select,
body[data-page="app"][data-app-mode="calendar"] .calendar-event-toggle {
  width: 18px;
  height: 18px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-select {
  accent-color: #f97316;
}

body[data-page="app"] .finora-global-reminder {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 160;
  width: min(420px, calc(100vw - 24px));
  border-radius: 16px;
  border: 1px solid rgba(248, 113, 113, 0.6);
  background: linear-gradient(150deg, rgba(127, 29, 29, 0.94), rgba(15, 23, 42, 0.96));
  box-shadow: 0 30px 56px -30px rgba(248, 113, 113, 0.88);
  padding: 12px;
  display: grid;
  gap: 10px;
  transform: translateY(10px) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

body[data-page="app"] .finora-global-reminder.is-visible {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

body[data-page="app"] .finora-global-reminder[hidden] {
  display: none !important;
  pointer-events: none !important;
}

body[data-page="app"] .finora-global-reminder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body[data-page="app"] .finora-global-reminder-head strong {
  color: #fff1f2;
  font-size: 16px;
  line-height: 1.2;
}

body[data-page="app"] .finora-global-reminder-head span {
  border-radius: 999px;
  border: 1px solid rgba(251, 113, 133, 0.64);
  background: rgba(127, 29, 29, 0.34);
  color: #ffe4e6;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 700;
}

body[data-page="app"] .finora-global-reminder p {
  margin: 0;
  color: #ffe4e6;
  font-size: 14px;
  line-height: 1.35;
}

body[data-page="app"] .finora-global-reminder-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 980px) {
  body[data-page="app"][data-app-mode="calendar"] .calendar-selection-bar {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  body[data-page="app"][data-app-mode="calendar"] .calendar-selection-actions {
    justify-self: stretch;
    width: 100%;
  }

  body[data-page="app"] .finora-global-reminder {
    right: 12px;
    left: 12px;
    width: auto;
    bottom: 12px;
  }
}

/* Calendar Day Zoom */
body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom {
  position: fixed;
  inset: 0;
  z-index: 140;
  background:
    radial-gradient(circle at 12% 10%, rgba(34, 197, 94, 0.16), transparent 38%),
    radial-gradient(circle at 84% 20%, rgba(239, 68, 68, 0.2), transparent 42%),
    rgba(2, 6, 23, 0.66);
  backdrop-filter: blur(6px);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.26s ease;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom.is-open {
  opacity: 1;
  pointer-events: auto;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-card {
  position: fixed;
  left: var(--calendar-zoom-left, 50%);
  top: var(--calendar-zoom-top, 50%);
  width: var(--calendar-zoom-width, 2px);
  height: var(--calendar-zoom-height, 2px);
  border-radius: var(--calendar-zoom-radius, 18px);
  border: 1px solid rgba(248, 113, 113, 0.5);
  background: linear-gradient(160deg, rgba(6, 14, 30, 0.96), rgba(2, 6, 23, 0.97));
  box-shadow: 0 34px 72px -36px rgba(248, 113, 113, 0.9);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
  padding: 14px;
  overflow: hidden;
  opacity: 0.98;
  transition:
    left 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease,
    opacity 0.3s ease;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom.is-open .calendar-day-zoom-card {
  opacity: 1;
  box-shadow: 0 44px 74px -40px rgba(248, 113, 113, 0.84);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-head {
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 4px 4px 8px;
  background: linear-gradient(180deg, rgba(5, 12, 26, 0.96), rgba(5, 12, 26, 0.76), transparent);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-copy {
  display: grid;
  gap: 2px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-copy strong {
  color: #f8fafc;
  font-size: clamp(21px, 2.4vw, 32px);
  line-height: 1.2;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-copy span {
  color: #fecdd3;
  font-size: 14px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 12px;
  padding: 4px 6px 10px 6px;
  position: relative;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-empty {
  border-radius: 12px;
  border: 1px dashed rgba(148, 163, 184, 0.34);
  background: rgba(15, 23, 42, 0.58);
  color: #94a3b8;
  text-align: center;
  padding: 16px;
  font-size: 13px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-item {
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  background: linear-gradient(145deg, rgba(8, 20, 44, 0.78), rgba(23, 37, 66, 0.72));
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px;
  box-shadow: 0 14px 34px -28px rgba(2, 6, 23, 0.95);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-item.is-done {
  opacity: 0.74;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-item.is-done .calendar-day-zoom-content-head strong {
  text-decoration: line-through;
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-order {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.64);
  background: linear-gradient(140deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.86));
  color: #e2e8f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  margin-top: 1px;
  z-index: 1;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-marker {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  align-content: start;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 30px;
  bottom: -12px;
  width: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.62);
  pointer-events: none;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-item.is-last .calendar-day-zoom-marker::after {
  display: none;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-marker-time {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.2;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-item.is-due .calendar-day-zoom-order {
  border-color: rgba(34, 197, 94, 0.82);
  background: linear-gradient(145deg, rgba(21, 128, 61, 0.92), rgba(34, 197, 94, 0.86));
  color: #ecfdf5;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.16), 0 0 16px rgba(34, 197, 94, 0.26);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-item.is-due .calendar-day-zoom-marker::after {
  background: rgba(34, 197, 94, 0.92);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.26);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-content {
  display: grid;
  gap: 7px;
  min-width: 0;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-content-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-content-head strong {
  color: #f8fafc;
  font-size: 16px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-content-head span {
  border-radius: 999px;
  border: 1px solid rgba(34, 197, 94, 0.54);
  background: rgba(21, 128, 61, 0.3);
  color: #bbf7d0;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-status {
  width: fit-content;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.46);
  background: rgba(15, 23, 42, 0.62);
  color: #cbd5e1;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-item.is-upcoming .calendar-day-zoom-status {
  border-color: rgba(34, 197, 94, 0.5);
  background: rgba(21, 128, 61, 0.2);
  color: #bbf7d0;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-item.is-now .calendar-day-zoom-status,
body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-item.is-overdue .calendar-day-zoom-status {
  border-color: rgba(239, 68, 68, 0.68);
  background: rgba(153, 27, 27, 0.3);
  color: #fecdd3;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-item.is-done .calendar-day-zoom-status {
  border-color: rgba(14, 165, 233, 0.55);
  background: rgba(14, 116, 144, 0.24);
  color: #bae6fd;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-content p {
  margin: 0;
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.4;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-note {
  color: #94a3b8;
  white-space: pre-wrap;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-item-actions {
  display: grid;
  gap: 6px;
  align-content: start;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-btn {
  min-height: 32px;
  border-radius: 9px;
  border: 1px solid rgba(148, 163, 184, 0.42);
  background: rgba(15, 23, 42, 0.66);
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 700;
  padding: 0 10px;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-btn:hover {
  transform: translateY(-1px);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-btn.is-done {
  border-color: rgba(34, 197, 94, 0.6);
  background: rgba(21, 128, 61, 0.32);
  color: #bbf7d0;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-btn.is-reopen {
  border-color: rgba(14, 165, 233, 0.62);
  background: rgba(14, 116, 144, 0.34);
  color: #bae6fd;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-btn.is-edit {
  border-color: rgba(148, 163, 184, 0.5);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-btn.is-delete {
  border-color: rgba(239, 68, 68, 0.58);
  color: #fecdd3;
  background: rgba(127, 29, 29, 0.34);
}

@media (max-width: 980px) {
  body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-card {
    padding: 10px;
    gap: 8px;
  }

  body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-item {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-item-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Calendar Theme Override: Green + Red */
body[data-page="app"][data-app-mode="calendar"] {
  --calendar-green: #22c55e;
  --calendar-green-soft: #86efac;
  --calendar-green-bg: rgba(21, 128, 61, 0.32);
  --calendar-red: #ef4444;
  --calendar-red-soft: #fca5a5;
  --calendar-red-bg: rgba(153, 27, 27, 0.3);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-shell {
  background:
    radial-gradient(circle at 9% 7%, rgba(239, 68, 68, 0.22), transparent 35%),
    radial-gradient(circle at 88% 12%, rgba(34, 197, 94, 0.22), transparent 34%),
    linear-gradient(180deg, #0a101f 0%, #050913 100%);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-topbar {
  border-color: rgba(239, 68, 68, 0.44);
  box-shadow: 0 22px 44px -34px rgba(34, 197, 94, 0.42);
}

body[data-page="app"][data-app-mode="calendar"] .btn.primary {
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  border-color: rgba(134, 239, 172, 0.65);
  box-shadow: 0 18px 34px -22px rgba(22, 163, 74, 0.9);
}

body[data-page="app"][data-app-mode="calendar"] .btn.ghost {
  border-color: rgba(239, 68, 68, 0.44);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-cell:hover {
  border-color: rgba(34, 197, 94, 0.76);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-cell.is-today {
  border-color: rgba(34, 197, 94, 0.92);
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.28);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-cell.is-selected {
  border-color: rgba(239, 68, 68, 0.96);
  background: linear-gradient(145deg, rgba(153, 27, 27, 0.28), rgba(22, 163, 74, 0.2));
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-count {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.96), rgba(34, 197, 94, 0.96));
}

body[data-page="app"][data-app-mode="calendar"] .calendar-detail-head span,
body[data-page="app"][data-app-mode="calendar"] .calendar-now-card-head span {
  color: var(--calendar-green-soft);
  border-color: rgba(34, 197, 94, 0.52);
  background: var(--calendar-green-bg);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-reminder-controls select {
  border-color: rgba(34, 197, 94, 0.45);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-reminder-row small,
body[data-page="app"][data-app-mode="calendar"] .calendar-event-reminder-meta {
  color: var(--calendar-red-soft);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-now-card.is-now,
body[data-page="app"][data-app-mode="calendar"] .calendar-event-item.is-now {
  border-color: rgba(239, 68, 68, 0.9);
  background: linear-gradient(140deg, rgba(153, 27, 27, 0.42), rgba(30, 41, 59, 0.72));
}

body[data-page="app"][data-app-mode="calendar"] .calendar-now-card.is-upcoming {
  border-color: rgba(34, 197, 94, 0.82);
  background: linear-gradient(140deg, rgba(20, 83, 45, 0.42), rgba(30, 41, 59, 0.72));
}

body[data-page="app"][data-app-mode="calendar"] .calendar-now-card.is-overdue,
body[data-page="app"][data-app-mode="calendar"] .calendar-event-item.is-overdue:not(.is-done) {
  border-color: rgba(239, 68, 68, 0.92);
  background: linear-gradient(145deg, rgba(127, 29, 29, 0.44), rgba(15, 23, 42, 0.74));
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-state-label {
  border-color: rgba(34, 197, 94, 0.45);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-item.is-now .calendar-event-state-label,
body[data-page="app"][data-app-mode="calendar"] .calendar-event-item.is-overdue:not(.is-done) .calendar-event-state-label {
  border-color: rgba(239, 68, 68, 0.84);
  color: var(--calendar-red-soft);
  background: var(--calendar-red-bg);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-time,
body[data-page="app"][data-app-mode="calendar"] .calendar-selected-count,
body[data-page="app"][data-app-mode="calendar"] .calendar-archive-item-head span,
body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-content-head span {
  border-color: rgba(34, 197, 94, 0.5);
  color: var(--calendar-green-soft);
  background: var(--calendar-green-bg);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-selection-bar,
body[data-page="app"][data-app-mode="calendar"] .calendar-archive-card,
body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-card {
  border-color: rgba(34, 197, 94, 0.38);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-archive-head .btn,
body[data-page="app"][data-app-mode="calendar"] .calendar-archive-delete,
body[data-page="app"][data-app-mode="calendar"] .calendar-event-delete {
  border-color: rgba(239, 68, 68, 0.5);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-edit {
  border-color: rgba(34, 197, 94, 0.52);
  color: #dcfce7;
}

/* Calendar Editor UI refresh (AI + larger controls) */
body[data-page="app"][data-app-mode="calendar"] .calendar-ai-card,
body[data-page="app"][data-app-mode="calendar"] .calendar-ai-chat-card,
body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-card,
body[data-page="app"][data-app-mode="calendar"] .calendar-event-form {
  max-width: 860px;
  width: 100%;
  justify-self: start;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-ai-card {
  border-radius: 14px;
  border: 1px solid rgba(34, 197, 94, 0.42);
  background: linear-gradient(145deg, rgba(20, 83, 45, 0.24), rgba(15, 23, 42, 0.72));
  padding: 12px;
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-ai-chat-card {
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.7), rgba(2, 6, 23, 0.74));
  padding: 10px;
  display: grid;
  gap: 8px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-card {
  border-radius: 18px;
  border: 1px solid rgba(248, 113, 113, 0.4);
  background:
    radial-gradient(circle at 84% 12%, rgba(251, 113, 133, 0.16), transparent 28%),
    linear-gradient(150deg, rgba(46, 9, 18, 0.92), rgba(15, 23, 42, 0.84));
  box-shadow: 0 24px 44px -34px rgba(248, 113, 113, 0.58);
  padding: 12px;
  display: grid;
  gap: 12px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-head {
  display: grid;
  gap: 3px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-head strong {
  color: #fff1f2;
  font-size: 17px;
  line-height: 1.18;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-head small {
  color: #fda4af;
  font-size: 13px;
  line-height: 1.35;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-current {
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-hero {
  border-radius: 16px;
  border: 1px solid rgba(248, 113, 113, 0.2);
  background: rgba(15, 23, 42, 0.58);
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-hero.is-active {
  border-color: rgba(248, 113, 113, 0.64);
  background:
    radial-gradient(circle at 12% 20%, rgba(251, 113, 133, 0.16), transparent 26%),
    linear-gradient(140deg, rgba(127, 29, 29, 0.58), rgba(15, 23, 42, 0.86));
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-hero-copy {
  display: grid;
  gap: 5px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-hero-copy span,
body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-hero-meta {
  color: #fecdd3;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-hero-copy strong {
  color: #fff7f7;
  font-size: 22px;
  line-height: 1.05;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-hero-copy p {
  margin: 0;
  color: #fbcfe8;
  font-size: 13px;
  line-height: 1.4;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-hero-meta {
  border-radius: 999px;
  border: 1px solid rgba(248, 113, 113, 0.34);
  background: rgba(127, 29, 29, 0.22);
  padding: 8px 10px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-summary-pill,
body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-summary-empty {
  border-radius: 12px;
  border: 1px solid rgba(248, 113, 113, 0.22);
  background: rgba(15, 23, 42, 0.54);
  padding: 9px 10px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-summary-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-summary-pill.is-today {
  border-color: rgba(248, 113, 113, 0.5);
  background: linear-gradient(140deg, rgba(127, 29, 29, 0.42), rgba(15, 23, 42, 0.74));
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-summary-pill strong {
  color: #fff1f2;
  font-size: 13px;
  font-weight: 800;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-summary-pill span,
body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-summary-empty {
  color: #fda4af;
  font-size: 12px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-form {
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-time-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-form input {
  min-height: 50px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(248, 113, 113, 0.44);
  background: rgba(2, 6, 23, 0.72);
  color: #fff7f7;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: center;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-form input::placeholder {
  color: rgba(253, 164, 175, 0.74);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-day {
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.58);
  padding: 10px 8px;
  display: grid;
  gap: 4px;
  justify-items: center;
  font: inherit;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-day:hover {
  transform: translateY(-1px);
  border-color: rgba(248, 113, 113, 0.42);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-day.is-selected {
  border-color: rgba(248, 113, 113, 0.8);
  background: linear-gradient(140deg, rgba(127, 29, 29, 0.56), rgba(30, 41, 59, 0.82));
  box-shadow: inset 0 0 0 1px rgba(251, 113, 133, 0.22);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-day.is-configured:not(.is-selected) {
  border-color: rgba(248, 113, 113, 0.42);
  background: linear-gradient(145deg, rgba(76, 5, 25, 0.34), rgba(15, 23, 42, 0.7));
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-day strong {
  color: #fff7f7;
  font-size: 13px;
  font-weight: 800;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-day span {
  color: #fecdd3;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-actions .btn {
  min-height: 44px;
  font-size: 14px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-status {
  margin: 0;
  min-height: 18px;
  color: #fda4af;
  font-size: 12px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-status[data-state="saved"] {
  color: #fecdd3;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-status[data-state="error"] {
  color: #fca5a5;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-status[data-state="warning"] {
  color: #fde68a;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-ai-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-ai-chat-head strong {
  color: #f8fafc;
  font-size: 14px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-ai-chat-head .btn {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-ai-chat-list {
  max-height: 190px;
  overflow: auto;
  display: grid;
  gap: 7px;
  padding-right: 2px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-ai-chat-empty {
  border-radius: 10px;
  border: 1px dashed rgba(148, 163, 184, 0.32);
  color: #94a3b8;
  text-align: center;
  padding: 10px;
  font-size: 12px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-ai-chat-message {
  width: fit-content;
  max-width: min(72%, 520px);
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  background: rgba(15, 23, 42, 0.72);
  padding: 8px 10px;
  display: grid;
  gap: 4px;
  word-break: break-word;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-ai-chat-message.user {
  justify-self: end;
  border-color: rgba(34, 197, 94, 0.48);
  background: linear-gradient(135deg, rgba(20, 83, 45, 0.48), rgba(14, 116, 144, 0.36));
}

body[data-page="app"][data-app-mode="calendar"] .calendar-ai-chat-message.bot {
  justify-self: start;
  border-color: rgba(239, 68, 68, 0.44);
  background: linear-gradient(135deg, rgba(127, 29, 29, 0.44), rgba(30, 41, 59, 0.62));
}

body[data-page="app"][data-app-mode="calendar"] .calendar-ai-chat-message p {
  margin: 0;
  color: #f8fafc;
  font-size: 13px;
  line-height: 1.35;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-ai-chat-message span {
  color: #cbd5e1;
  font-size: 11px;
  justify-self: end;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-ai-head {
  display: grid;
  gap: 3px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-ai-head strong {
  color: #f8fafc;
  font-size: 17px;
  line-height: 1.2;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-ai-head small {
  color: #86efac;
  font-size: 13px;
  line-height: 1.35;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-ai-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-ai-form input {
  min-height: 52px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(34, 197, 94, 0.5);
  background: rgba(2, 6, 23, 0.72);
  color: #f8fafc;
  font-size: 16px;
  font-weight: 600;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-ai-form input::placeholder {
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-ai-form .btn {
  min-height: 52px;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-ai-form .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-ai-status {
  margin: 0;
  min-height: 18px;
  color: #86efac;
  font-size: 13px;
  font-weight: 600;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-ai-status[data-state="error"] {
  color: #fca5a5;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-ai-status[data-state="warning"] {
  color: #fde68a;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-form {
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: linear-gradient(155deg, rgba(15, 23, 42, 0.62), rgba(2, 6, 23, 0.74));
  padding: 12px;
  gap: 10px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-cell {
  grid-template-rows: auto auto 1fr;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-cell.has-workhours {
  border-color: rgba(248, 113, 113, 0.46);
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-workhours {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(248, 113, 113, 0.46);
  background: rgba(127, 29, 29, 0.26);
  color: #fecdd3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-cell.has-workhours .calendar-day-preview {
  -webkit-line-clamp: 2;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-day-zoom-workhours {
  border-radius: 16px;
  border: 1px solid rgba(248, 113, 113, 0.52);
  background: linear-gradient(145deg, rgba(127, 29, 29, 0.44), rgba(15, 23, 42, 0.82));
  color: #fff1f2;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-form input,
body[data-page="app"][data-app-mode="calendar"] .calendar-event-form textarea {
  min-height: 52px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(2, 6, 23, 0.72);
  color: #f8fafc;
  font-size: 18px;
  line-height: 1.28;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-form .calendar-time-input {
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-form .calendar-event-title-input {
  min-height: 56px;
  font-size: 18px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-form textarea {
  min-height: 120px;
  padding: 12px 14px;
  resize: vertical;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-reminder-row {
  padding: 12px;
  border-radius: 14px;
  gap: 8px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-reminder-row label {
  font-size: 13px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-reminder-controls select {
  min-height: 48px;
  font-size: 17px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-reminder-row small {
  font-size: 13px;
}

body[data-page="app"][data-app-mode="calendar"] .calendar-event-actions .btn {
  min-height: 48px;
  font-size: 17px;
  font-weight: 700;
}

@media (max-width: 980px) {
  body[data-page="app"][data-app-mode="calendar"] .calendar-ai-form {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="calendar"] .calendar-ai-chat-message {
    max-width: 100%;
  }

  body[data-page="app"][data-app-mode="calendar"] .calendar-ai-card,
  body[data-page="app"][data-app-mode="calendar"] .calendar-ai-chat-card,
  body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-card,
  body[data-page="app"][data-app-mode="calendar"] .calendar-event-form {
    max-width: none;
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-time-grid,
  body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-summary {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-days {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body[data-page="app"][data-app-mode="calendar"] .calendar-workhours-hero {
    grid-template-columns: 1fr;
  }
}

body[data-page="app"][data-app-mode="receivables"] {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(167, 201, 87, 0.14), transparent 34%),
    linear-gradient(180deg, #efe6d7 0%, #f7f2e8 52%, #efe6d7 100%);
  color: #1f2937;
}

body[data-page="app"][data-app-mode="receivables"]::before {
  display: none;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-shell {
  min-height: 100vh;
  display: grid;
  gap: 18px;
  padding: 22px;
  background: transparent;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 18px 20px;
  border-radius: 24px;
  border: 1px solid rgba(107, 114, 128, 0.12);
  background: rgba(255, 252, 246, 0.92);
  box-shadow: 0 24px 44px -34px rgba(73, 58, 34, 0.35);
}

body[data-page="app"][data-app-mode="receivables"] .receivables-topbar h1 {
  margin: 6px 0 0;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.04;
  color: #142132;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-top-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 360px);
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  border: 1px solid rgba(107, 114, 128, 0.12);
  background:
    radial-gradient(circle at top left, rgba(167, 201, 87, 0.18), transparent 36%),
    linear-gradient(135deg, rgba(255, 252, 246, 0.96) 0%, rgba(247, 242, 232, 0.96) 100%);
  box-shadow: 0 32px 54px -40px rgba(73, 58, 34, 0.34);
}

body[data-page="app"][data-app-mode="receivables"] .receivables-hero-copy {
  display: grid;
  gap: 12px;
  max-width: 760px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-hero-kicker {
  margin: 0;
  color: #55714f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-hero h2 {
  margin: 0;
  color: #142132;
  font-size: clamp(34px, 4vw, 50px);
  line-height: 0.98;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-hero p {
  margin: 0;
  color: rgba(31, 41, 55, 0.82);
  font-size: 16px;
  line-height: 1.65;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  max-width: none;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-hero-badge {
  padding: 9px 13px;
  border-radius: 999px;
  border: 1px solid rgba(85, 113, 79, 0.18);
  background: rgba(255, 255, 255, 0.78);
  color: #395149;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-hero-panel {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(85, 113, 79, 0.16);
  background: rgba(255, 255, 255, 0.78);
}

body[data-page="app"][data-app-mode="receivables"] .receivables-hero-panel strong {
  font-size: 15px;
  color: #142132;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-hero-steps {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
  color: rgba(31, 41, 55, 0.82);
  font-size: 14px;
  line-height: 1.55;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-layout {
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) minmax(320px, 380px);
  gap: 18px;
  align-items: start;
  min-height: 0;
  height: auto;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-pane {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  overflow: visible;
  padding: 18px;
  border-radius: 26px;
  border: 1px solid rgba(107, 114, 128, 0.12);
  background: rgba(255, 252, 246, 0.92);
  box-shadow: 0 30px 54px -42px rgba(73, 58, 34, 0.24);
}

body[data-page="app"][data-app-mode="receivables"] .receivables-pane-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-pane-head h2 {
  margin: 0;
  color: #142132;
  font-size: 20px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-pane-head p,
body[data-page="app"][data-app-mode="receivables"] .receivables-pane-subtitle {
  margin: 6px 0 0;
  color: rgba(31, 41, 55, 0.68);
  font-size: 13px;
  line-height: 1.55;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-pane-note {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(85, 113, 79, 0.16);
  background: rgba(167, 201, 87, 0.12);
  color: #55714f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-sections {
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-section-card {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(107, 114, 128, 0.12);
  background: rgba(255, 255, 255, 0.76);
}

body[data-page="app"][data-app-mode="receivables"] .receivables-section-card.is-active {
  border-color: rgba(85, 113, 79, 0.2);
  background: linear-gradient(180deg, rgba(167, 201, 87, 0.14), rgba(255, 255, 255, 0.9));
}

body[data-page="app"][data-app-mode="receivables"] .receivables-section-card strong {
  color: #142132;
  font-size: 14px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-section-card span {
  color: rgba(31, 41, 55, 0.66);
  font-size: 12px;
  line-height: 1.45;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-stat {
  display: grid;
  gap: 6px;
  min-height: 106px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(107, 114, 128, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 242, 232, 0.96));
}

body[data-page="app"][data-app-mode="receivables"] .receivables-stat span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-stat strong {
  color: #142132;
  font-size: 24px;
  line-height: 1.1;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-upload-card,
body[data-page="app"][data-app-mode="receivables"] .receivables-tip-card,
body[data-page="app"][data-app-mode="receivables"] .receivables-check-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(107, 114, 128, 0.12);
  background: rgba(255, 255, 255, 0.76);
}

body[data-page="app"][data-app-mode="receivables"] .receivables-upload-card h3,
body[data-page="app"][data-app-mode="receivables"] .receivables-tip-card h3,
body[data-page="app"][data-app-mode="receivables"] .receivables-check-card h3 {
  margin: 0;
  color: #142132;
  font-size: 16px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-upload-card p,
body[data-page="app"][data-app-mode="receivables"] .receivables-tip-card p,
body[data-page="app"][data-app-mode="receivables"] .receivables-check-card p {
  margin: 0;
  color: rgba(31, 41, 55, 0.74);
  font-size: 13px;
  line-height: 1.6;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-block-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-upload-status {
  margin: 0;
  color: #6b7280;
  font-size: 13px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-list-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 132px 132px;
  gap: 14px;
  padding: 0 4px;
  color: #6b7280;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-upload-list,
body[data-page="app"][data-app-mode="receivables"] .receivables-list,
body[data-page="app"][data-app-mode="receivables"] .receivables-messages {
  display: grid;
  gap: 12px;
  min-height: 0;
  overflow: visible;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-upload-item,
body[data-page="app"][data-app-mode="receivables"] .receivable-item {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(107, 114, 128, 0.12);
  background: rgba(255, 255, 255, 0.88);
}

body[data-page="app"][data-app-mode="receivables"] .receivables-upload-item-head,
body[data-page="app"][data-app-mode="receivables"] .receivable-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-upload-item strong,
body[data-page="app"][data-app-mode="receivables"] .receivable-item strong {
  color: #142132;
  font-size: 16px;
  line-height: 1.24;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-upload-meta,
body[data-page="app"][data-app-mode="receivables"] .receivable-item p,
body[data-page="app"][data-app-mode="receivables"] .receivable-item-note,
body[data-page="app"][data-app-mode="receivables"] .receivable-item-meta-line {
  margin: 0;
  color: rgba(31, 41, 55, 0.7);
  font-size: 13px;
  line-height: 1.6;
}

body[data-page="app"][data-app-mode="receivables"] .receivable-item-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

body[data-page="app"][data-app-mode="receivables"] .receivable-item-field {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(107, 114, 128, 0.1);
  background: #f8f5ee;
}

body[data-page="app"][data-app-mode="receivables"] .receivable-item-field span {
  color: #6b7280;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="receivables"] .receivable-item-field strong {
  color: #142132;
  font-size: 13px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-upload-summary {
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(85, 113, 79, 0.14);
  background: #f6f9f0;
  color: rgba(31, 41, 55, 0.76);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
}

body[data-page="app"][data-app-mode="receivables"] {
  --document-upload-table-bg: rgba(255, 255, 255, 0.94);
  --document-upload-table-border: rgba(107, 114, 128, 0.12);
  --document-upload-table-head-copy: #142132;
  --document-upload-table-sub-copy: rgba(31, 41, 55, 0.64);
  --document-upload-table-cell-copy: #142132;
  --document-upload-table-row: rgba(248, 245, 238, 0.94);
  --document-upload-table-row-border: rgba(107, 114, 128, 0.1);
  --document-upload-table-scroll: rgba(248, 245, 238, 0.68);
}

body[data-page="app"][data-app-mode="receivables"] .receivables-upload-item-actions,
body[data-page="app"][data-app-mode="receivables"] .receivable-item-actions,
body[data-page="app"][data-app-mode="receivables"] .receivables-main-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-search {
  width: min(100%, 320px);
}

body[data-page="app"][data-app-mode="receivables"] .receivables-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-form.has-voice-input {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-form.has-tts-output {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-form.has-voice-input.has-tts-output {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-form.has-voice-input textarea {
  grid-column: 1 / -1;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-form.has-tts-output textarea {
  grid-column: 1 / -1;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-form textarea,
body[data-page="app"][data-app-mode="receivables"] .receivables-search input {
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(107, 114, 128, 0.18);
  background: rgba(255, 255, 255, 0.9);
  color: #142132;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-form textarea {
  min-height: 108px;
  padding: 14px 16px;
  resize: vertical;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-form textarea::placeholder,
body[data-page="app"][data-app-mode="receivables"] .receivables-search input::placeholder {
  color: #8b95a7;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-ai-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-ai-suggestion {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(85, 113, 79, 0.16);
  background: rgba(255, 255, 255, 0.9);
  color: #395149;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-message {
  max-width: 92%;
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 20px;
  line-height: 1.6;
  border: 1px solid rgba(107, 114, 128, 0.12);
}

body[data-page="app"][data-app-mode="receivables"] .receivables-message.user {
  margin-left: auto;
  background: #1f4f46;
  border-color: #1f4f46;
  color: #f8fafc;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-message.bot {
  background: #f6f9f0;
  color: #142132;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-message.system {
  background: #f4efe6;
  color: #5b6472;
  border-style: dashed;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-message-text {
  font-size: 14px;
  white-space: pre-wrap;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-message-meta {
  font-size: 11px;
  color: inherit;
  opacity: 0.7;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-empty,
body[data-page="app"][data-app-mode="receivables"] .receivable-empty {
  padding: 16px;
  border-radius: 18px;
  border: 1px dashed rgba(107, 114, 128, 0.16);
  background: rgba(255, 255, 255, 0.72);
  color: #6b7280;
  font-size: 13px;
  line-height: 1.6;
}

body[data-page="app"][data-app-mode="receivables"] .main-finance-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(107, 114, 128, 0.14);
  background: #eef2f7;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="receivables"] .main-finance-status[data-state="saved"] {
  background: #e8f3ea;
  border-color: #bfd9c5;
  color: #24533f;
}

body[data-page="app"][data-app-mode="receivables"] .main-finance-status[data-state="dirty"] {
  background: #fff1d7;
  border-color: #ead39e;
  color: #8a6315;
}

body[data-page="app"][data-app-mode="receivables"] .main-finance-status[data-state="error"] {
  background: #fde7e1;
  border-color: #f1c2b7;
  color: #8f3523;
}

body[data-page="app"][data-app-mode="receivables"] .btn.ghost,
body[data-page="app"][data-app-mode="receivables"] .btn.primary {
  min-height: 44px;
  border-radius: 14px;
}

body[data-page="app"][data-app-mode="receivables"] .btn.ghost {
  border-color: rgba(107, 114, 128, 0.16);
  background: rgba(255, 255, 255, 0.92);
  color: #142132;
}

body[data-page="app"][data-app-mode="receivables"] .btn.primary {
  border: none;
  background: #1f4f46;
  color: #f8fafc;
}

@media (max-width: 1260px) {
  body[data-page="app"][data-app-mode="receivables"] .receivables-layout {
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
  }

  body[data-page="app"][data-app-mode="receivables"] .receivables-ai-pane {
    grid-column: 1 / -1;
  }
}

@media (max-width: 920px) {
  body[data-page="app"][data-app-mode="receivables"] .receivables-shell {
    padding: 14px;
  }

  body[data-page="app"][data-app-mode="receivables"] .receivables-topbar,
  body[data-page="app"][data-app-mode="receivables"] .receivables-hero,
  body[data-page="app"][data-app-mode="receivables"] .receivables-pane {
    border-radius: 20px;
  }

  body[data-page="app"][data-app-mode="receivables"] .receivables-hero,
  body[data-page="app"][data-app-mode="receivables"] .receivables-layout,
  body[data-page="app"][data-app-mode="receivables"] .receivable-item-grid,
  body[data-page="app"][data-app-mode="receivables"] .receivables-form {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="receivables"] .receivables-list-head {
    display: none;
  }
}

body[data-page="app"][data-app-mode="workers"] {
  min-height: 100vh;
  background:
    radial-gradient(900px 480px at 0% 0%, rgba(242, 184, 75, 0.2), transparent 65%),
    radial-gradient(820px 520px at 100% 0%, rgba(27, 116, 214, 0.16), transparent 62%),
    linear-gradient(180deg, #f4efe5 0%, #eef3f7 100%);
  color: #102033;
}

body[data-page="app"][data-app-mode="workers"] .team-shell {
  max-width: 1520px;
  margin: 0 auto;
  padding: 24px;
}

body[data-page="app"][data-app-mode="workers"] .team-topbar,
body[data-page="app"][data-app-mode="workers"] .team-hero,
body[data-page="app"][data-app-mode="workers"] .team-sidebar,
body[data-page="app"][data-app-mode="workers"] .team-profile-card,
body[data-page="app"][data-app-mode="workers"] .team-section-card {
  border: 1px solid rgba(16, 32, 51, 0.1);
  box-shadow: 0 24px 60px -40px rgba(16, 32, 51, 0.25);
}

body[data-page="app"][data-app-mode="workers"] .team-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  border-radius: 26px;
  background: rgba(255, 251, 245, 0.86);
  backdrop-filter: blur(20px);
}

body[data-page="app"][data-app-mode="workers"] .team-brand,
body[data-page="app"][data-app-mode="workers"] .team-top-actions,
body[data-page="app"][data-app-mode="workers"] .team-profile-head,
body[data-page="app"][data-app-mode="workers"] .team-create-head,
body[data-page="app"][data-app-mode="workers"] .team-section-head,
body[data-page="app"][data-app-mode="workers"] .team-modal-head,
body[data-page="app"][data-app-mode="workers"] .team-desktop-editor-head {
  display: flex;
  align-items: center;
}

body[data-page="app"][data-app-mode="workers"] .team-brand,
body[data-page="app"][data-app-mode="workers"] .team-profile-head {
  gap: 16px;
}

body[data-page="app"][data-app-mode="workers"] .team-brand-mark,
body[data-page="worker"] .worker-profile-avatar-fallback,
body[data-page="app"][data-app-mode="workers"] .team-profile-avatar-fallback {
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: linear-gradient(135deg, #1a4d7f, #102033);
  color: #f8fafc;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="workers"] .team-brand-mark {
  width: 56px;
  height: 56px;
  font-size: 22px;
}

body[data-page="app"][data-app-mode="workers"] .team-kicker,
body[data-page="worker"] .worker-company {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #61758d;
}

body[data-page="app"][data-app-mode="workers"] .team-topbar h1,
body[data-page="worker"] .worker-topbar-copy h2 {
  font-size: 1.6rem;
}

body[data-page="app"][data-app-mode="workers"] .team-top-actions {
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

body[data-page="app"][data-app-mode="workers"] .team-user-pill,
body[data-page="worker"] .worker-profile-pill {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(16, 32, 51, 0.1);
  font-weight: 600;
}

body[data-page="app"][data-app-mode="workers"] .team-hero {
  margin-top: 24px;
  padding: 28px;
  border-radius: 32px;
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 214, 140, 0.42), transparent 44%),
    linear-gradient(135deg, rgba(255, 252, 247, 0.98), rgba(238, 245, 250, 0.98));
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 440px);
  gap: 24px;
}

body[data-page="app"][data-app-mode="workers"] .team-hero-copy h2 {
  margin: 18px 0 10px;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.04;
}

body[data-page="app"][data-app-mode="workers"] .team-company-inline-card {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin-bottom: 18px;
  padding: 18px 20px;
  border-radius: 24px;
  border: 1px solid rgba(16, 32, 51, 0.08);
  background:
    radial-gradient(circle at 12% 16%, rgba(34, 211, 238, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(245, 250, 255, 0.84));
}

body[data-page="app"][data-app-mode="workers"] .team-company-inline-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #61758d;
}

body[data-page="app"][data-app-mode="workers"] .team-company-inline-name {
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  color: inherit;
  font: inherit;
  font-size: clamp(2rem, 3.8vw, 3.6rem);
  line-height: 0.94;
  letter-spacing: -0.05em;
  font-weight: 800;
  cursor: pointer;
}

body[data-page="app"][data-app-mode="workers"] .team-company-inline-name:hover {
  color: #0891b2;
}

body[data-page="app"][data-app-mode="workers"] .team-company-inline-name:focus-visible {
  outline: 2px solid rgba(8, 145, 178, 0.36);
  outline-offset: 8px;
}

body[data-page="app"][data-app-mode="workers"] .team-company-inline-form {
  width: min(420px, 100%);
  display: grid;
  gap: 12px;
}

body[data-page="app"][data-app-mode="workers"] .team-company-inline-form label {
  display: grid;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

body[data-page="app"][data-app-mode="workers"] .team-company-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body[data-page="app"][data-app-mode="workers"] .team-hero-copy p,
body[data-page="app"][data-app-mode="workers"] .team-profile-copy p,
body[data-page="worker"] .worker-login-copy p,
body[data-page="worker"] .worker-profile-copy p {
  color: #53687f;
  line-height: 1.6;
}

body[data-page="app"][data-app-mode="workers"] .team-hero-stats,
body[data-page="app"][data-app-mode="workers"] .team-profile-stats,
body[data-page="worker"] .worker-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

body[data-page="app"][data-app-mode="workers"] .team-hero-stats article,
body[data-page="app"][data-app-mode="workers"] .team-profile-stats article,
body[data-page="worker"] .worker-quick-grid article {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(16, 32, 51, 0.08);
}

body[data-page="app"][data-app-mode="workers"] .team-hero-stats strong,
body[data-page="app"][data-app-mode="workers"] .team-profile-stats strong,
body[data-page="worker"] .worker-quick-grid strong {
  font-size: 1.15rem;
}

body[data-page="app"][data-app-mode="workers"] .team-create-card {
  display: grid;
  gap: 14px;
  padding: 22px;
  border-radius: 28px;
  background: #14273d;
  color: #eff6ff;
}

body[data-page="app"][data-app-mode="workers"] .team-create-security,
body[data-page="worker"] .worker-security-form {
  display: grid;
  gap: 12px;
}

body[data-page="app"][data-app-mode="workers"] .team-create-card label,
body[data-page="app"][data-app-mode="workers"] .team-profile-form label,
body[data-page="app"][data-app-mode="workers"] .team-workforce-panel label,
body[data-page="app"][data-app-mode="workers"] .team-modal-grid label,
body[data-page="app"][data-app-mode="workers"] .team-credentials-fields label,
body[data-page="worker"] .worker-login-card label,
body[data-page="worker"] .worker-security-form label {
  display: grid;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

body[data-page="app"][data-app-mode="workers"] .team-create-card input,
body[data-page="app"][data-app-mode="workers"] .team-profile-form input,
body[data-page="app"][data-app-mode="workers"] .team-profile-form select,
body[data-page="app"][data-app-mode="workers"] .team-rank-builder input,
body[data-page="app"][data-app-mode="workers"] .team-workforce-card input,
body[data-page="app"][data-app-mode="workers"] .team-calendar-form input,
body[data-page="app"][data-app-mode="workers"] .team-section-head input[type="date"],
body[data-page="app"][data-app-mode="workers"] .team-modal-card input,
body[data-page="app"][data-app-mode="workers"] textarea,
body[data-page="worker"] .worker-login-card input,
body[data-page="worker"] .worker-calendar-form input,
body[data-page="worker"] .worker-security-form input,
body[data-page="worker"] .worker-panel-head input[type="date"],
body[data-page="worker"] textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(16, 32, 51, 0.12);
  background: rgba(255, 255, 255, 0.96);
  color: #102033;
  font: inherit;
}

body[data-page="app"][data-app-mode="workers"] .team-create-card input {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}

body[data-page="app"][data-app-mode="workers"] .team-create-card input[readonly],
body[data-page="app"][data-app-mode="workers"] .team-profile-form input[readonly],
body[data-page="app"][data-app-mode="workers"] .team-modal-card input[readonly],
body[data-page="worker"] .worker-security-form input[readonly] {
  opacity: 0.78;
  cursor: default;
}

body[data-page="app"][data-app-mode="workers"] .team-create-card input::placeholder {
  color: rgba(248, 250, 252, 0.62);
}

body[data-page="app"][data-app-mode="workers"] .team-create-actions,
body[data-page="app"][data-app-mode="workers"] .team-profile-actions,
body[data-page="app"][data-app-mode="workers"] .team-desktop-actions,
body[data-page="app"][data-app-mode="workers"] .team-modal-actions,
body[data-page="app"][data-app-mode="workers"] .team-desktop-editor-actions,
body[data-page="worker"] .worker-profile-actions,
body[data-page="worker"] .worker-logbook-actions,
body[data-page="worker"] .worker-topbar-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="workers"] .team-inline-status,
body[data-page="worker"] .worker-inline-status {
  min-height: 24px;
  font-size: 13px;
  color: #63788f;
}

body[data-page="app"][data-app-mode="workers"] .team-inline-status[data-state="error"],
body[data-page="worker"] .worker-inline-status[data-state="error"] {
  color: #b42318;
}

body[data-page="app"][data-app-mode="workers"] .team-inline-status[data-state="saved"],
body[data-page="worker"] .worker-inline-status[data-state="saved"] {
  color: #157347;
}

body[data-page="app"][data-app-mode="workers"] .team-inline-status[data-state="warning"],
body[data-page="worker"] .worker-inline-status[data-state="warning"] {
  color: #b45309;
}

body[data-page="app"][data-app-mode="workers"] .team-main {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 22px;
}

body[data-page="app"][data-app-mode="workers"] .team-sidebar,
body[data-page="app"][data-app-mode="workers"] .team-profile-card,
body[data-page="app"][data-app-mode="workers"] .team-section-card {
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
}

body[data-page="app"][data-app-mode="workers"] .team-sidebar {
  padding: 18px;
  align-self: start;
  position: sticky;
  top: 24px;
}

body[data-page="app"][data-app-mode="workers"] .team-sidebar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

body[data-page="app"][data-app-mode="workers"] .team-search-field {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  color: inherit;
}

body[data-page="app"][data-app-mode="workers"] .team-search-field input {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(16, 32, 51, 0.12);
  background: rgba(255, 255, 255, 0.94);
  color: #102033;
  font: inherit;
}

body[data-page="app"][data-app-mode="workers"] .team-groups-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  margin-bottom: 14px;
  border-radius: 24px;
  border: 1px solid rgba(16, 32, 51, 0.08);
  background:
    radial-gradient(circle at 100% 0%, rgba(34, 211, 238, 0.08), transparent 28%),
    rgba(255, 255, 255, 0.84);
  box-shadow: 0 18px 34px -30px rgba(15, 23, 42, 0.18);
}

body[data-page="app"][data-app-mode="workers"] .team-groups-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

body[data-page="app"][data-app-mode="workers"] .team-groups-head > div {
  display: grid;
  gap: 4px;
}

body[data-page="app"][data-app-mode="workers"] .team-groups-head strong {
  color: #102033;
}

body[data-page="app"][data-app-mode="workers"] .team-groups-head span {
  color: #61758d;
  line-height: 1.5;
  font-size: 13px;
}

body[data-page="app"][data-app-mode="workers"] .team-group-create-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

body[data-page="app"][data-app-mode="workers"] .team-group-create-field {
  display: grid;
  gap: 6px;
}

body[data-page="app"][data-app-mode="workers"] .team-group-create-field span {
  color: #61758d;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="workers"] .team-group-create-form input,
body[data-page="app"][data-app-mode="workers"] .team-group-field input {
  min-height: 44px;
  border-radius: 16px;
  border: 1px solid rgba(16, 32, 51, 0.08);
  background: rgba(255, 255, 255, 0.92);
  padding: 0 14px;
}

body[data-page="app"][data-app-mode="workers"] .team-group-list {
  display: grid;
  gap: 12px;
}

body[data-page="app"][data-app-mode="workers"] .team-group-empty {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px dashed rgba(16, 32, 51, 0.12);
  color: #61758d;
  background: rgba(255, 255, 255, 0.66);
}

body[data-page="app"][data-app-mode="workers"] .team-group-item {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(16, 32, 51, 0.08);
  background: rgba(255, 255, 255, 0.92);
}

body[data-page="app"][data-app-mode="workers"] .team-group-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="workers"] .team-group-handle {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(34, 211, 238, 0.18);
  background: rgba(34, 211, 238, 0.1);
  color: #0f4c5c;
  font-size: 12px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="workers"] .team-group-field {
  display: grid;
  gap: 6px;
}

body[data-page="app"][data-app-mode="workers"] .team-group-field span {
  color: #61758d;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="workers"] .team-group-members {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body[data-page="app"][data-app-mode="workers"] .team-group-member {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 16px;
  border: 1px solid rgba(16, 32, 51, 0.08);
  background: rgba(244, 248, 252, 0.94);
  color: #102033;
  font-size: 13px;
}

body[data-page="app"][data-app-mode="workers"] .team-group-member.is-empty {
  color: #61758d;
  justify-content: center;
}

body[data-page="app"][data-app-mode="workers"] .team-group-item-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="workers"] .team-group-item-meta span,
body[data-page="app"][data-app-mode="workers"] .team-group-item-meta small {
  color: #61758d;
  line-height: 1.5;
}

body[data-page="app"][data-app-mode="workers"] .team-group-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 720px) {
  body[data-page="app"][data-app-mode="workers"] .team-group-create-form {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="workers"] .team-group-members {
    grid-template-columns: 1fr;
  }
}

body[data-page="app"][data-app-mode="workers"] .team-worker-grid {
  display: grid;
  gap: 12px;
}

body[data-page="app"][data-app-mode="workers"] .team-worker-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(16, 32, 51, 0.08);
  border-radius: 22px;
  background: rgba(250, 252, 254, 0.92);
  text-align: left;
  cursor: pointer;
}

body[data-page="app"][data-app-mode="workers"] .team-worker-card.is-active {
  border-color: rgba(26, 77, 127, 0.4);
  background: rgba(227, 238, 249, 0.96);
}

body[data-page="app"][data-app-mode="workers"] .team-worker-photo,
body[data-page="worker"] .worker-profile-avatar-wrap {
  width: 64px;
  height: 64px;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(135deg, #dae8f4, #eef3f7);
}

body[data-page="app"][data-app-mode="workers"] .team-worker-photo img,
body[data-page="worker"] .worker-profile-avatar-wrap img,
body[data-page="app"][data-app-mode="workers"] .team-profile-avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-page="app"][data-app-mode="workers"] .team-worker-photo span,
body[data-page="worker"] .worker-profile-avatar-fallback,
body[data-page="app"][data-app-mode="workers"] .team-profile-avatar-fallback {
  width: 100%;
  height: 100%;
  font-size: 22px;
}

body[data-page="app"][data-app-mode="workers"] .team-worker-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body[data-page="app"][data-app-mode="workers"] .team-worker-copy strong,
body[data-page="worker"] .worker-profile-copy strong {
  font-size: 1.05rem;
}

body[data-page="app"][data-app-mode="workers"] .team-worker-copy span,
body[data-page="app"][data-app-mode="workers"] .team-worker-copy small,
body[data-page="app"][data-app-mode="workers"] .team-section-head span,
body[data-page="worker"] .worker-panel-head span,
body[data-page="worker"] .worker-chat-head span,
body[data-page="worker"] .worker-login-card-head span {
  color: #61758d;
  line-height: 1.5;
}

body[data-page="app"][data-app-mode="workers"] .team-detail {
  min-height: 720px;
}

body[data-page="app"][data-app-mode="workers"] .team-empty-state,
body[data-page="app"][data-app-mode="workers"] .team-list-empty,
body[data-page="worker"] .worker-list-empty {
  display: grid;
  gap: 8px;
  place-items: start;
  padding: 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px dashed rgba(16, 32, 51, 0.16);
  color: #61758d;
}

body[data-page="app"][data-app-mode="workers"] .team-detail-body {
  display: grid;
  gap: 22px;
}

body[data-page="app"][data-app-mode="workers"] .team-profile-card,
body[data-page="worker"] .worker-profile-card {
  padding: 22px;
}

body[data-page="app"][data-app-mode="workers"] .team-profile-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

body[data-page="app"][data-app-mode="workers"] .team-profile-avatar-wrap {
  width: 88px;
  height: 88px;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(135deg, #dae8f4, #eef3f7);
}

body[data-page="app"][data-app-mode="workers"] .team-profile-avatar-fallback,
body[data-page="worker"] .worker-profile-avatar-fallback {
  font-size: 28px;
}

body[data-page="app"][data-app-mode="workers"] .team-profile-copy {
  flex: 1;
  display: grid;
  gap: 6px;
}

body[data-page="app"][data-app-mode="workers"] .team-profile-meta {
  font-size: 13px;
  color: #61758d;
}

body[data-page="app"][data-app-mode="workers"] .team-profile-form,
body[data-page="app"][data-app-mode="workers"] .team-calendar-form,
body[data-page="app"][data-app-mode="workers"] .team-modal-grid,
body[data-page="app"][data-app-mode="workers"] .team-credentials-fields,
body[data-page="worker"] .worker-login-card,
body[data-page="worker"] .worker-calendar-form,
body[data-page="worker"] .worker-chat-form,
body[data-page="worker"] .worker-security-form {
  display: grid;
  gap: 12px;
}

body[data-page="worker"] .worker-chat-form.has-voice-input {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
}

body[data-page="worker"] .worker-chat-form.has-tts-output {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
}

body[data-page="worker"] .worker-chat-form.has-voice-input.has-tts-output {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}

body[data-page="app"][data-app-mode="workers"] .team-profile-form {
  margin-top: 18px;
  grid-template-columns: minmax(0, 1.1fr) 200px 220px auto;
  align-items: end;
}

body[data-page="app"][data-app-mode="workers"] .team-rank-builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

body[data-page="app"][data-app-mode="workers"] .team-rank-builder label {
  display: grid;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

body[data-page="app"][data-app-mode="workers"] .team-rank-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body[data-page="app"][data-app-mode="workers"] .team-rank-chip,
body[data-page="app"][data-app-mode="workers"] .team-worker-rank,
body[data-page="app"][data-app-mode="workers"] .team-rank-badge,
body[data-page="worker"] .worker-rank-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(34, 211, 238, 0.2);
  background: rgba(34, 211, 238, 0.1);
  color: #0f4c5c;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

body[data-page="app"][data-app-mode="workers"] .team-rank-chip.is-empty {
  border-style: dashed;
  color: #61758d;
  background: rgba(255, 255, 255, 0.7);
}

body[data-page="app"][data-app-mode="workers"] .team-worker-copy .team-worker-rank {
  justify-self: start;
}

body[data-page="app"][data-app-mode="workers"] .team-section-card {
  padding: 22px;
  display: grid;
  gap: 16px;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-form,
body[data-page="worker"] .worker-calendar-form {
  grid-template-columns: 120px 120px minmax(0, 1fr) minmax(0, 1fr) auto;
}

body[data-page="app"][data-app-mode="workers"] .calendar-submit-button,
body[data-page="worker"] .calendar-submit-button {
  appearance: none;
  min-height: 44px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 204px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: linear-gradient(180deg, #ff4a3f 0%, #ef382f 100%);
  box-shadow: 0 18px 30px -20px rgba(239, 56, 47, 0.9);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease,
    background 0.18s ease;
}

body[data-page="app"][data-app-mode="workers"] .calendar-submit-button:hover,
body[data-page="worker"] .calendar-submit-button:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #ff5a50 0%, #e5332b 100%);
  box-shadow: 0 22px 34px -20px rgba(239, 56, 47, 1);
}

body[data-page="app"][data-app-mode="workers"] .calendar-submit-button:hover .calendar-submit-icon,
body[data-page="worker"] .calendar-submit-button:hover .calendar-submit-icon {
  animation: calendar-submit-slope 0.9s linear infinite;
}

body[data-page="app"][data-app-mode="workers"] .calendar-submit-button:focus-visible,
body[data-page="worker"] .calendar-submit-button:focus-visible {
  outline: 2px solid rgba(255, 74, 63, 0.36);
  outline-offset: 3px;
}

body[data-page="app"][data-app-mode="workers"] .calendar-submit-button:disabled,
body[data-page="worker"] .calendar-submit-button:disabled {
  cursor: not-allowed;
  transform: none;
  opacity: 0.72;
  box-shadow: none;
}

body[data-page="app"][data-app-mode="workers"] .calendar-submit-button-full,
body[data-page="worker"] .calendar-submit-button-full {
  width: 100%;
}

body[data-page="app"][data-app-mode="workers"] .calendar-submit-icon,
body[data-page="worker"] .calendar-submit-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}

body[data-page="app"][data-app-mode="workers"] .calendar-submit-label,
body[data-page="worker"] .calendar-submit-label {
  color: #fff;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-list,
body[data-page="worker"] .worker-calendar-list {
  display: grid;
  gap: 12px;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-item,
body[data-page="worker"] .worker-calendar-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 20px;
  background: #f7fafc;
  border: 1px solid rgba(16, 32, 51, 0.08);
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-item div,
body[data-page="worker"] .worker-calendar-item div {
  display: grid;
  gap: 4px;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-item-actions,
body[data-page="worker"] .worker-calendar-item-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-title-row,
body[data-page="worker"] .worker-calendar-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-title-row strong,
body[data-page="worker"] .worker-calendar-title-row strong {
  min-width: 0;
  font-size: 15px;
  line-height: 1.35;
}

body[data-page="app"][data-app-mode="workers"] .calendar-complete-toggle,
body[data-page="worker"] .calendar-complete-toggle {
  --calendar-complete-stroke: #4f29f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  cursor: pointer;
}

body[data-page="app"][data-app-mode="workers"] .calendar-complete-toggle input,
body[data-page="worker"] .calendar-complete-toggle input {
  display: none;
}

body[data-page="app"][data-app-mode="workers"] .calendar-complete-toggle svg,
body[data-page="worker"] .calendar-complete-toggle svg {
  width: 26px;
  height: 26px;
  overflow: visible;
}

body[data-page="app"][data-app-mode="workers"] .calendar-complete-path,
body[data-page="worker"] .calendar-complete-path {
  fill: none;
  stroke: var(--calendar-complete-stroke);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-dasharray 0.5s ease, stroke-dashoffset 0.5s ease;
  stroke-dasharray: 241 9999999;
  stroke-dashoffset: 0;
}

body[data-page="app"][data-app-mode="workers"] .calendar-complete-toggle input:checked ~ svg .calendar-complete-path,
body[data-page="worker"] .calendar-complete-toggle input:checked ~ svg .calendar-complete-path {
  stroke-dasharray: 70.5096664428711 9999999;
  stroke-dashoffset: -262.2723388671875;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .calendar-complete-toggle,
body[data-page="worker"][data-theme="dark"] .calendar-complete-toggle {
  --calendar-complete-stroke: #a78bfa;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-copy-head,
body[data-page="worker"] .worker-calendar-zoom-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-state-badge,
body[data-page="worker"] .worker-calendar-zoom-state {
  flex: 0 0 auto;
}

body[data-page="app"][data-app-mode="workers"] .team-section-split {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 22px;
}

body[data-page="app"][data-app-mode="workers"] .team-logbook-days,
body[data-page="worker"] .worker-logbook-days {
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="workers"] .team-logbook-day,
body[data-page="worker"] .worker-logbook-day {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(16, 32, 51, 0.08);
  background: #f9fbfd;
  text-align: left;
  cursor: pointer;
}

body[data-page="app"][data-app-mode="workers"] .team-logbook-day.is-active,
body[data-page="worker"] .worker-logbook-day.is-active {
  border-color: rgba(26, 77, 127, 0.34);
  background: #eaf2fa;
}

body[data-page="app"][data-app-mode="workers"] .team-desktop-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
}

body[data-page="app"][data-app-mode="workers"] .team-desktop-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: #61758d;
}

body[data-page="app"][data-app-mode="workers"] .team-desktop-breadcrumb button {
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

body[data-page="app"][data-app-mode="workers"] .team-desktop-grid {
  min-height: 420px;
  padding: 18px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.18), transparent 36%),
    linear-gradient(135deg, #18446f, #102033 78%);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 14px;
  align-content: start;
}

body[data-page="app"][data-app-mode="workers"] .team-desktop-icon {
  display: grid;
  gap: 6px;
  justify-items: start;
  align-content: start;
  min-height: 120px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
  text-align: left;
  cursor: pointer;
}

body[data-page="app"][data-app-mode="workers"] .team-desktop-icon.is-active {
  border-color: rgba(255, 214, 140, 0.54);
  background: rgba(255, 214, 140, 0.16);
}

body[data-page="app"][data-app-mode="workers"] .team-desktop-icon-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

body[data-page="app"][data-app-mode="workers"] .team-desktop-inspector {
  display: grid;
  gap: 12px;
  align-content: start;
}

body[data-page="app"][data-app-mode="workers"] .team-desktop-editor,
body[data-page="app"][data-app-mode="workers"] .team-desktop-empty,
body[data-page="worker"] .worker-chat-shell,
body[data-page="worker"] .worker-login-card,
body[data-page="worker"] .worker-profile-card,
body[data-page="worker"] .worker-panel {
  padding: 18px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(16, 32, 51, 0.08);
}

body[data-page="app"][data-app-mode="workers"] .team-desktop-preview {
  display: grid;
  gap: 12px;
  color: #53687f;
}

body[data-page="app"][data-app-mode="workers"] .team-desktop-preview img {
  width: 100%;
  border-radius: 20px;
  border: 1px solid rgba(16, 32, 51, 0.08);
}

body[data-page="app"][data-app-mode="workers"] .team-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.44);
  backdrop-filter: blur(12px);
}

body[data-page="app"][data-app-mode="workers"] .team-modal-card {
  width: min(720px, 100%);
  padding: 24px;
  border-radius: 28px;
  background: #fdfaf5;
  border: 1px solid rgba(16, 32, 51, 0.1);
  box-shadow: 0 30px 80px -46px rgba(16, 32, 51, 0.35);
  display: grid;
  gap: 18px;
}

body[data-page="app"][data-app-mode="workers"] .team-modal-head,
body[data-page="worker"] .worker-topbar,
body[data-page="worker"] .worker-chat-head,
body[data-page="worker"] .worker-panel-head {
  justify-content: space-between;
  gap: 14px;
}

body[data-page="app"][data-app-mode="workers"] .team-modal-grid {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

body[data-page="app"][data-app-mode="workers"] .team-credentials-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-page="app"][data-app-mode="workers"] .team-company-profile-shell {
  display: grid;
  gap: 14px;
}

body[data-page="app"][data-app-mode="workers"] .team-company-profile-shell label {
  display: grid;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

body[data-page="app"][data-app-mode="workers"] .team-company-name-preview {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(16, 32, 51, 0.08);
  background:
    radial-gradient(circle at 12% 18%, rgba(34, 211, 238, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(244, 251, 255, 0.98), rgba(236, 245, 255, 0.98));
}

body[data-page="app"][data-app-mode="workers"] .team-company-name-preview span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #61758d;
}

body[data-page="app"][data-app-mode="workers"] .team-company-name-preview strong {
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

body[data-page="app"][data-app-mode="workers"] .team-company-name-preview p {
  margin: 0;
  color: #61758d;
  line-height: 1.5;
}

body[data-page="app"][data-app-mode="workers"] .team-company-profile-editor {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(16, 32, 51, 0.08);
  background: rgba(255, 255, 255, 0.76);
}

body[data-page="app"][data-app-mode="workers"] .team-company-profile-avatar-wrap {
  width: 80px;
  height: 80px;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, #dae8f4, #eef3f7);
}

body[data-page="app"][data-app-mode="workers"] .team-company-profile-avatar-wrap img,
body[data-page="app"][data-app-mode="workers"] .team-chat-thread-avatar.has-photo img,
body[data-page="app"][data-app-mode="workers"] .team-chat-message-avatar.has-photo img,
body[data-page="worker"] .worker-direct-thread-avatar.has-photo img,
body[data-page="worker"] .worker-direct-colleague-avatar.has-photo img,
body[data-page="worker"] .worker-direct-message-avatar.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body[data-page="app"][data-app-mode="workers"] .team-company-profile-avatar-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: linear-gradient(135deg, #1a4d7f, #102033);
  color: #f8fafc;
  font-size: 28px;
  font-weight: 800;
}

body[data-page="app"][data-app-mode="workers"] .team-company-profile-copy {
  display: grid;
  gap: 6px;
}

body[data-page="app"][data-app-mode="workers"] .team-company-profile-copy span {
  color: #61758d;
  line-height: 1.5;
}

body[data-page="app"][data-app-mode="workers"] .team-company-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

body[data-page="worker"] {
  min-height: 100vh;
  background:
    radial-gradient(920px 480px at 0% 0%, rgba(22, 163, 74, 0.16), transparent 60%),
    radial-gradient(920px 560px at 100% 0%, rgba(30, 64, 175, 0.16), transparent 60%),
    linear-gradient(180deg, #f1f7f2 0%, #f4f7fb 100%);
  color: #102033;
}

body[data-page="worker"] .worker-shell {
  max-width: 1260px;
  margin: 0 auto;
  padding: 24px;
}

body[data-page="worker"] .worker-login-screen {
  min-height: calc(100vh - 48px);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, 420px);
  gap: 26px;
  align-items: center;
}

body[data-page="worker"] .worker-login-copy h1 {
  margin: 18px 0 10px;
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 1.02;
}

body[data-page="worker"] .worker-login-points {
  margin-top: 20px;
  display: grid;
  gap: 10px;
  list-style: none;
}

body[data-page="worker"] .worker-login-points li {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(16, 32, 51, 0.08);
}

body[data-page="worker"] .worker-login-card {
  display: grid;
  gap: 14px;
  box-shadow: 0 24px 70px -42px rgba(16, 32, 51, 0.28);
}

body[data-page="worker"] .worker-login-card-head,
body[data-page="worker"] .worker-topbar,
body[data-page="worker"] .worker-overview,
body[data-page="worker"] .worker-panel-head,
body[data-page="worker"] .worker-chat-head {
  display: flex;
  align-items: center;
}

body[data-page="worker"] .worker-login-card-head {
  justify-content: space-between;
  gap: 12px;
}

body[data-page="worker"] .worker-app {
  display: grid;
  gap: 20px;
}

body[data-page="worker"] .worker-topbar {
  padding: 20px 22px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(16, 32, 51, 0.08);
  box-shadow: 0 24px 60px -40px rgba(16, 32, 51, 0.22);
}

body[data-page="worker"] .worker-overview {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 20px;
}

body[data-page="worker"] .worker-profile-card {
  display: grid;
  gap: 14px;
}

body[data-page="worker"] .worker-profile-card,
body[data-page="worker"] .worker-chat-shell,
body[data-page="worker"] .worker-panel {
  box-shadow: 0 24px 60px -42px rgba(16, 32, 51, 0.22);
}

body[data-page="worker"] .worker-profile-card {
  align-content: start;
}

body[data-page="worker"] .worker-profile-avatar-wrap {
  width: 96px;
  height: 96px;
}

body[data-page="worker"] .worker-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

body[data-page="worker"] .worker-tab {
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(16, 32, 51, 0.1);
  background: rgba(255, 255, 255, 0.84);
  color: #41566c;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

body[data-page="worker"] .worker-tab.is-active {
  background: #102033;
  color: #f8fafc;
}

body[data-page="worker"] .worker-panels {
  display: grid;
}

body[data-page="worker"] .worker-panel {
  display: none;
  gap: 16px;
}

body[data-page="worker"] .worker-panel.is-active {
  display: grid;
}

body[data-page="worker"] .worker-chat-list {
  min-height: 360px;
  max-height: 520px;
  overflow: auto;
  display: grid;
  gap: 12px;
}

body[data-page="worker"] .worker-chat-message {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 20px;
  background: #f7fafc;
  border: 1px solid rgba(16, 32, 51, 0.08);
}

body[data-page="worker"] .worker-chat-message.assistant {
  background: #eef4fb;
}

body[data-page="worker"] .worker-chat-role {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #61758d;
}

body[data-page="worker"] .worker-chat-form textarea,
body[data-page="worker"] #worker-logbook-text,
body[data-page="app"][data-app-mode="workers"] #team-logbook-text,
body[data-page="app"][data-app-mode="workers"] #team-desktop-textarea {
  min-height: 160px;
  resize: vertical;
}

body[data-page="worker"] .worker-chat-form.has-voice-input textarea {
  grid-column: 1 / -1;
}

body[data-page="worker"] .worker-chat-form.has-tts-output textarea {
  grid-column: 1 / -1;
}

body[data-page="worker"] .worker-security-form input {
  width: 100%;
}

@media (max-width: 1180px) {
  body[data-page="app"][data-app-mode="workers"] .team-hero,
  body[data-page="worker"] .worker-login-screen,
  body[data-page="worker"] .worker-overview,
  body[data-page="app"][data-app-mode="workers"] .team-main,
  body[data-page="app"][data-app-mode="workers"] .team-section-split,
  body[data-page="app"][data-app-mode="workers"] .team-desktop-stage {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="workers"] .team-sidebar {
    position: static;
  }
}

@media (max-width: 900px) {
  body[data-page="app"][data-app-mode="workers"] .team-shell,
  body[data-page="worker"] .worker-shell {
    padding: 14px;
  }

  body[data-page="app"][data-app-mode="workers"] .team-topbar,
  body[data-page="app"][data-app-mode="workers"] .team-hero,
  body[data-page="app"][data-app-mode="workers"] .team-sidebar,
  body[data-page="app"][data-app-mode="workers"] .team-profile-card,
  body[data-page="app"][data-app-mode="workers"] .team-section-card,
  body[data-page="app"][data-app-mode="workers"] .team-modal-card,
  body[data-page="worker"] .worker-topbar,
  body[data-page="worker"] .worker-login-card,
  body[data-page="worker"] .worker-profile-card,
  body[data-page="worker"] .worker-panel {
    border-radius: 22px;
  }

  body[data-page="app"][data-app-mode="workers"] .team-topbar,
  body[data-page="app"][data-app-mode="workers"] .team-profile-head,
  body[data-page="app"][data-app-mode="workers"] .team-modal-grid,
  body[data-page="app"][data-app-mode="workers"] .team-profile-form,
  body[data-page="app"][data-app-mode="workers"] .team-credentials-fields,
  body[data-page="app"][data-app-mode="workers"] .team-calendar-item,
  body[data-page="worker"] .worker-topbar,
  body[data-page="worker"] .worker-calendar-item,
  body[data-page="worker"] .worker-panel-head {
    grid-template-columns: 1fr;
    display: grid;
  }

  body[data-page="app"][data-app-mode="workers"] .team-calendar-form,
  body[data-page="worker"] .worker-calendar-form {
    grid-template-columns: 1fr;
  }
}

body[data-page="app"][data-app-mode="workers"] .team-create-security {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
}

body[data-page="app"][data-app-mode="workers"] .team-profile-note-field {
  display: grid;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

body[data-page="app"][data-app-mode="workers"] .team-profile-note-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="workers"] .team-profile-note-actions .team-inline-status {
  flex: 1 1 260px;
  margin: 0;
}

body[data-page="app"][data-app-mode="workers"] .team-broadcast-card {
  margin-top: 22px;
  padding: 22px;
  display: grid;
  gap: 16px;
  border-radius: 28px;
  border: 1px solid rgba(16, 32, 51, 0.1);
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px -40px rgba(16, 32, 51, 0.22);
}

body[data-page="app"][data-app-mode="workers"] .team-broadcast-card textarea,
body[data-page="app"][data-app-mode="workers"] .team-profile-note-field textarea {
  min-height: 124px;
  resize: vertical;
}

body[data-page="app"][data-app-mode="workers"] .team-worker-card {
  align-items: start;
}

body[data-page="app"][data-app-mode="workers"] .team-worker-copy em {
  width: fit-content;
  margin-top: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(21, 163, 74, 0.18);
  background: rgba(21, 163, 74, 0.1);
  color: #157347;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="workers"] .team-worker-shortcuts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding-left: 78px;
}

body[data-page="app"][data-app-mode="workers"] .team-worker-shortcuts .btn {
  min-height: 38px;
  padding: 0 12px;
}

body[data-page="app"][data-app-mode="workers"] .team-detail-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body[data-page="app"][data-app-mode="workers"] .team-detail-tab {
  min-height: 46px;
  padding: 0 18px;
  border-radius: 16px;
  border: 1px solid rgba(16, 32, 51, 0.1);
  background: rgba(255, 255, 255, 0.72);
  color: #5d7188;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

body[data-page="app"][data-app-mode="workers"] .team-detail-tab:hover {
  transform: translateY(-1px);
  border-color: rgba(26, 77, 127, 0.3);
}

body[data-page="app"][data-app-mode="workers"] .team-detail-tab.is-active {
  border-color: #162a40;
  background: #162a40;
  color: #f8fafc;
  box-shadow: 0 18px 34px -26px rgba(22, 42, 64, 0.7);
}

body[data-page="app"][data-app-mode="workers"] .team-detail-panel {
  display: none;
}

body[data-page="app"][data-app-mode="workers"] .team-detail-panel.is-active {
  display: grid;
  gap: 16px;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(400px, 492px);
  gap: 18px;
  align-items: start;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-board,
body[data-page="app"][data-app-mode="workers"] .team-calendar-detail {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(16, 32, 51, 0.08);
  background:
    radial-gradient(circle at 14% 12%, rgba(22, 163, 74, 0.08), transparent 34%),
    radial-gradient(circle at 86% 14%, rgba(220, 38, 38, 0.08), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 253, 0.98));
  box-shadow: 0 20px 40px -32px rgba(15, 23, 42, 0.2);
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-detail,
body[data-page="app"][data-app-mode="workers"] .team-logbook-sheet-wrap {
  align-content: start;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-detail {
  gap: 16px;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-ai-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(220, 38, 38, 0.16);
  background: rgba(220, 38, 38, 0.05);
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-ai-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-ai-head > div {
  display: grid;
  gap: 6px;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-ai-suggestions {
  display: grid;
  gap: 8px;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-ai-suggestion {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(16, 32, 51, 0.08);
  background: rgba(255, 255, 255, 0.94);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-ai-suggestion strong {
  color: #102033;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-ai-suggestion span {
  color: #61758d;
  font-size: 13px;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-ai-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-ai-form.has-voice-input {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-ai-form.has-tts-output {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-ai-form.has-voice-input.has-tts-output {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-ai-form textarea {
  min-height: 92px;
  resize: vertical;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(16, 32, 51, 0.08);
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-ai-form.has-voice-input textarea {
  grid-column: 1 / -1;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-ai-form.has-tts-output textarea {
  grid-column: 1 / -1;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-ai-status {
  margin: 0;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(circle at 12% 10%, rgba(220, 38, 38, 0.12), transparent 34%),
    radial-gradient(circle at 84% 18%, rgba(29, 78, 216, 0.1), transparent 38%),
    rgba(15, 23, 42, 0.46);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom.is-open {
  opacity: 1;
  pointer-events: auto;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-card {
  width: min(1040px, 100%);
  max-height: min(84vh, 920px);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 16px;
  padding: 22px;
  border-radius: 28px;
  border: 1px solid rgba(16, 32, 51, 0.1);
  background:
    radial-gradient(circle at 14% 12%, rgba(220, 38, 38, 0.08), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 253, 0.98));
  box-shadow: 0 34px 80px -48px rgba(15, 23, 42, 0.44);
  overflow: hidden;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  justify-content: space-between;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-copy {
  display: grid;
  gap: 4px;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-copy strong {
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  line-height: 1.08;
  text-transform: capitalize;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-copy span {
  color: #61758d;
  font-size: 13px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 14px;
  padding-right: 4px;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-loading,
body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-empty {
  display: grid;
  gap: 6px;
  padding: 20px;
  border-radius: 20px;
  border: 1px dashed rgba(16, 32, 51, 0.14);
  background: rgba(255, 255, 255, 0.72);
  color: #61758d;
  text-align: center;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-loading strong,
body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-empty strong {
  color: #102033;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-worker {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(16, 32, 51, 0.08);
  background: rgba(255, 255, 255, 0.78);
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-worker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-worker-head strong {
  font-size: 1.05rem;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-worker-head span {
  color: #61758d;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-worker-list {
  display: grid;
  gap: 12px;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-entry {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.94);
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-entry.is-overdue,
body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-entry.is-now,
body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-entry.is-upcoming {
  border-color: rgba(220, 38, 38, 0.22);
  background: linear-gradient(145deg, rgba(220, 38, 38, 0.07), rgba(255, 255, 255, 0.96));
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-entry.is-done {
  border-color: rgba(16, 185, 129, 0.2);
  background: linear-gradient(145deg, rgba(16, 185, 129, 0.08), rgba(255, 255, 255, 0.96));
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-time {
  display: grid;
  gap: 3px;
  align-content: start;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-time strong {
  font-size: 1.1rem;
  line-height: 1;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-time span {
  color: #70849a;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-entry-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-entry-copy strong {
  font-size: 1rem;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-entry-copy > span,
body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-entry-copy small {
  color: #61758d;
  line-height: 1.5;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-board-head,
body[data-page="app"][data-app-mode="workers"] .team-calendar-detail-head,
body[data-page="app"][data-app-mode="workers"] .team-logbook-board-head,
body[data-page="app"][data-app-mode="workers"] .team-logbook-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

body[data-page="app"][data-app-mode="workers"] .team-panel-head-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-nav strong {
  min-width: 150px;
  text-align: center;
  font-size: 1rem;
  text-transform: capitalize;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-weekdays,
body[data-page="app"][data-app-mode="workers"] .team-logbook-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-weekdays span,
body[data-page="app"][data-app-mode="workers"] .team-logbook-weekdays span {
  width: 36px;
  height: 36px;
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(16, 32, 51, 0.04);
  border: 1px solid rgba(16, 32, 51, 0.06);
  text-align: center;
  color: #70849a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-grid,
body[data-page="app"][data-app-mode="workers"] .team-logbook-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(84px, auto);
  align-content: start;
  gap: 8px;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-cell {
  min-height: 84px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(255, 255, 255, 0.94);
  color: #102033;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  position: relative;
  overflow: visible;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-cell:hover,
body[data-page="app"][data-app-mode="workers"] .team-logbook-cell:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 24px -22px rgba(15, 23, 42, 0.28);
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-cell.is-outside,
body[data-page="app"][data-app-mode="workers"] .team-logbook-cell.is-outside {
  opacity: 0.48;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-cell.is-today {
  border-color: rgba(22, 163, 74, 0.4);
  box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.14);
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-cell.is-selected {
  border-color: rgba(220, 38, 38, 0.34);
  background: linear-gradient(145deg, rgba(220, 38, 38, 0.08), rgba(22, 163, 74, 0.08));
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-cell.has-events {
  border-color: rgba(22, 163, 74, 0.28);
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-cell.has-done-events:not(.has-events) {
  border-color: rgba(22, 163, 74, 0.2);
  background: linear-gradient(145deg, rgba(22, 163, 74, 0.06), rgba(255, 255, 255, 0.94));
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-cell.is-overdue {
  border-color: rgba(220, 38, 38, 0.3);
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-cell-top,
body[data-page="app"][data-app-mode="workers"] .team-logbook-cell-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-cell-top strong,
body[data-page="app"][data-app-mode="workers"] .team-logbook-cell-top strong {
  font-size: 14px;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-cell-count,
body[data-page="app"][data-app-mode="workers"] .team-logbook-cell-count {
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-cell-count {
  background: linear-gradient(135deg, #dc2626, #16a34a);
  color: #ffffff;
}

body[data-page="app"][data-app-mode="workers"] .team-logbook-cell-count {
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-cell-preview,
body[data-page="app"][data-app-mode="workers"] .team-logbook-cell-preview {
  color: #657b92;
  font-size: 12px;
  line-height: 1.42;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-hover-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  z-index: 30;
  width: min(280px, calc(100vw - 32px));
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 26px 54px -34px rgba(15, 23, 42, 0.42);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px) scale(0.98);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-hover-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% - 1px);
  width: 16px;
  height: 16px;
  background: inherit;
  border-right: inherit;
  border-bottom: inherit;
  transform: translateX(-50%) rotate(45deg);
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-cell:hover .team-calendar-hover-bubble,
body[data-page="app"][data-app-mode="workers"] .team-calendar-cell:focus-visible .team-calendar-hover-bubble {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-hover-title {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6c8298;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-hover-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  font-size: 12px;
  line-height: 1.45;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-hover-row + .team-calendar-hover-row {
  margin-top: 6px;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-hover-row strong {
  color: #102033;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-hover-row span,
body[data-page="app"][data-app-mode="workers"] .team-calendar-hover-more {
  color: #62778d;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-hover-more {
  margin-top: 8px;
  font-size: 12px;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.92);
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-item.is-overdue {
  border-color: rgba(220, 38, 38, 0.28);
  background: linear-gradient(145deg, rgba(220, 38, 38, 0.08), rgba(255, 255, 255, 0.94));
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-item.is-upcoming,
body[data-page="app"][data-app-mode="workers"] .team-calendar-item.is-now {
  border-color: rgba(22, 163, 74, 0.26);
  background: linear-gradient(145deg, rgba(22, 163, 74, 0.08), rgba(255, 255, 255, 0.94));
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-item.is-done {
  opacity: 0.76;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-marker {
  display: grid;
  justify-items: center;
  gap: 6px;
  align-content: start;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-order {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #162a40;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-time {
  color: #6b7f94;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-copy-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-copy strong {
  font-size: 15px;
  line-height: 1.35;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-copy span,
body[data-page="app"][data-app-mode="workers"] .team-calendar-copy small {
  color: #61758d;
  line-height: 1.55;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-item-actions {
  display: grid;
  gap: 8px;
  align-content: start;
  justify-items: end;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-state-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(16, 32, 51, 0.08);
  background: rgba(255, 255, 255, 0.92);
  color: #61758d;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-item-actions .btn {
  min-height: 38px;
  white-space: nowrap;
}

body[data-page="app"][data-app-mode="workers"] .team-logbook-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.96fr);
  gap: 16px;
}

body[data-page="app"][data-app-mode="workers"] .team-logbook-board,
body[data-page="app"][data-app-mode="workers"] .team-logbook-sheet-wrap {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(16, 32, 51, 0.08);
  background:
    linear-gradient(90deg, transparent 0, transparent 44px, rgba(239, 68, 68, 0.08) 44px, rgba(239, 68, 68, 0.08) 46px, transparent 46px),
    repeating-linear-gradient(180deg, rgba(148, 163, 184, 0.1) 0, rgba(148, 163, 184, 0.1) 1px, transparent 1px, transparent 34px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  box-shadow: 0 16px 38px -30px rgba(15, 23, 42, 0.18);
}

body[data-page="app"][data-app-mode="workers"] .team-logbook-cell {
  min-height: 108px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.96));
  color: #102033;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

body[data-page="app"][data-app-mode="workers"] .team-logbook-cell.is-today {
  border-color: rgba(22, 163, 74, 0.38);
}

body[data-page="app"][data-app-mode="workers"] .team-logbook-cell.is-selected {
  border-color: rgba(220, 38, 38, 0.32);
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.12);
}

body[data-page="app"][data-app-mode="workers"] .team-logbook-cell.has-entry {
  border-color: rgba(22, 163, 74, 0.28);
}

body[data-page="app"][data-app-mode="workers"] .team-logbook-cell.has-tasks:not(.has-entry) {
  border-style: dashed;
}

body[data-page="app"][data-app-mode="workers"] .team-logbook-sheet {
  display: grid;
  gap: 16px;
  min-height: 520px;
  padding: 22px 24px 24px 34px;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background:
    linear-gradient(90deg, transparent 0, transparent 36px, rgba(239, 68, 68, 0.12) 36px, rgba(239, 68, 68, 0.12) 38px, transparent 38px),
    repeating-linear-gradient(180deg, rgba(148, 163, 184, 0.12) 0, rgba(148, 163, 184, 0.12) 1px, transparent 1px, transparent 32px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

body[data-page="app"][data-app-mode="workers"] .team-logbook-sheet-paper-head {
  display: grid;
  gap: 4px;
}

body[data-page="app"][data-app-mode="workers"] .team-logbook-sheet-kicker {
  color: #6f849a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="workers"] .team-logbook-sheet-paper-head strong {
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  line-height: 1.2;
}

body[data-page="app"][data-app-mode="workers"] .team-logbook-sheet-paper-head small {
  color: #6a7e93;
  font-size: 13px;
}

body[data-page="app"][data-app-mode="workers"] .team-logbook-sheet-timeline {
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="workers"] .team-logbook-timeline-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(255, 255, 255, 0.54);
}

body[data-page="app"][data-app-mode="workers"] .team-logbook-timeline-item.is-done {
  opacity: 0.7;
}

body[data-page="app"][data-app-mode="workers"] .team-logbook-timeline-order {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.08);
  color: #102033;
  font-size: 11px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="workers"] .team-logbook-timeline-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body[data-page="app"][data-app-mode="workers"] .team-logbook-timeline-copy strong {
  font-size: 14px;
}

body[data-page="app"][data-app-mode="workers"] .team-logbook-timeline-copy p {
  margin: 0;
  color: #667a90;
  font-size: 12px;
  line-height: 1.45;
}

body[data-page="app"][data-app-mode="workers"] .team-logbook-timeline-state {
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

body[data-page="app"][data-app-mode="workers"] .team-logbook-timeline-item.is-overdue .team-logbook-timeline-state {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}

body[data-page="app"][data-app-mode="workers"] .team-logbook-paper {
  min-height: 240px;
  color: #1e3147;
  font-size: 16px;
  line-height: 2;
  white-space: pre-wrap;
  word-break: break-word;
}

body[data-page="app"][data-app-mode="workers"] .team-logbook-days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

body[data-page="app"][data-app-mode="workers"] .team-logbook-day {
  background: rgba(255, 255, 255, 0.56);
}

body[data-page="app"][data-app-mode="workers"] .team-logbook-day strong {
  line-height: 1.35;
}

body[data-page="app"][data-app-mode="workers"] .team-logbook-day span {
  font-size: 12px;
}

@media (max-width: 1180px) {
  body[data-page="app"][data-app-mode="workers"] .team-calendar-layout,
  body[data-page="app"][data-app-mode="workers"] .team-logbook-layout {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="workers"] .team-worker-shortcuts {
    padding-left: 0;
  }
}

@media (max-width: 900px) {
  body[data-page="app"][data-app-mode="workers"] .team-broadcast-card {
    border-radius: 22px;
  }

  body[data-page="app"][data-app-mode="workers"] .team-detail-tabs {
    overflow-x: auto;
    padding-bottom: 2px;
  }

  body[data-page="app"][data-app-mode="workers"] .team-worker-shortcuts {
    padding-left: 0;
  }

  body[data-page="app"][data-app-mode="workers"] .team-calendar-board-head,
  body[data-page="app"][data-app-mode="workers"] .team-calendar-detail-head,
  body[data-page="app"][data-app-mode="workers"] .team-logbook-board-head,
  body[data-page="app"][data-app-mode="workers"] .team-logbook-sheet-head,
  body[data-page="app"][data-app-mode="workers"] .team-calendar-item,
  body[data-page="app"][data-app-mode="workers"] .team-logbook-timeline-item {
    display: grid;
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="workers"] .team-calendar-grid,
  body[data-page="app"][data-app-mode="workers"] .team-logbook-grid {
    grid-auto-rows: minmax(92px, auto);
  }

  body[data-page="app"][data-app-mode="workers"] .team-calendar-item-actions {
    justify-items: start;
  }
}

@media (max-width: 640px) {
  body[data-page="app"][data-app-mode="workers"] .team-worker-shortcuts {
    grid-template-columns: 1fr;
  }
}

body[data-page="app"][data-app-mode="workers"] .team-delete-copy {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-radius: 20px;
  background: #f7fafc;
  border: 1px solid rgba(16, 32, 51, 0.08);
}

body[data-page="worker"] {
  --worker-bg: #eef2f6;
  --worker-surface: #ffffff;
  --worker-surface-soft: #f6f8fb;
  --worker-surface-strong: #e7edf4;
  --worker-border: #d7e0e9;
  --worker-border-strong: #c6d2de;
  --worker-text: #102033;
  --worker-muted: #607286;
  --worker-accent: #162a40;
  --worker-accent-soft: #e7eef5;
  --worker-shadow: 0 18px 44px -28px rgba(15, 23, 42, 0.22);
  background: linear-gradient(180deg, #eef2f6 0%, #f6f8fb 100%);
  color: var(--worker-text);
}

body[data-page="worker"][data-theme="dark"] {
  --worker-bg: #101722;
  --worker-surface: #151f2c;
  --worker-surface-soft: #1a2635;
  --worker-surface-strong: #243345;
  --worker-border: #273648;
  --worker-border-strong: #37506b;
  --worker-text: #edf3fb;
  --worker-muted: #9bb0c6;
  --worker-accent: #edf3fb;
  --worker-accent-soft: #1d2c3c;
  --worker-shadow: 0 18px 44px -30px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
  background: linear-gradient(180deg, #101722 0%, #0d141e 100%);
}

body[data-page="worker"] .worker-shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: 28px 24px 32px;
}

body[data-page="worker"] .worker-login-screen {
  min-height: calc(100vh - 56px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 420px);
  gap: 28px;
  align-items: center;
}

body[data-page="worker"] .worker-login-copy {
  max-width: 720px;
}

body[data-page="worker"] .worker-login-copy h1 {
  margin: 16px 0 12px;
  font-size: clamp(2.4rem, 4vw, 4rem);
  line-height: 1.02;
}

body[data-page="worker"] .worker-login-copy p,
body[data-page="worker"] .worker-profile-sub,
body[data-page="worker"] .worker-panel-head span,
body[data-page="worker"] .worker-chat-head span,
body[data-page="worker"] .worker-login-card-head span,
body[data-page="worker"] .worker-settings-head span {
  color: var(--worker-muted);
  line-height: 1.6;
}

body[data-page="worker"] .worker-login-points {
  margin-top: 22px;
  display: grid;
  gap: 10px;
  list-style: none;
}

body[data-page="worker"] .worker-login-points li,
body[data-page="worker"] .worker-login-card,
body[data-page="worker"] .worker-topbar,
body[data-page="worker"] .worker-profile-card,
body[data-page="worker"] .worker-announcement-card,
body[data-page="worker"] .worker-panel,
body[data-page="worker"] .worker-chat-shell {
  background: var(--worker-surface);
  border: 1px solid var(--worker-border);
  box-shadow: var(--worker-shadow);
}

body[data-page="worker"] .worker-login-points li {
  padding: 14px 16px;
  border-radius: 18px;
}

body[data-page="worker"] .worker-login-card,
body[data-page="worker"] .worker-profile-card,
body[data-page="worker"] .worker-announcement-card,
body[data-page="worker"] .worker-panel,
body[data-page="worker"] .worker-chat-shell,
body[data-page="worker"] .worker-topbar {
  border-radius: 24px;
}

body[data-page="worker"] .worker-login-card,
body[data-page="worker"] .worker-panel,
body[data-page="worker"] .worker-chat-shell {
  padding: 20px;
}

body[data-page="worker"] .worker-app {
  display: grid;
  gap: 18px;
}

body[data-page="worker"] .worker-topbar {
  padding: 18px 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

body[data-page="worker"] .worker-topbar-copy {
  display: grid;
  gap: 6px;
}

body[data-page="worker"] .worker-topbar-copy h2 {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
}

body[data-page="worker"] .worker-company {
  color: var(--worker-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body[data-page="worker"] .worker-topbar-actions,
body[data-page="worker"] .worker-profile-actions,
body[data-page="worker"] .worker-logbook-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

body[data-page="worker"] .worker-header-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 18px;
}

body[data-page="worker"] .worker-profile-card {
  padding: 20px;
  display: grid;
  gap: 16px;
  align-content: start;
}

body[data-page="worker"] .worker-profile-avatar-wrap {
  width: 88px;
  height: 88px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--worker-accent-soft);
  border: 1px solid var(--worker-border);
}

body[data-page="worker"] .worker-profile-avatar-fallback {
  display: grid;
  place-items: center;
  background: var(--worker-accent-soft);
  color: var(--worker-accent);
  font-size: 28px;
  font-weight: 700;
}

body[data-page="worker"] .worker-profile-copy {
  display: grid;
  gap: 6px;
}

body[data-page="worker"] .worker-profile-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--worker-accent-soft);
  color: var(--worker-accent);
  font-size: 12px;
  font-weight: 700;
}

body[data-page="worker"] .worker-profile-copy strong {
  font-size: 1.15rem;
}

body[data-page="worker"] .worker-head-stack {
  display: grid;
  gap: 18px;
  align-content: start;
}

body[data-page="worker"] .worker-notification-card {
  padding: 22px;
  display: grid;
  gap: 16px;
  border-radius: 24px;
  background: var(--worker-surface);
  border: 1px solid var(--worker-border);
  box-shadow: var(--worker-shadow);
}

body[data-page="worker"] .worker-announcement-card {
  padding: 22px;
  display: grid;
  gap: 16px;
}

body[data-page="worker"] .worker-announcement-head,
body[data-page="worker"] .worker-panel-head,
body[data-page="worker"] .worker-chat-head,
body[data-page="worker"] .worker-login-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

body[data-page="worker"] .worker-announcement-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

body[data-page="worker"] .worker-settings-head {
  display: grid;
  gap: 6px;
}

body[data-page="worker"] .worker-announcement-head > div,
body[data-page="worker"] .worker-panel-head > div,
body[data-page="worker"] .worker-chat-head > div {
  display: grid;
  gap: 6px;
}

body[data-page="worker"] .worker-section-kicker {
  color: var(--worker-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body[data-page="worker"] .worker-announcement-meta {
  color: var(--worker-muted);
  font-size: 12px;
  text-align: right;
}

body[data-page="worker"] .worker-announcement-text {
  font-size: 1rem;
  line-height: 1.75;
}

body[data-page="worker"] .worker-announcement-list,
body[data-page="worker"] .worker-notification-list {
  display: grid;
  gap: 10px;
  max-height: 250px;
  overflow: auto;
  padding-right: 2px;
}

body[data-page="worker"] .worker-announcement-entry,
body[data-page="worker"] .worker-notification-item {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--worker-border);
  background: var(--worker-surface-soft);
}

body[data-page="worker"] .worker-announcement-entry.is-direct {
  border-color: var(--worker-border-strong);
  background: var(--worker-accent-soft);
}

body[data-page="worker"] .worker-announcement-entry span {
  color: var(--worker-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-page="worker"] .worker-announcement-entry p,
body[data-page="worker"] .worker-notification-copy p {
  margin: 0;
  color: var(--worker-text);
  line-height: 1.65;
  white-space: pre-wrap;
}

body[data-page="worker"] .worker-announcement-history {
  display: grid;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid var(--worker-border);
}

body[data-page="worker"] .worker-announcement-history-item {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--worker-border);
  background: var(--worker-surface-soft);
}

body[data-page="worker"] .worker-announcement-history-item strong {
  font-size: 15px;
}

body[data-page="worker"] .worker-announcement-history-item p {
  margin: 0;
  color: var(--worker-text);
  line-height: 1.65;
}

body[data-page="worker"] .worker-announcement-history-item small {
  color: var(--worker-muted);
  font-size: 12px;
}

body[data-page="worker"] .worker-notification-item.is-unread {
  border-color: rgba(22, 163, 74, 0.32);
  box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.1);
}

body[data-page="worker"][data-theme="dark"] .worker-notification-item.is-unread {
  border-color: rgba(34, 197, 94, 0.34);
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.12);
}

body[data-page="worker"] .worker-notification-copy {
  display: grid;
  gap: 6px;
}

body[data-page="worker"] .worker-notification-copy strong {
  font-size: 15px;
}

body[data-page="worker"] .worker-notification-copy small {
  color: var(--worker-muted);
  font-size: 12px;
}

body[data-page="worker"] .worker-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

body[data-page="worker"] .worker-tab {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid var(--worker-border);
  background: transparent;
  color: var(--worker-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

body[data-page="worker"] .worker-tab.is-active {
  background: var(--worker-accent);
  border-color: var(--worker-accent);
  color: var(--worker-surface);
}

body[data-page="worker"][data-theme="dark"] .worker-tab.is-active {
  color: #0f1722;
}

body[data-page="worker"] .worker-panels {
  display: grid;
}

body[data-page="worker"] .worker-panel {
  display: none;
  gap: 16px;
}

body[data-page="worker"] .worker-panel.is-active {
  display: grid;
}

body[data-page="worker"] .worker-panel-head-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}

body[data-page="worker"] .worker-day-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(96px, 1fr);
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}

body[data-page="worker"] .worker-day {
  min-height: 76px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--worker-border);
  background: var(--worker-surface-soft);
  color: var(--worker-muted);
  text-align: left;
  display: grid;
  gap: 4px;
  cursor: pointer;
}

body[data-page="worker"] .worker-day small {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

body[data-page="worker"] .worker-day strong {
  color: var(--worker-text);
  font-size: 1rem;
}

body[data-page="worker"] .worker-day.is-active {
  background: var(--worker-accent);
  border-color: var(--worker-accent);
  color: rgba(255, 255, 255, 0.8);
}

body[data-page="worker"] .worker-day.is-active strong {
  color: #ffffff;
}

body[data-page="worker"][data-theme="dark"] .worker-day.is-active {
  color: rgba(15, 23, 34, 0.72);
}

body[data-page="worker"][data-theme="dark"] .worker-day.is-active strong {
  color: #0f1722;
}

body[data-page="worker"] .worker-day.is-today {
  border-color: var(--worker-border-strong);
}

body[data-page="worker"] .worker-calendar-form {
  display: grid;
  grid-template-columns: 120px 120px minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

body[data-page="worker"] .worker-calendar-list {
  display: grid;
  gap: 12px;
}

body[data-page="worker"] .worker-schedule-item {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid var(--worker-border);
  background: var(--worker-surface-soft);
}

body[data-page="worker"] .worker-schedule-item.is-done {
  opacity: 0.78;
}

body[data-page="worker"] .worker-schedule-item-time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--worker-surface);
  border: 1px solid var(--worker-border);
  font-weight: 700;
}

body[data-page="worker"] .worker-schedule-item-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

body[data-page="worker"] .worker-schedule-item-title {
  font-size: 1rem;
}

body[data-page="worker"] .worker-schedule-item-meta {
  color: var(--worker-muted);
  line-height: 1.55;
}

body[data-page="worker"] .worker-schedule-item-actions {
  display: grid;
  gap: 8px;
  justify-items: end;
}

body[data-page="worker"] .worker-schedule-item-actions label {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--worker-muted);
  font-size: 14px;
}

body[data-page="worker"] #worker-logbook-text,
body[data-page="worker"] .worker-chat-form textarea {
  min-height: 180px;
  resize: vertical;
}

body[data-page="worker"] .worker-logbook-days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

body[data-page="worker"] .worker-logbook-day {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--worker-border);
  background: var(--worker-surface-soft);
  text-align: left;
  cursor: pointer;
}

body[data-page="worker"] .worker-logbook-day.is-active {
  border-color: var(--worker-accent);
  background: var(--worker-accent-soft);
}

body[data-page="worker"] .worker-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

body[data-page="worker"] .worker-settings-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid var(--worker-border);
  background: var(--worker-surface-soft);
}

body[data-page="worker"] .worker-theme-switch {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

body[data-page="worker"] .worker-theme-switch .btn.is-active {
  background: var(--worker-accent);
  border-color: var(--worker-accent);
  color: var(--worker-surface);
}

body[data-page="worker"][data-theme="dark"] .worker-theme-switch .btn.is-active {
  color: #0f1722;
}

body[data-page="worker"] .worker-chat-shell {
  display: grid;
  gap: 16px;
}

body[data-page="worker"] .worker-chat-list {
  min-height: 320px;
  max-height: 480px;
  overflow: auto;
  display: grid;
  gap: 12px;
}

body[data-page="worker"] .worker-chat-message {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--worker-border);
  background: var(--worker-surface-soft);
}

body[data-page="worker"] .worker-chat-message.assistant {
  background: var(--worker-accent-soft);
}

body[data-page="worker"] .worker-chat-role {
  color: var(--worker-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-page="worker"] .worker-bottom-strip {
  display: grid;
}

body[data-page="worker"] .worker-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

body[data-page="worker"] .worker-quick-grid article {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--worker-surface);
  border: 1px solid var(--worker-border);
  box-shadow: var(--worker-shadow);
}

body[data-page="worker"] .worker-quick-grid strong {
  font-size: 1.05rem;
}

body[data-page="worker"] .worker-list-empty {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-radius: 18px;
  border: 1px dashed var(--worker-border-strong);
  background: var(--worker-surface-soft);
  color: var(--worker-muted);
}

body[data-page="worker"] .worker-inline-status {
  min-height: 22px;
  color: var(--worker-muted);
}

body[data-page="worker"] .worker-inline-status[data-state="error"] {
  color: #c03221;
}

body[data-page="worker"] .worker-inline-status[data-state="saved"] {
  color: #1a7f4b;
}

body[data-page="worker"] .btn.primary {
  background: var(--worker-accent);
  border-color: var(--worker-accent);
  color: var(--worker-surface);
  box-shadow: none;
}

body[data-page="worker"][data-theme="dark"] .btn.primary {
  color: #0f1722;
}

body[data-page="worker"] .btn.primary:hover {
  transform: none;
  background: var(--worker-accent);
}

body[data-page="worker"] .btn.ghost {
  background: var(--worker-surface);
  border-color: var(--worker-border);
  color: var(--worker-text);
}

body[data-page="worker"] .btn.ghost:hover {
  border-color: var(--worker-border-strong);
  background: var(--worker-accent-soft);
}

body[data-page="worker"] .worker-login-card input,
body[data-page="worker"] .worker-calendar-form input,
body[data-page="worker"] .worker-security-form input,
body[data-page="worker"] .worker-panel-head input[type="date"],
body[data-page="worker"] textarea {
  background: var(--worker-surface);
  border: 1px solid var(--worker-border);
  color: var(--worker-text);
  border-radius: 16px;
  box-shadow: none;
}

body[data-page="worker"] .worker-security-form input[readonly] {
  background: var(--worker-surface-soft);
}

body[data-page="worker"] .worker-login-card input::placeholder,
body[data-page="worker"] .worker-calendar-form input::placeholder,
body[data-page="worker"] .worker-security-form input::placeholder,
body[data-page="worker"] textarea::placeholder {
  color: var(--worker-muted);
}

@media (max-width: 1100px) {
  body[data-page="worker"] .worker-login-screen,
  body[data-page="worker"] .worker-header-grid,
  body[data-page="worker"] .worker-settings-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  body[data-page="worker"] .worker-shell {
    padding: 14px;
  }

  body[data-page="worker"] .worker-topbar,
  body[data-page="worker"] .worker-panel-head,
  body[data-page="worker"] .worker-chat-head,
  body[data-page="worker"] .worker-announcement-head {
    display: grid;
    grid-template-columns: 1fr;
  }

  body[data-page="worker"] .worker-calendar-form,
  body[data-page="worker"] .worker-schedule-item {
    grid-template-columns: 1fr;
  }

  body[data-page="worker"] .worker-schedule-item-actions {
    justify-items: start;
  }

  body[data-page="worker"] .worker-logbook-days {
    grid-template-columns: 1fr;
  }
}

body[data-page="worker"] {
  --worker-cal-green: #16a34a;
  --worker-cal-green-soft: #dcfce7;
  --worker-cal-green-bg: rgba(22, 163, 74, 0.14);
  --worker-cal-red: #dc2626;
  --worker-cal-red-soft: #fee2e2;
  --worker-cal-red-bg: rgba(220, 38, 38, 0.12);
}

body[data-page="worker"][data-theme="dark"] {
  --worker-cal-green: #22c55e;
  --worker-cal-green-soft: #dcfce7;
  --worker-cal-green-bg: rgba(34, 197, 94, 0.16);
  --worker-cal-red: #ef4444;
  --worker-cal-red-soft: #fee2e2;
  --worker-cal-red-bg: rgba(239, 68, 68, 0.16);
}

body[data-page="worker"] .worker-calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 430px);
  gap: 16px;
  align-items: start;
}

body[data-page="worker"] .worker-calendar-board,
body[data-page="worker"] .worker-calendar-detail {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid var(--worker-border);
  background: var(--worker-surface-soft);
}

body[data-page="worker"] .worker-calendar-board-head,
body[data-page="worker"] .worker-calendar-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

body[data-page="worker"] .worker-calendar-board-head > div:first-child,
body[data-page="worker"] .worker-calendar-detail-head > div:first-child,
body[data-page="worker"] .worker-calendar-ai-head {
  display: grid;
  gap: 6px;
}

body[data-page="worker"] .worker-calendar-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

body[data-page="worker"] .worker-calendar-nav strong {
  min-width: 150px;
  text-align: center;
  font-size: 1rem;
}

body[data-page="worker"] .worker-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

body[data-page="worker"] .worker-calendar-weekdays span {
  width: 36px;
  height: 36px;
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(16, 32, 51, 0.04);
  border: 1px solid rgba(16, 32, 51, 0.06);
  text-align: center;
  color: var(--worker-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-page="worker"] .worker-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(84px, auto);
  align-content: start;
  gap: 8px;
}

body[data-page="worker"] .worker-calendar-cell {
  min-height: 84px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid var(--worker-border);
  background: var(--worker-surface);
  color: var(--worker-text);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  position: relative;
  overflow: visible;
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

body[data-page="worker"] .worker-calendar-cell:hover {
  transform: translateY(-1px);
}

body[data-page="worker"] .worker-calendar-cell.is-outside {
  opacity: 0.5;
}

body[data-page="worker"] .worker-calendar-cell.is-today {
  border-color: rgba(22, 163, 74, 0.42);
  box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.14);
}

body[data-page="worker"] .worker-calendar-cell.is-selected {
  border-color: rgba(220, 38, 38, 0.42);
  background: linear-gradient(145deg, var(--worker-cal-red-bg), var(--worker-cal-green-bg));
}

body[data-page="worker"] .worker-calendar-cell.has-events {
  border-color: rgba(22, 163, 74, 0.32);
}

body[data-page="worker"] .worker-calendar-cell.has-done-events:not(.has-events) {
  border-color: rgba(22, 163, 74, 0.22);
  background: linear-gradient(145deg, rgba(22, 163, 74, 0.06), transparent);
}

body[data-page="worker"] .worker-calendar-cell.is-overdue {
  border-color: rgba(220, 38, 38, 0.34);
}

body[data-page="worker"] .worker-calendar-cell-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body[data-page="worker"] .worker-calendar-cell-top strong {
  font-size: 14px;
}

body[data-page="worker"] .worker-calendar-cell-count {
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--worker-cal-red), var(--worker-cal-green));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

body[data-page="worker"] .worker-calendar-cell-preview {
  color: var(--worker-muted);
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

body[data-page="worker"] .worker-calendar-hover-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  z-index: 36;
  width: min(280px, calc(100vw - 32px));
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--worker-border-strong);
  background: var(--worker-surface);
  box-shadow: 0 26px 54px -34px rgba(15, 23, 42, 0.42);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px) scale(0.98);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

body[data-page="worker"] .worker-calendar-hover-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% - 1px);
  width: 16px;
  height: 16px;
  background: inherit;
  border-right: inherit;
  border-bottom: inherit;
  transform: translateX(-50%) rotate(45deg);
}

body[data-page="worker"] .worker-calendar-cell:hover .worker-calendar-hover-bubble,
body[data-page="worker"] .worker-calendar-cell:focus-visible .worker-calendar-hover-bubble {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

body[data-page="worker"] .worker-calendar-hover-title {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--worker-muted);
}

body[data-page="worker"] .worker-calendar-hover-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  font-size: 12px;
  line-height: 1.45;
}

body[data-page="worker"] .worker-calendar-hover-row + .worker-calendar-hover-row {
  margin-top: 6px;
}

body[data-page="worker"] .worker-calendar-hover-row span,
body[data-page="worker"] .worker-calendar-hover-more {
  color: var(--worker-muted);
}

body[data-page="worker"] .worker-calendar-hover-more {
  margin-top: 8px;
  font-size: 12px;
}

body[data-page="worker"] .worker-calendar-detail {
  align-content: start;
}

body[data-page="worker"] .worker-calendar-detail-head strong {
  font-size: 1.05rem;
}

body[data-page="worker"] .worker-calendar-ai-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(22, 163, 74, 0.24);
  background: linear-gradient(145deg, var(--worker-cal-green-bg), transparent 72%);
}

body[data-page="worker"] .worker-calendar-ai-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

body[data-page="worker"] .worker-calendar-ai-form.has-voice-input {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

body[data-page="worker"] .worker-calendar-ai-form.has-tts-output {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

body[data-page="worker"] .worker-calendar-ai-form.has-voice-input.has-tts-output {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}

body[data-page="worker"] .worker-calendar-ai-form input {
  min-height: 48px;
  border-radius: 14px;
}

body[data-page="worker"] .worker-calendar-form {
  grid-template-columns: 110px 110px minmax(0, 1fr);
}

body[data-page="worker"] .worker-calendar-form input:nth-child(3),
body[data-page="worker"] .worker-calendar-form input:nth-child(4),
body[data-page="worker"] .worker-calendar-form button {
  grid-column: 1 / -1;
}

body[data-page="worker"] .worker-calendar-list {
  display: grid;
  gap: 10px;
}

body[data-page="worker"] .worker-calendar-zoom-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--worker-border);
  background: var(--worker-surface);
}

body[data-page="worker"] .worker-calendar-zoom-item.is-overdue {
  border-color: rgba(220, 38, 38, 0.3);
  background: linear-gradient(145deg, var(--worker-cal-red-bg), transparent 72%);
}

body[data-page="worker"] .worker-calendar-zoom-item.is-now,
body[data-page="worker"] .worker-calendar-zoom-item.is-upcoming {
  border-color: rgba(22, 163, 74, 0.26);
  background: linear-gradient(145deg, var(--worker-cal-green-bg), transparent 72%);
}

body[data-page="worker"] .worker-calendar-zoom-item.is-done {
  opacity: 0.78;
}

body[data-page="worker"] .worker-calendar-zoom-marker {
  display: grid;
  justify-items: center;
  gap: 6px;
  align-content: start;
}

body[data-page="worker"] .worker-calendar-zoom-order {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--worker-accent);
  color: var(--worker-surface);
  font-size: 12px;
  font-weight: 700;
}

body[data-page="worker"][data-theme="dark"] .worker-calendar-zoom-order {
  color: #101722;
}

body[data-page="worker"] .worker-calendar-zoom-time {
  color: var(--worker-muted);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

body[data-page="worker"] .worker-calendar-zoom-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

body[data-page="worker"] .worker-calendar-zoom-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body[data-page="worker"] .worker-calendar-zoom-state {
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--worker-border);
  background: var(--worker-surface-soft);
  color: var(--worker-text);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

body[data-page="worker"] .worker-calendar-zoom-item.is-overdue .worker-calendar-zoom-state {
  border-color: rgba(220, 38, 38, 0.3);
  background: var(--worker-cal-red-bg);
  color: var(--worker-cal-red);
}

body[data-page="worker"] .worker-calendar-zoom-item.is-now .worker-calendar-zoom-state,
body[data-page="worker"] .worker-calendar-zoom-item.is-upcoming .worker-calendar-zoom-state,
body[data-page="worker"] .worker-calendar-zoom-item.is-done .worker-calendar-zoom-state {
  border-color: rgba(22, 163, 74, 0.3);
  background: var(--worker-cal-green-bg);
  color: var(--worker-cal-green);
}

body[data-page="worker"] .worker-calendar-zoom-meta,
body[data-page="worker"] .worker-calendar-zoom-note {
  color: var(--worker-muted);
  line-height: 1.5;
}

body[data-page="worker"] .worker-calendar-zoom-note {
  white-space: pre-wrap;
}

body[data-page="worker"] .worker-calendar-zoom-actions {
  display: grid;
  gap: 8px;
  align-content: start;
}

body[data-page="worker"] .worker-calendar-zoom-actions .btn {
  min-height: 38px;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  body[data-page="worker"] .worker-calendar-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  body[data-page="worker"] .worker-calendar-board-head,
  body[data-page="worker"] .worker-calendar-detail-head,
  body[data-page="worker"] .worker-calendar-zoom-item,
  body[data-page="worker"] .worker-calendar-ai-form {
    grid-template-columns: 1fr;
    display: grid;
  }

  body[data-page="worker"] .worker-calendar-grid {
    grid-auto-rows: minmax(92px, auto);
  }

  body[data-page="worker"] .worker-calendar-form {
    grid-template-columns: 1fr;
  }

  body[data-page="worker"] .worker-calendar-zoom-actions {
    justify-items: start;
  }
}

body[data-page="worker"] .worker-calendar-day-zoom {
  position: fixed;
  inset: 0;
  z-index: 140;
  background:
    radial-gradient(circle at 12% 10%, rgba(22, 163, 74, 0.12), transparent 36%),
    radial-gradient(circle at 86% 18%, rgba(220, 38, 38, 0.14), transparent 42%),
    rgba(9, 13, 19, 0.42);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.26s ease;
}

body[data-page="worker"][data-theme="dark"] .worker-calendar-day-zoom {
  background:
    radial-gradient(circle at 12% 10%, rgba(34, 197, 94, 0.14), transparent 36%),
    radial-gradient(circle at 86% 18%, rgba(239, 68, 68, 0.16), transparent 42%),
    rgba(2, 6, 23, 0.62);
}

body[data-page="worker"] .worker-calendar-day-zoom.is-open {
  opacity: 1;
  pointer-events: auto;
}

body[data-page="worker"] .worker-calendar-day-zoom-card {
  position: fixed;
  left: var(--worker-calendar-zoom-left, 50%);
  top: var(--worker-calendar-zoom-top, 50%);
  width: var(--worker-calendar-zoom-width, 2px);
  height: var(--worker-calendar-zoom-height, 2px);
  border-radius: var(--worker-calendar-zoom-radius, 18px);
  border: 1px solid var(--worker-border);
  background: var(--worker-surface);
  box-shadow: 0 34px 72px -40px rgba(15, 23, 42, 0.34);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  padding: 16px;
  overflow: hidden;
  transition:
    left 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease,
    opacity 0.3s ease;
}

body[data-page="worker"][data-theme="dark"] .worker-calendar-day-zoom-card {
  background: linear-gradient(160deg, rgba(18, 27, 38, 0.98), rgba(12, 20, 30, 0.98));
  box-shadow: 0 34px 72px -40px rgba(0, 0, 0, 0.7);
}

body[data-page="worker"] .worker-calendar-day-zoom-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, var(--worker-surface) 0%, rgba(255, 255, 255, 0.86) 78%, transparent 100%);
  padding-bottom: 8px;
}

body[data-page="worker"][data-theme="dark"] .worker-calendar-day-zoom-head {
  background: linear-gradient(180deg, rgba(18, 27, 38, 0.98) 0%, rgba(18, 27, 38, 0.82) 78%, transparent 100%);
}

body[data-page="worker"] .worker-calendar-day-zoom-copy {
  display: grid;
  gap: 3px;
}

body[data-page="worker"] .worker-calendar-day-zoom-copy strong {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.2;
}

body[data-page="worker"] .worker-calendar-day-zoom-copy span {
  color: var(--worker-muted);
  font-size: 14px;
  font-weight: 700;
}

body[data-page="worker"] .worker-calendar-day-zoom-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 12px;
  padding: 4px 4px 10px;
}

body[data-page="worker"] .worker-calendar-day-zoom-empty {
  border-radius: 16px;
  border: 1px dashed var(--worker-border-strong);
  background: var(--worker-surface-soft);
  color: var(--worker-muted);
  text-align: center;
  padding: 18px;
}

body[data-page="worker"] .worker-calendar-day-zoom-list .worker-calendar-zoom-item {
  min-height: 112px;
}

@media (max-width: 900px) {
  body[data-page="worker"] .worker-calendar-day-zoom-card {
    padding: 12px;
  }

  body[data-page="worker"] .worker-calendar-day-zoom-head {
    display: grid;
    grid-template-columns: 1fr;
  }
}

body[data-page="worker"] .worker-logbook-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.96fr);
  gap: 16px;
}

body[data-page="worker"] .worker-logbook-board,
body[data-page="worker"] .worker-logbook-sheet-wrap {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid var(--worker-border);
  background:
    linear-gradient(90deg, transparent 0, transparent 44px, rgba(239, 68, 68, 0.08) 44px, rgba(239, 68, 68, 0.08) 46px, transparent 46px),
    repeating-linear-gradient(180deg, rgba(148, 163, 184, 0.1) 0, rgba(148, 163, 184, 0.1) 1px, transparent 1px, transparent 34px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.98));
  box-shadow: 0 16px 38px -28px rgba(15, 23, 42, 0.22);
}

body[data-page="worker"][data-theme="dark"] .worker-logbook-board,
body[data-page="worker"][data-theme="dark"] .worker-logbook-sheet-wrap {
  background:
    linear-gradient(90deg, transparent 0, transparent 44px, rgba(248, 113, 113, 0.12) 44px, rgba(248, 113, 113, 0.12) 46px, transparent 46px),
    repeating-linear-gradient(180deg, rgba(71, 85, 105, 0.34) 0, rgba(71, 85, 105, 0.34) 1px, transparent 1px, transparent 34px),
    linear-gradient(180deg, rgba(20, 29, 40, 0.98), rgba(15, 23, 34, 0.98));
  box-shadow: 0 18px 42px -30px rgba(0, 0, 0, 0.5);
}

body[data-page="worker"] .worker-logbook-board-head,
body[data-page="worker"] .worker-logbook-sheet-head,
body[data-page="worker"] .worker-logbook-ai-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

body[data-page="worker"] .worker-logbook-board-head > div:first-child,
body[data-page="worker"] .worker-logbook-sheet-head > div:first-child,
body[data-page="worker"] .worker-logbook-ai-head > div:first-child {
  display: grid;
  gap: 6px;
}

body[data-page="worker"] .worker-logbook-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

body[data-page="worker"] .worker-logbook-weekdays span {
  text-align: center;
  color: var(--worker-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-page="worker"] .worker-logbook-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(108px, auto);
  gap: 8px;
}

body[data-page="worker"] .worker-logbook-cell {
  min-height: 108px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 250, 252, 0.96));
  color: var(--worker-text);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

body[data-page="worker"][data-theme="dark"] .worker-logbook-cell {
  background:
    linear-gradient(180deg, rgba(23, 33, 46, 0.94), rgba(17, 24, 36, 0.98));
  border-color: rgba(71, 85, 105, 0.5);
}

body[data-page="worker"] .worker-logbook-cell:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 24px -22px rgba(15, 23, 42, 0.32);
}

body[data-page="worker"] .worker-logbook-cell.is-outside {
  opacity: 0.45;
}

body[data-page="worker"] .worker-logbook-cell.is-today {
  border-color: rgba(22, 163, 74, 0.38);
}

body[data-page="worker"] .worker-logbook-cell.is-selected {
  border-color: rgba(220, 38, 38, 0.34);
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.12);
}

body[data-page="worker"] .worker-logbook-cell.has-entry {
  border-color: rgba(22, 163, 74, 0.3);
}

body[data-page="worker"] .worker-logbook-cell.has-tasks:not(.has-entry) {
  border-style: dashed;
}

body[data-page="worker"] .worker-logbook-cell-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body[data-page="worker"] .worker-logbook-cell-top strong {
  font-size: 14px;
}

body[data-page="worker"] .worker-logbook-cell-count {
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(22, 163, 74, 0.12);
  color: var(--worker-cal-green);
  font-size: 11px;
  font-weight: 700;
}

body[data-page="worker"] .worker-logbook-cell-preview {
  color: var(--worker-muted);
  font-size: 12px;
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

body[data-page="worker"] .worker-logbook-sheet-wrap {
  align-content: start;
}

body[data-page="worker"] .worker-logbook-ai-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(6px);
}

body[data-page="worker"][data-theme="dark"] .worker-logbook-ai-card {
  background: rgba(15, 23, 34, 0.54);
  border-color: rgba(71, 85, 105, 0.46);
}

body[data-page="worker"] .worker-logbook-ai-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

body[data-page="worker"] .worker-logbook-ai-tools {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

body[data-page="worker"] .worker-logbook-ai-tools:empty {
  display: none;
}

body[data-page="worker"] .worker-logbook-ai-form.has-voice-input {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
}

body[data-page="worker"] .worker-logbook-ai-form.has-tts-output {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
}

body[data-page="worker"] .worker-logbook-ai-form.has-voice-input.has-tts-output {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}

body[data-page="worker"] .worker-logbook-ai-form input {
  min-height: 48px;
  border-radius: 14px;
}

body[data-page="worker"] .worker-logbook-ai-form.has-voice-input input {
  grid-column: 1 / -1;
}

body[data-page="worker"] .worker-logbook-ai-form.has-tts-output input {
  grid-column: 1 / -1;
}

body[data-page="worker"] .worker-logbook-ai-form .worker-logbook-ai-tools,
body[data-page="worker"] .worker-logbook-ai-form > .btn.primary {
  grid-column: 1 / -1;
}

body[data-page="worker"] .worker-logbook-ai-form > .btn.primary {
  justify-self: end;
  min-height: 52px;
  padding-inline: 22px;
  border-radius: 16px;
}

body[data-page="worker"] .worker-logbook-ai-form .finora-voice-dock,
body[data-page="worker"] .worker-logbook-ai-form .finora-tts-dock {
  min-width: 0;
  width: 100%;
  align-self: stretch;
  padding: 10px 12px;
  border-radius: 18px;
}

body[data-page="worker"] .worker-logbook-ai-form .finora-voice-actions,
body[data-page="worker"] .worker-logbook-ai-form .finora-tts-main {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
}

body[data-page="worker"] .worker-logbook-ai-form .finora-tts-main {
  grid-template-columns: 1fr;
  gap: 8px;
}

body[data-page="worker"] .worker-logbook-ai-form .finora-voice-trigger,
body[data-page="worker"] .worker-logbook-ai-form .finora-voice-stop,
body[data-page="worker"] .worker-logbook-ai-form .finora-tts-toggle,
body[data-page="worker"] .worker-logbook-ai-form .finora-tts-stop {
  min-height: 52px;
}

body[data-page="worker"] .worker-logbook-ai-form .finora-tts-toggle {
  width: 100%;
  justify-content: space-between;
  gap: 12px;
  padding-inline: 14px;
}

body[data-page="worker"] .worker-logbook-ai-form .finora-tts-label {
  font-size: 10px;
  letter-spacing: 0.1em;
}

body[data-page="worker"] .worker-logbook-ai-form .finora-tts-pill {
  min-width: 0;
  flex-shrink: 0;
}

body[data-page="worker"] .worker-logbook-ai-form .finora-tts-stop {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding-inline: 14px;
}

body[data-page="worker"] .worker-logbook-ai-form .finora-voice-status,
body[data-page="worker"] .worker-logbook-ai-form .finora-tts-status {
  min-height: 36px;
  padding: 8px 10px;
}

body[data-page="worker"] .worker-logbook-ai-thinking {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-top: 4px;
}

body[data-page="worker"] .worker-logbook-ai-thinking span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--worker-accent);
  animation: worker-logbook-thinking 0.9s infinite ease-in-out;
}

body[data-page="worker"] .worker-logbook-ai-thinking span:nth-child(2) {
  animation-delay: 0.14s;
}

body[data-page="worker"] .worker-logbook-ai-thinking span:nth-child(3) {
  animation-delay: 0.28s;
}

@keyframes worker-logbook-thinking {
  0%,
  80%,
  100% {
    transform: scale(0.75);
    opacity: 0.35;
  }

  40% {
    transform: scale(1);
    opacity: 1;
  }
}

body[data-page="worker"] .worker-logbook-sheet {
  display: grid;
  gap: 16px;
  min-height: 520px;
  padding: 22px 24px 24px 34px;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background:
    linear-gradient(90deg, transparent 0, transparent 36px, rgba(239, 68, 68, 0.12) 36px, rgba(239, 68, 68, 0.12) 38px, transparent 38px),
    repeating-linear-gradient(180deg, rgba(148, 163, 184, 0.12) 0, rgba(148, 163, 184, 0.12) 1px, transparent 1px, transparent 32px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  cursor: zoom-in;
}

body[data-page="worker"][data-theme="dark"] .worker-logbook-sheet {
  background:
    linear-gradient(90deg, transparent 0, transparent 36px, rgba(248, 113, 113, 0.14) 36px, rgba(248, 113, 113, 0.14) 38px, transparent 38px),
    repeating-linear-gradient(180deg, rgba(71, 85, 105, 0.38) 0, rgba(71, 85, 105, 0.38) 1px, transparent 1px, transparent 32px),
    linear-gradient(180deg, rgba(24, 34, 47, 0.98), rgba(17, 24, 36, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-page="worker"] .worker-logbook-sheet.is-opening {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 24px 42px -30px rgba(15, 23, 42, 0.3);
}

body[data-page="worker"].worker-logbook-sheet-open {
  overflow: hidden;
}

body[data-page="worker"] .worker-logbook-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 170;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

body[data-page="worker"] .worker-logbook-sheet-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

body[data-page="worker"] .worker-logbook-sheet.is-fullscreen {
  position: fixed;
  inset: 18px;
  z-index: 180;
  min-height: calc(100dvh - 36px);
  max-height: calc(100dvh - 36px);
  padding: 26px 28px 28px 40px;
  overflow: auto;
  cursor: text;
  box-shadow: 0 30px 72px -38px rgba(15, 23, 42, 0.42);
}

body[data-page="worker"][data-theme="dark"] .worker-logbook-sheet.is-fullscreen {
  box-shadow: 0 34px 80px -42px rgba(0, 0, 0, 0.7);
}

body[data-page="worker"] .worker-logbook-sheet-paper-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body[data-page="worker"] .worker-logbook-sheet-paper-copy {
  display: grid;
  gap: 4px;
}

body[data-page="worker"] .worker-logbook-sheet-close {
  flex-shrink: 0;
}

body[data-page="worker"] .worker-logbook-sheet-kicker {
  color: var(--worker-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body[data-page="worker"] .worker-logbook-sheet-paper-head strong {
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  line-height: 1.2;
}

body[data-page="worker"] .worker-logbook-sheet-paper-head small {
  color: var(--worker-muted);
  font-size: 13px;
}

body[data-page="worker"] .worker-logbook-sheet-timeline {
  display: grid;
  gap: 10px;
}

body[data-page="worker"] .worker-logbook-timeline-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(255, 255, 255, 0.46);
}

body[data-page="worker"][data-theme="dark"] .worker-logbook-timeline-item {
  background: rgba(15, 23, 34, 0.46);
  border-color: rgba(71, 85, 105, 0.44);
}

body[data-page="worker"] .worker-logbook-timeline-item.is-done {
  opacity: 0.7;
}

body[data-page="worker"] .worker-logbook-timeline-order {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.08);
  color: var(--worker-text);
  font-size: 11px;
  font-weight: 700;
}

body[data-page="worker"][data-theme="dark"] .worker-logbook-timeline-order {
  background: rgba(255, 255, 255, 0.08);
}

body[data-page="worker"] .worker-logbook-timeline-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body[data-page="worker"] .worker-logbook-timeline-copy strong {
  font-size: 14px;
}

body[data-page="worker"] .worker-logbook-timeline-copy p {
  margin: 0;
  color: var(--worker-muted);
  font-size: 12px;
  line-height: 1.45;
}

body[data-page="worker"] .worker-logbook-timeline-state {
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.12);
  color: var(--worker-cal-green);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

body[data-page="worker"] .worker-logbook-timeline-item.is-overdue .worker-logbook-timeline-state {
  background: rgba(220, 38, 38, 0.12);
  color: var(--worker-cal-red);
}

body[data-page="worker"] .worker-logbook-timeline-empty {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px dashed rgba(148, 163, 184, 0.28);
  color: var(--worker-muted);
  background: rgba(255, 255, 255, 0.34);
}

body[data-page="worker"][data-theme="dark"] .worker-logbook-timeline-empty {
  background: rgba(15, 23, 34, 0.34);
  border-color: rgba(71, 85, 105, 0.5);
}

body[data-page="worker"] .worker-logbook-editor {
  min-height: 240px;
  outline: none;
  color: var(--worker-text);
  font-size: 16px;
  line-height: 2;
  white-space: pre-wrap;
  word-break: break-word;
}

body[data-page="worker"] .worker-logbook-sheet.is-fullscreen .worker-logbook-editor {
  min-height: 58dvh;
  font-size: 17px;
}

body[data-page="worker"] .worker-logbook-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--worker-muted);
}

body[data-page="worker"] .worker-logbook-days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

body[data-page="worker"] .worker-logbook-day {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--worker-border);
  background: rgba(255, 255, 255, 0.5);
  text-align: left;
  cursor: pointer;
}

body[data-page="worker"][data-theme="dark"] .worker-logbook-day {
  background: rgba(15, 23, 34, 0.5);
}

body[data-page="worker"] .worker-logbook-day strong {
  font-size: 14px;
  line-height: 1.4;
}

body[data-page="worker"] .worker-logbook-day span {
  color: var(--worker-muted);
  font-size: 12px;
  line-height: 1.5;
}

body[data-page="worker"] .worker-logbook-day.is-active {
  border-color: rgba(220, 38, 38, 0.32);
  background: rgba(220, 38, 38, 0.06);
}

body[data-page="worker"] .worker-logbook-day.is-draft {
  border-style: dashed;
}

@media (max-width: 1150px) {
  body[data-page="worker"] .worker-logbook-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  body[data-page="worker"] .worker-logbook-board-head,
  body[data-page="worker"] .worker-logbook-sheet-head,
  body[data-page="worker"] .worker-logbook-ai-head,
  body[data-page="worker"] .worker-logbook-ai-form,
  body[data-page="worker"] .worker-logbook-timeline-item {
    display: grid;
    grid-template-columns: 1fr;
  }

  body[data-page="worker"] .worker-logbook-grid {
    grid-auto-rows: minmax(92px, auto);
  }

  body[data-page="worker"] .worker-logbook-sheet {
    padding: 18px 18px 20px 26px;
  }

  body[data-page="worker"] .worker-logbook-sheet.is-fullscreen {
    inset: 8px;
    min-height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    padding: 16px 16px 18px 24px;
  }

  body[data-page="worker"] .worker-logbook-sheet-paper-head {
    display: grid;
    grid-template-columns: 1fr;
  }
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] {
  color: #edf3fb;
  background:
    radial-gradient(1100px 620px at 0% 0%, rgba(96, 165, 250, 0.18), transparent 58%),
    radial-gradient(980px 680px at 100% 0%, rgba(20, 184, 166, 0.16), transparent 52%),
    radial-gradient(760px 420px at 50% 100%, rgba(245, 158, 11, 0.1), transparent 62%),
    linear-gradient(180deg, #08111d 0%, #0b1624 42%, #09131f 100%);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-topbar,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-hero,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-sidebar,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-profile-card,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-section-card,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-broadcast-card,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-modal-card,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-board,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-detail,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-logbook-board,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-logbook-sheet-wrap,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-desktop-empty,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-desktop-editor {
  background:
    linear-gradient(160deg, rgba(13, 22, 35, 0.96), rgba(10, 18, 30, 0.9)),
    radial-gradient(circle at 16% 12%, rgba(56, 189, 248, 0.12), transparent 36%);
  border-color: rgba(97, 136, 180, 0.2);
  box-shadow:
    0 32px 72px -42px rgba(2, 6, 23, 0.92),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-topbar,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-user-pill,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-hero-stats article,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-profile-stats article,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-worker-card,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-cell,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-item,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-logbook-cell,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-logbook-timeline-item,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-logbook-day,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-list-empty,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-empty-state,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-delete-copy,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-hover-bubble {
  background: linear-gradient(160deg, rgba(17, 27, 40, 0.96), rgba(13, 20, 31, 0.98));
  border-color: rgba(96, 165, 250, 0.16);
  color: #edf3fb;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-hero {
  background:
    radial-gradient(circle at 14% 16%, rgba(20, 184, 166, 0.18), transparent 36%),
    radial-gradient(circle at 90% 10%, rgba(96, 165, 250, 0.2), transparent 34%),
    linear-gradient(145deg, rgba(11, 18, 30, 0.98), rgba(8, 14, 23, 0.96));
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-create-card {
  background:
    radial-gradient(circle at 12% 16%, rgba(96, 165, 250, 0.22), transparent 34%),
    linear-gradient(160deg, rgba(9, 19, 31, 0.98), rgba(7, 14, 24, 0.98));
  border: 1px solid rgba(96, 165, 250, 0.18);
  box-shadow: 0 34px 72px -44px rgba(2, 6, 23, 0.95);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-brand-mark,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-profile-avatar-fallback {
  background: linear-gradient(135deg, #22c55e, #0ea5e9 58%, #f59e0b);
  color: #08111d;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-kicker,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-profile-meta,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-worker-copy span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-worker-copy small,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-section-head span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-profile-copy p,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-hero-copy p,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-inline-status,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-copy span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-copy small,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-cell-preview,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-logbook-cell-preview,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-logbook-paper,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-logbook-timeline-copy p,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-hover-row span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-hover-more,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-search-field span {
  color: #97abc4;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-search-field input,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-profile-form input,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-profile-form select,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-rank-builder input,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-form input,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-section-head input[type="date"],
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] textarea,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-modal-card input,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-user-pill {
  background: rgba(10, 16, 26, 0.92);
  border-color: rgba(96, 165, 250, 0.16);
  color: #edf3fb;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-search-field input::placeholder,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] textarea::placeholder {
  color: #7890aa;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-detail-tab {
  background: rgba(10, 16, 26, 0.92);
  border-color: rgba(96, 165, 250, 0.16);
  color: #a9bdd4;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-detail-tab.is-active,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .btn.primary {
  background: linear-gradient(135deg, #22c55e, #0ea5e9 58%, #f59e0b);
  border-color: transparent;
  color: #08111d;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .btn.ghost {
  background: rgba(10, 16, 26, 0.86);
  border-color: rgba(96, 165, 250, 0.16);
  color: #edf3fb;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .btn.ghost:hover {
  background: rgba(18, 28, 42, 0.96);
  border-color: rgba(96, 165, 250, 0.34);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-worker-card.is-active,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-cell.is-selected,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-logbook-cell.is-selected,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-logbook-day.is-active {
  border-color: rgba(34, 197, 94, 0.36);
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.12), 0 18px 34px -28px rgba(14, 165, 233, 0.38);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-desktop-grid {
  background:
    radial-gradient(circle at 16% 18%, rgba(14, 165, 233, 0.18), transparent 34%),
    radial-gradient(circle at 84% 16%, rgba(34, 197, 94, 0.16), transparent 32%),
    linear-gradient(160deg, #0c1726, #08111d 78%);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-desktop-icon {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-logbook-sheet,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-logbook-board,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-logbook-sheet-wrap {
  background:
    linear-gradient(90deg, transparent 0, transparent 44px, rgba(248, 113, 113, 0.12) 44px, rgba(248, 113, 113, 0.12) 46px, transparent 46px),
    repeating-linear-gradient(180deg, rgba(71, 85, 105, 0.34) 0, rgba(71, 85, 105, 0.34) 1px, transparent 1px, transparent 34px),
    linear-gradient(180deg, rgba(16, 24, 36, 0.98), rgba(10, 17, 29, 0.98));
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-modal {
  background: rgba(3, 8, 18, 0.72);
}

body[data-page="worker"][data-theme="dark"] {
  background:
    radial-gradient(980px 560px at 0% 0%, rgba(14, 165, 233, 0.18), transparent 52%),
    radial-gradient(860px 520px at 100% 0%, rgba(34, 197, 94, 0.16), transparent 48%),
    radial-gradient(720px 480px at 50% 100%, rgba(245, 158, 11, 0.1), transparent 54%),
    linear-gradient(180deg, #07111c 0%, #0a1421 100%);
}

body[data-page="worker"][data-theme="dark"] .worker-topbar,
body[data-page="worker"][data-theme="dark"] .worker-login-card,
body[data-page="worker"][data-theme="dark"] .worker-profile-card,
body[data-page="worker"][data-theme="dark"] .worker-announcement-card,
body[data-page="worker"][data-theme="dark"] .worker-notification-card,
body[data-page="worker"][data-theme="dark"] .worker-panel,
body[data-page="worker"][data-theme="dark"] .worker-chat-shell,
body[data-page="worker"][data-theme="dark"] .worker-calendar-board,
body[data-page="worker"][data-theme="dark"] .worker-calendar-detail,
body[data-page="worker"][data-theme="dark"] .worker-logbook-board,
body[data-page="worker"][data-theme="dark"] .worker-logbook-sheet-wrap {
  background:
    linear-gradient(160deg, rgba(13, 21, 33, 0.96), rgba(9, 16, 27, 0.96)),
    radial-gradient(circle at 18% 12%, rgba(56, 189, 248, 0.12), transparent 36%);
  border-color: rgba(96, 165, 250, 0.16);
  box-shadow:
    0 34px 72px -44px rgba(2, 6, 23, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-page="worker"][data-theme="dark"] .worker-profile-avatar-wrap,
body[data-page="worker"][data-theme="dark"] .worker-profile-avatar-fallback {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.22), rgba(14, 165, 233, 0.2), rgba(245, 158, 11, 0.18));
}

body[data-page="worker"][data-theme="dark"] .worker-login-points li,
body[data-page="worker"][data-theme="dark"] .worker-quick-grid article,
body[data-page="worker"][data-theme="dark"] .worker-announcement-entry,
body[data-page="worker"][data-theme="dark"] .worker-announcement-history-item,
body[data-page="worker"][data-theme="dark"] .worker-notification-item,
body[data-page="worker"][data-theme="dark"] .worker-calendar-cell,
body[data-page="worker"][data-theme="dark"] .worker-calendar-zoom-item,
body[data-page="worker"][data-theme="dark"] .worker-logbook-cell,
body[data-page="worker"][data-theme="dark"] .worker-logbook-day,
body[data-page="worker"][data-theme="dark"] .worker-logbook-timeline-item,
body[data-page="worker"][data-theme="dark"] .worker-calendar-hover-bubble {
  background: linear-gradient(160deg, rgba(17, 26, 40, 0.96), rgba(11, 18, 29, 0.98));
  border-color: rgba(96, 165, 250, 0.14);
}

body[data-page="worker"][data-theme="dark"] .worker-calendar-cell.is-selected,
body[data-page="worker"][data-theme="dark"] .worker-logbook-cell.is-selected,
body[data-page="worker"][data-theme="dark"] .worker-logbook-day.is-active,
body[data-page="worker"][data-theme="dark"] .worker-tab.is-active,
body[data-page="worker"][data-theme="dark"] .worker-theme-switch .btn.is-active,
body[data-page="worker"][data-theme="dark"] .btn.primary {
  background: linear-gradient(135deg, #22c55e, #0ea5e9 58%, #f59e0b);
  border-color: transparent;
  color: #08111d;
}

body[data-page="worker"][data-theme="dark"] .worker-calendar-day-zoom-card {
  background:
    linear-gradient(160deg, rgba(13, 21, 33, 0.98), rgba(9, 16, 27, 0.98)),
    radial-gradient(circle at 18% 12%, rgba(56, 189, 248, 0.12), transparent 36%);
}

body[data-page="worker"][data-theme="dark"] .btn.ghost {
  background: rgba(10, 16, 26, 0.86);
  border-color: rgba(96, 165, 250, 0.16);
  color: #edf3fb;
}

body[data-page="worker"][data-theme="dark"] .btn.ghost:hover {
  background: rgba(17, 26, 40, 0.96);
  border-color: rgba(96, 165, 250, 0.34);
}

body[data-page="worker"][data-theme="dark"] .worker-calendar-ai-card,
body[data-page="worker"][data-theme="dark"] .worker-logbook-ai-card {
  background:
    linear-gradient(160deg, rgba(13, 21, 33, 0.84), rgba(9, 16, 27, 0.9)),
    radial-gradient(circle at 18% 12%, rgba(34, 197, 94, 0.12), transparent 36%);
  border-color: rgba(34, 197, 94, 0.18);
}

body[data-page="worker"][data-theme="dark"] .worker-announcement-history {
  border-top-color: rgba(96, 165, 250, 0.14);
}

/* Minimal polish for employer and worker areas */
body[data-page="app"][data-app-mode="workers"] {
  background:
    radial-gradient(720px 320px at 0% 0%, rgba(23, 50, 77, 0.08), transparent 58%),
    linear-gradient(180deg, #f3f5f7 0%, #edf1f4 100%);
  color: #132334;
}

body[data-page="app"][data-app-mode="workers"] .team-topbar,
body[data-page="app"][data-app-mode="workers"] .team-hero,
body[data-page="app"][data-app-mode="workers"] .team-sidebar,
body[data-page="app"][data-app-mode="workers"] .team-profile-card,
body[data-page="app"][data-app-mode="workers"] .team-section-card,
body[data-page="app"][data-app-mode="workers"] .team-create-card,
body[data-page="app"][data-app-mode="workers"] .team-broadcast-card,
body[data-page="app"][data-app-mode="workers"] .team-modal-card,
body[data-page="app"][data-app-mode="workers"] .team-calendar-board,
body[data-page="app"][data-app-mode="workers"] .team-calendar-detail,
body[data-page="app"][data-app-mode="workers"] .team-logbook-board,
body[data-page="app"][data-app-mode="workers"] .team-logbook-sheet-wrap,
body[data-page="app"][data-app-mode="workers"] .team-desktop-empty,
body[data-page="app"][data-app-mode="workers"] .team-desktop-editor {
  border-color: rgba(19, 35, 52, 0.08);
  box-shadow: 0 18px 40px -34px rgba(15, 23, 42, 0.14);
  backdrop-filter: none;
}

body[data-page="app"][data-app-mode="workers"] .team-topbar,
body[data-page="app"][data-app-mode="workers"] .team-sidebar,
body[data-page="app"][data-app-mode="workers"] .team-profile-card,
body[data-page="app"][data-app-mode="workers"] .team-section-card,
body[data-page="app"][data-app-mode="workers"] .team-broadcast-card,
body[data-page="app"][data-app-mode="workers"] .team-modal-card,
body[data-page="app"][data-app-mode="workers"] .team-calendar-board,
body[data-page="app"][data-app-mode="workers"] .team-calendar-detail,
body[data-page="app"][data-app-mode="workers"] .team-desktop-empty,
body[data-page="app"][data-app-mode="workers"] .team-desktop-editor {
  background: rgba(255, 255, 255, 0.94);
}

body[data-page="app"][data-app-mode="workers"] .team-topbar {
  padding: 16px 20px;
  border-radius: 22px;
}

body[data-page="app"][data-app-mode="workers"] .team-hero {
  padding: 24px;
  gap: 20px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 249, 251, 0.98));
}

body[data-page="app"][data-app-mode="workers"] .team-sidebar,
body[data-page="app"][data-app-mode="workers"] .team-profile-card,
body[data-page="app"][data-app-mode="workers"] .team-section-card {
  border-radius: 24px;
}

body[data-page="app"][data-app-mode="workers"] .team-brand-mark,
body[data-page="app"][data-app-mode="workers"] .team-profile-avatar-fallback {
  border-radius: 18px;
  background: #17324d;
  color: #f8fafc;
}

body[data-page="app"][data-app-mode="workers"] .team-worker-photo,
body[data-page="app"][data-app-mode="workers"] .team-profile-avatar-wrap {
  background: #edf2f6;
}

body[data-page="app"][data-app-mode="workers"] .team-user-pill,
body[data-page="app"][data-app-mode="workers"] .team-hero-stats article,
body[data-page="app"][data-app-mode="workers"] .team-profile-stats article,
body[data-page="app"][data-app-mode="workers"] .team-worker-card,
body[data-page="app"][data-app-mode="workers"] .team-calendar-item,
body[data-page="app"][data-app-mode="workers"] .team-logbook-day,
body[data-page="app"][data-app-mode="workers"] .team-list-empty,
body[data-page="app"][data-app-mode="workers"] .team-empty-state,
body[data-page="app"][data-app-mode="workers"] .team-delete-copy,
body[data-page="app"][data-app-mode="workers"] .team-calendar-hover-bubble {
  background: #ffffff;
  border-color: rgba(19, 35, 52, 0.08);
  box-shadow: 0 16px 34px -28px rgba(15, 23, 42, 0.12);
}

body[data-page="app"][data-app-mode="workers"] .team-create-card {
  border-radius: 24px;
  background: linear-gradient(180deg, #1a2d41 0%, #142334 100%);
  box-shadow: 0 20px 42px -34px rgba(15, 23, 42, 0.24);
}

body[data-page="app"][data-app-mode="workers"] .team-search-field input,
body[data-page="app"][data-app-mode="workers"] .team-profile-form input,
body[data-page="app"][data-app-mode="workers"] .team-profile-form select,
body[data-page="app"][data-app-mode="workers"] .team-rank-builder input,
body[data-page="app"][data-app-mode="workers"] .team-calendar-form input,
body[data-page="app"][data-app-mode="workers"] .team-section-head input[type="date"],
body[data-page="app"][data-app-mode="workers"] textarea,
body[data-page="app"][data-app-mode="workers"] .team-modal-card input {
  background: #ffffff;
  border-color: rgba(19, 35, 52, 0.1);
}

body[data-page="app"][data-app-mode="workers"] .team-worker-card {
  border-radius: 18px;
  background: #ffffff;
}

body[data-page="app"][data-app-mode="workers"] .team-worker-card.is-active,
body[data-page="app"][data-app-mode="workers"] .team-logbook-day.is-active {
  border-color: rgba(23, 50, 77, 0.18);
  background: #eef3f7;
  box-shadow: none;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-item {
  border-radius: 18px;
  background: #f8fafb;
}

body[data-page="app"][data-app-mode="workers"] .team-detail-tab {
  background: #ffffff;
  border-color: rgba(19, 35, 52, 0.08);
  color: #61758d;
}

body[data-page="app"][data-app-mode="workers"] .team-detail-tab.is-active,
body[data-page="app"][data-app-mode="workers"] .btn.primary {
  background: #17324d;
  border-color: #17324d;
  color: #ffffff;
}

body[data-page="app"][data-app-mode="workers"] .btn.ghost {
  background: #ffffff;
  border-color: rgba(19, 35, 52, 0.08);
  color: #132334;
}

body[data-page="app"][data-app-mode="workers"] .btn.ghost:hover {
  background: #eef3f7;
  border-color: rgba(23, 50, 77, 0.16);
}

body[data-page="app"][data-app-mode="workers"] .team-desktop-grid {
  background: linear-gradient(180deg, #183149 0%, #132639 100%);
}

body[data-page="app"][data-app-mode="workers"] .team-desktop-icon {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
}

body[data-page="app"][data-app-mode="workers"] .team-desktop-icon.is-active {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.14);
}

body[data-page="app"][data-app-mode="workers"] .team-logbook-board,
body[data-page="app"][data-app-mode="workers"] .team-logbook-sheet-wrap,
body[data-page="app"][data-app-mode="workers"] .team-logbook-sheet {
  background:
    linear-gradient(90deg, transparent 0, transparent 42px, rgba(220, 38, 38, 0.08) 42px, rgba(220, 38, 38, 0.08) 44px, transparent 44px),
    repeating-linear-gradient(180deg, rgba(148, 163, 184, 0.12) 0, rgba(148, 163, 184, 0.12) 1px, transparent 1px, transparent 34px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  box-shadow: 0 16px 32px -28px rgba(15, 23, 42, 0.12);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] {
  background:
    radial-gradient(760px 360px at 0% 0%, rgba(122, 155, 184, 0.12), transparent 58%),
    linear-gradient(180deg, #0b121b 0%, #101821 100%);
  color: #edf2f7;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-topbar,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-hero,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-sidebar,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-profile-card,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-section-card,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-broadcast-card,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-modal-card,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-board,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-detail,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-desktop-empty,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-desktop-editor {
  background: rgba(16, 24, 35, 0.9);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 22px 46px -36px rgba(0, 0, 0, 0.56);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-hero {
  background: linear-gradient(180deg, rgba(15, 23, 34, 0.94), rgba(11, 18, 28, 0.96));
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-company-inline-card {
  border-color: rgba(125, 211, 252, 0.12);
  background:
    radial-gradient(circle at 12% 16%, rgba(34, 211, 238, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(12, 23, 36, 0.94), rgba(10, 19, 31, 0.9));
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-company-inline-kicker,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-company-inline-card .team-inline-status {
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-company-inline-name:hover {
  color: #67e8f9;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-create-card {
  background: linear-gradient(180deg, rgba(19, 30, 42, 0.98), rgba(14, 23, 33, 0.98));
  border-color: rgba(255, 255, 255, 0.08);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-brand-mark,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-profile-avatar-fallback {
  background: #d7e4f0;
  color: #102033;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-user-pill,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-hero-stats article,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-profile-stats article,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-worker-card,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-groups-card,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-group-item,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-group-empty,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-item,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-logbook-day,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-list-empty,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-empty-state,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-delete-copy,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-hover-bubble {
  background: rgba(17, 25, 37, 0.96);
  border-color: rgba(255, 255, 255, 0.08);
  color: #edf2f7;
  box-shadow: 0 20px 40px -32px rgba(0, 0, 0, 0.44);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-kicker,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-profile-meta,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-worker-copy span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-worker-copy small,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-section-head span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-profile-copy p,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-hero-copy p,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-inline-status,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-groups-head span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-group-create-field span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-group-field span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-group-item-meta span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-group-item-meta small,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-copy span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-copy small,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-cell-preview,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-logbook-cell-preview,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-logbook-paper,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-logbook-timeline-copy p,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-hover-row span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-hover-more,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-search-field span {
  color: #9caec0;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-search-field input,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-group-create-form input,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-group-field input,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-profile-form input,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-profile-form select,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-rank-builder input,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-form input,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-section-head input[type="date"],
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] textarea,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-modal-card input,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-user-pill,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-detail-tab,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .btn.ghost {
  background: rgba(8, 13, 20, 0.72);
  border-color: rgba(255, 255, 255, 0.08);
  color: #edf2f7;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-search-field input::placeholder,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] textarea::placeholder {
  color: #7f92a7;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-group-handle {
  border-color: rgba(103, 232, 249, 0.18);
  background: rgba(8, 145, 178, 0.18);
  color: #bff8ff;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-group-member {
  background: rgba(8, 13, 20, 0.72);
  border-color: rgba(255, 255, 255, 0.08);
  color: #edf2f7;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-detail-tab.is-active,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .btn.primary {
  background: #d7e4f0;
  border-color: #d7e4f0;
  color: #0d1722;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .btn.ghost:hover {
  background: rgba(19, 29, 41, 0.96);
  border-color: rgba(255, 255, 255, 0.14);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-worker-card.is-active,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-cell.is-selected,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-logbook-cell.is-selected,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-logbook-day.is-active {
  background: rgba(215, 228, 240, 0.08);
  border-color: rgba(215, 228, 240, 0.24);
  box-shadow: none;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-desktop-grid {
  background: linear-gradient(180deg, #122030 0%, #0c1724 100%);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-desktop-icon {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-desktop-icon.is-active {
  background: rgba(215, 228, 240, 0.08);
  border-color: rgba(215, 228, 240, 0.22);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-logbook-board,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-logbook-sheet-wrap,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-logbook-sheet {
  background:
    linear-gradient(90deg, transparent 0, transparent 42px, rgba(248, 113, 113, 0.1) 42px, rgba(248, 113, 113, 0.1) 44px, transparent 44px),
    repeating-linear-gradient(180deg, rgba(71, 85, 105, 0.3) 0, rgba(71, 85, 105, 0.3) 1px, transparent 1px, transparent 34px),
    linear-gradient(180deg, rgba(19, 28, 40, 0.98), rgba(14, 22, 32, 0.98));
  box-shadow: 0 18px 36px -28px rgba(0, 0, 0, 0.42);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-modal {
  background: rgba(5, 9, 16, 0.66);
}

body[data-page="worker"] {
  --worker-bg: #edf1f4;
  --worker-surface: #ffffff;
  --worker-surface-soft: #f7f9fb;
  --worker-surface-strong: #ebf0f4;
  --worker-border: #dbe3ea;
  --worker-border-strong: #c8d3de;
  --worker-text: #132334;
  --worker-muted: #66788b;
  --worker-accent: #17324d;
  --worker-accent-soft: #eef3f7;
  --worker-shadow: 0 18px 40px -34px rgba(15, 23, 42, 0.14);
  background:
    radial-gradient(680px 320px at 0% 0%, rgba(23, 50, 77, 0.07), transparent 58%),
    linear-gradient(180deg, #f3f5f7 0%, #edf1f4 100%);
}

body[data-page="worker"][data-theme="dark"] {
  --worker-bg: #101821;
  --worker-surface: #131d29;
  --worker-surface-soft: #182331;
  --worker-surface-strong: #1f2c3b;
  --worker-border: #283648;
  --worker-border-strong: #374a61;
  --worker-text: #edf2f7;
  --worker-muted: #98aabd;
  --worker-accent: #d7e4f0;
  --worker-accent-soft: #202d3a;
  --worker-shadow: 0 22px 44px -36px rgba(0, 0, 0, 0.56);
  background:
    radial-gradient(760px 360px at 0% 0%, rgba(122, 155, 184, 0.14), transparent 58%),
    linear-gradient(180deg, #0b121b 0%, #101821 100%);
}

body[data-page="worker"] .worker-login-points li,
body[data-page="worker"] .worker-login-card,
body[data-page="worker"] .worker-topbar,
body[data-page="worker"] .worker-profile-card,
body[data-page="worker"] .worker-announcement-card,
body[data-page="worker"] .worker-notification-card,
body[data-page="worker"] .worker-panel,
body[data-page="worker"] .worker-chat-shell,
body[data-page="worker"] .worker-calendar-board,
body[data-page="worker"] .worker-calendar-detail,
body[data-page="worker"] .worker-calendar-ai-card,
body[data-page="worker"] .worker-logbook-ai-card {
  border-radius: 22px;
  background: var(--worker-surface);
  border-color: var(--worker-border);
  box-shadow: var(--worker-shadow);
}

body[data-page="worker"] .worker-topbar,
body[data-page="worker"] .worker-login-card,
body[data-page="worker"] .worker-profile-card,
body[data-page="worker"] .worker-announcement-card,
body[data-page="worker"] .worker-notification-card,
body[data-page="worker"] .worker-panel,
body[data-page="worker"] .worker-chat-shell {
  padding: 20px;
}

body[data-page="worker"] .worker-profile-avatar-wrap,
body[data-page="worker"] .worker-profile-avatar-fallback {
  background: var(--worker-accent-soft);
  border-color: var(--worker-border);
  color: var(--worker-accent);
}

body[data-page="worker"] .worker-profile-pill,
body[data-page="worker"] .worker-quick-grid article,
body[data-page="worker"] .worker-announcement-entry,
body[data-page="worker"] .worker-announcement-history-item,
body[data-page="worker"] .worker-notification-item,
body[data-page="worker"] .worker-calendar-cell,
body[data-page="worker"] .worker-calendar-zoom-item,
body[data-page="worker"] .worker-logbook-cell,
body[data-page="worker"] .worker-logbook-day,
body[data-page="worker"] .worker-logbook-timeline-item,
body[data-page="worker"] .worker-calendar-hover-bubble {
  background: var(--worker-surface-soft);
  border-color: var(--worker-border);
  box-shadow: none;
}

body[data-page="worker"] .worker-tab,
body[data-page="worker"] .btn.ghost {
  background: var(--worker-surface);
  border-color: var(--worker-border);
  color: var(--worker-text);
}

body[data-page="worker"] .worker-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: visible;
}

body[data-page="worker"] .worker-tab[data-tab="direct-chat"] {
  padding-right: 26px;
}

body[data-page="worker"] .worker-tab-badge {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 2px solid var(--worker-surface);
  background: linear-gradient(135deg, #fb7185, #ef4444);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 14px 28px -18px rgba(239, 68, 68, 0.92);
}

body[data-page="worker"] .worker-tab-badge[hidden] {
  display: none;
}

body[data-page="worker"] .worker-tab.is-active,
body[data-page="worker"] .worker-theme-switch .btn.is-active,
body[data-page="worker"] .btn.primary {
  background: var(--worker-accent);
  border-color: var(--worker-accent);
  color: #ffffff;
}

body[data-page="worker"][data-theme="dark"] .worker-tab.is-active,
body[data-page="worker"][data-theme="dark"] .worker-theme-switch .btn.is-active,
body[data-page="worker"][data-theme="dark"] .btn.primary {
  color: #0f1722;
}

body[data-page="worker"][data-theme="dark"] .worker-tab-badge {
  border-color: #0f1722;
}

body[data-page="worker"] .btn.ghost:hover {
  background: var(--worker-accent-soft);
  border-color: var(--worker-border-strong);
}

body[data-page="worker"] .worker-login-card input,
body[data-page="worker"] .worker-calendar-form input,
body[data-page="worker"] .worker-security-form input,
body[data-page="worker"] .worker-panel-head input[type="date"],
body[data-page="worker"] textarea {
  background: var(--worker-surface);
  border-color: var(--worker-border);
}

body[data-page="worker"] .worker-calendar-cell.is-selected {
  border-color: rgba(220, 38, 38, 0.28);
  background: rgba(220, 38, 38, 0.05);
}

body[data-page="worker"][data-theme="dark"] .worker-calendar-cell.is-selected {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.08);
}

body[data-page="worker"] .worker-calendar-cell.has-done-events:not(.has-events) {
  background: rgba(22, 163, 74, 0.05);
}

body[data-page="worker"][data-theme="dark"] .worker-calendar-cell.has-done-events:not(.has-events) {
  background: rgba(34, 197, 94, 0.08);
}

body[data-page="worker"] .worker-calendar-cell-count {
  background: var(--worker-cal-green-bg);
  color: var(--worker-cal-green);
}

body[data-page="worker"] .worker-calendar-ai-card,
body[data-page="worker"] .worker-logbook-ai-card {
  background: var(--worker-surface-soft);
  border-color: var(--worker-border-strong);
}

body[data-page="worker"] .worker-logbook-ai-card {
  gap: 14px;
  padding: 18px;
}

body[data-page="worker"] .worker-calendar-hover-bubble {
  background: var(--worker-surface);
  border-color: var(--worker-border-strong);
  box-shadow: 0 18px 36px -28px rgba(15, 23, 42, 0.18);
}

body[data-page="worker"] .worker-calendar-day-zoom {
  background: rgba(9, 13, 19, 0.4);
}

body[data-page="worker"][data-theme="dark"] .worker-calendar-day-zoom {
  background: rgba(2, 6, 23, 0.58);
}

body[data-page="worker"] .worker-calendar-day-zoom-card {
  background: var(--worker-surface);
  box-shadow: 0 26px 52px -36px rgba(15, 23, 42, 0.22);
}

body[data-page="worker"][data-theme="dark"] .worker-calendar-day-zoom-card {
  background: var(--worker-surface);
  box-shadow: 0 28px 56px -38px rgba(0, 0, 0, 0.56);
}

body[data-page="worker"] .worker-calendar-day-zoom-head {
  background: linear-gradient(180deg, var(--worker-surface) 0%, rgba(255, 255, 255, 0.9) 78%, transparent 100%);
}

body[data-page="worker"][data-theme="dark"] .worker-calendar-day-zoom-head {
  background: linear-gradient(180deg, rgba(19, 29, 41, 0.98) 0%, rgba(19, 29, 41, 0.88) 78%, transparent 100%);
}

body[data-page="worker"] .worker-logbook-board,
body[data-page="worker"] .worker-logbook-sheet-wrap,
body[data-page="worker"] .worker-logbook-sheet {
  background:
    linear-gradient(90deg, transparent 0, transparent 40px, rgba(220, 38, 38, 0.08) 40px, rgba(220, 38, 38, 0.08) 42px, transparent 42px),
    repeating-linear-gradient(180deg, rgba(148, 163, 184, 0.12) 0, rgba(148, 163, 184, 0.12) 1px, transparent 1px, transparent 32px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  box-shadow: 0 18px 36px -30px rgba(15, 23, 42, 0.14);
}

body[data-page="worker"][data-theme="dark"] .worker-logbook-board,
body[data-page="worker"][data-theme="dark"] .worker-logbook-sheet-wrap,
body[data-page="worker"][data-theme="dark"] .worker-logbook-sheet {
  background:
    linear-gradient(90deg, transparent 0, transparent 40px, rgba(248, 113, 113, 0.1) 40px, rgba(248, 113, 113, 0.1) 42px, transparent 42px),
    repeating-linear-gradient(180deg, rgba(71, 85, 105, 0.3) 0, rgba(71, 85, 105, 0.3) 1px, transparent 1px, transparent 32px),
    linear-gradient(180deg, rgba(20, 29, 40, 0.98), rgba(15, 23, 34, 0.98));
  box-shadow: 0 22px 44px -34px rgba(0, 0, 0, 0.42);
}

body[data-page="worker"] .worker-logbook-sheet.is-fullscreen {
  box-shadow: 0 28px 56px -36px rgba(15, 23, 42, 0.18);
}

body[data-page="worker"][data-theme="dark"] .worker-logbook-sheet.is-fullscreen {
  box-shadow: 0 30px 60px -38px rgba(0, 0, 0, 0.52);
}

/* Calendar accent in red */
body[data-page="app"][data-app-mode="workers"] .team-calendar-board,
body[data-page="app"][data-app-mode="workers"] .team-calendar-detail {
  background:
    radial-gradient(circle at 14% 12%, rgba(220, 38, 38, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 253, 0.98));
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-cell.is-today {
  border-color: rgba(220, 38, 38, 0.38);
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.12);
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-cell.is-selected {
  border-color: rgba(220, 38, 38, 0.34);
  background: rgba(220, 38, 38, 0.08);
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-cell.has-events {
  border-color: rgba(220, 38, 38, 0.28);
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-cell.has-done-events:not(.has-events) {
  border-color: rgba(220, 38, 38, 0.2);
  background: rgba(220, 38, 38, 0.05);
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-cell.has-shift:not(.has-events):not(.has-done-events) {
  border-color: rgba(59, 130, 246, 0.22);
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-cell.has-absence.is-vacation {
  border-color: rgba(59, 130, 246, 0.26);
  background: rgba(59, 130, 246, 0.08);
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-cell.has-absence.is-sick {
  border-color: rgba(239, 68, 68, 0.26);
  background: rgba(239, 68, 68, 0.08);
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-cell-count,
body[data-page="app"][data-app-mode="workers"] .team-calendar-order {
  background: #dc2626;
  color: #ffffff;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-item.is-overdue,
body[data-page="app"][data-app-mode="workers"] .team-calendar-item.is-upcoming,
body[data-page="app"][data-app-mode="workers"] .team-calendar-item.is-now {
  border-color: rgba(220, 38, 38, 0.24);
  background: linear-gradient(145deg, rgba(220, 38, 38, 0.08), rgba(255, 255, 255, 0.94));
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-board,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-detail {
  background:
    radial-gradient(circle at 14% 12%, rgba(239, 68, 68, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(15, 23, 34, 0.94), rgba(11, 18, 28, 0.96));
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-cell.is-selected,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-worker-card.is-active,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-logbook-cell.is-selected,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-logbook-day.is-active {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.24);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-cell.is-today {
  border-color: rgba(239, 68, 68, 0.32);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.12);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-cell.has-events {
  border-color: rgba(239, 68, 68, 0.24);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-cell.has-done-events:not(.has-events) {
  border-color: rgba(239, 68, 68, 0.18);
  background: rgba(239, 68, 68, 0.06);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-cell.has-shift:not(.has-events):not(.has-done-events) {
  border-color: rgba(96, 165, 250, 0.26);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-cell.has-absence.is-vacation {
  border-color: rgba(96, 165, 250, 0.3);
  background: rgba(59, 130, 246, 0.16);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-cell.has-absence.is-sick {
  border-color: rgba(248, 113, 113, 0.3);
  background: rgba(239, 68, 68, 0.16);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-cell-count,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-order {
  background: #ef4444;
  color: #ffffff;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-item.is-overdue,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-item.is-upcoming,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-item.is-now {
  border-color: rgba(239, 68, 68, 0.24);
  background: rgba(239, 68, 68, 0.08);
}

body[data-page="worker"] .worker-calendar-board,
body[data-page="worker"] .worker-calendar-detail {
  background:
    radial-gradient(circle at 14% 12%, rgba(220, 38, 38, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 249, 251, 0.98));
}

body[data-page="worker"] .worker-calendar-cell.is-today {
  border-color: rgba(220, 38, 38, 0.38);
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.12);
}

body[data-page="worker"] .worker-calendar-cell.is-selected {
  border-color: rgba(220, 38, 38, 0.32);
  background: rgba(220, 38, 38, 0.08);
}

body[data-page="worker"] .worker-calendar-cell.has-events {
  border-color: rgba(220, 38, 38, 0.28);
}

body[data-page="worker"] .worker-calendar-cell.has-done-events:not(.has-events) {
  border-color: rgba(220, 38, 38, 0.2);
  background: rgba(220, 38, 38, 0.05);
}

body[data-page="worker"] .worker-calendar-cell-count,
body[data-page="worker"] .worker-calendar-zoom-order {
  background: #dc2626;
  color: #ffffff;
}

body[data-page="worker"] .worker-calendar-ai-card {
  border-color: rgba(220, 38, 38, 0.2);
  background: rgba(220, 38, 38, 0.06);
}

body[data-page="worker"] .worker-calendar-zoom-item.is-overdue,
body[data-page="worker"] .worker-calendar-zoom-item.is-now,
body[data-page="worker"] .worker-calendar-zoom-item.is-upcoming {
  border-color: rgba(220, 38, 38, 0.24);
  background: rgba(220, 38, 38, 0.08);
}

body[data-page="worker"] .worker-calendar-zoom-item.is-now .worker-calendar-zoom-state,
body[data-page="worker"] .worker-calendar-zoom-item.is-upcoming .worker-calendar-zoom-state,
body[data-page="worker"] .worker-calendar-zoom-item.is-done .worker-calendar-zoom-state,
body[data-page="worker"] .worker-calendar-zoom-item.is-overdue .worker-calendar-zoom-state {
  border-color: rgba(220, 38, 38, 0.24);
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

body[data-page="worker"] .worker-calendar-day-zoom {
  background: rgba(76, 10, 10, 0.18);
}

body[data-page="worker"][data-theme="dark"] .worker-calendar-board,
body[data-page="worker"][data-theme="dark"] .worker-calendar-detail {
  background:
    radial-gradient(circle at 14% 12%, rgba(239, 68, 68, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(19, 29, 41, 0.98), rgba(15, 23, 34, 0.98));
}

body[data-page="worker"][data-theme="dark"] .worker-calendar-cell.is-today {
  border-color: rgba(239, 68, 68, 0.32);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.12);
}

body[data-page="worker"][data-theme="dark"] .worker-calendar-cell.is-selected {
  border-color: rgba(239, 68, 68, 0.28);
  background: rgba(239, 68, 68, 0.08);
}

body[data-page="worker"][data-theme="dark"] .worker-calendar-cell.has-events {
  border-color: rgba(239, 68, 68, 0.24);
}

body[data-page="worker"][data-theme="dark"] .worker-calendar-cell.has-done-events:not(.has-events) {
  border-color: rgba(239, 68, 68, 0.18);
  background: rgba(239, 68, 68, 0.06);
}

body[data-page="worker"][data-theme="dark"] .worker-calendar-cell-count,
body[data-page="worker"][data-theme="dark"] .worker-calendar-zoom-order {
  background: #ef4444;
  color: #ffffff;
}

body[data-page="worker"][data-theme="dark"] .worker-calendar-ai-card {
  border-color: rgba(239, 68, 68, 0.22);
  background: rgba(239, 68, 68, 0.08);
}

body[data-page="worker"][data-theme="dark"] .worker-calendar-zoom-item.is-overdue,
body[data-page="worker"][data-theme="dark"] .worker-calendar-zoom-item.is-now,
body[data-page="worker"][data-theme="dark"] .worker-calendar-zoom-item.is-upcoming {
  border-color: rgba(239, 68, 68, 0.24);
  background: rgba(239, 68, 68, 0.08);
}

body[data-page="worker"][data-theme="dark"] .worker-calendar-zoom-item.is-now .worker-calendar-zoom-state,
body[data-page="worker"][data-theme="dark"] .worker-calendar-zoom-item.is-upcoming .worker-calendar-zoom-state,
body[data-page="worker"][data-theme="dark"] .worker-calendar-zoom-item.is-done .worker-calendar-zoom-state,
body[data-page="worker"][data-theme="dark"] .worker-calendar-zoom-item.is-overdue .worker-calendar-zoom-state {
  border-color: rgba(239, 68, 68, 0.24);
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
}

body[data-page="worker"][data-theme="dark"] .worker-calendar-day-zoom {
  background: rgba(69, 10, 10, 0.28);
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-form .team-calendar-form-span {
  grid-column: 1 / -1;
}

body[data-page="app"][data-app-mode="workers"] .team-ops-overview,
body[data-page="worker"] .worker-ops-overview-card,
body[data-page="worker"] .worker-ops-mode-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(220, 38, 38, 0.16);
  background: rgba(220, 38, 38, 0.05);
}

body[data-page="worker"] .worker-ops-shell {
  display: grid;
  gap: 12px;
}

body[data-page="app"][data-app-mode="workers"] .team-ops-summary-grid,
body[data-page="worker"] .worker-ops-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body[data-page="app"][data-app-mode="workers"] .team-ops-summary-grid article,
body[data-page="worker"] .worker-ops-summary-grid article {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(16, 32, 51, 0.08);
  background: rgba(255, 255, 255, 0.92);
}

body[data-page="app"][data-app-mode="workers"] .team-ops-summary-grid strong,
body[data-page="worker"] .worker-ops-summary-grid strong {
  font-size: 1.15rem;
}

body[data-page="app"][data-app-mode="workers"] .team-ops-summary-grid span,
body[data-page="worker"] .worker-ops-summary-grid span {
  color: #61758d;
  font-size: 13px;
}

body[data-page="app"][data-app-mode="workers"] .team-ops-cards,
body[data-page="worker"] .worker-ops-cards {
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="workers"] .team-workforce-card {
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.7), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
  box-shadow: 0 22px 48px -34px rgba(15, 23, 42, 0.24);
}

body[data-page="app"][data-app-mode="workers"] .team-workforce-head,
body[data-page="app"][data-app-mode="workers"] .team-workforce-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

body[data-page="app"][data-app-mode="workers"] .team-workforce-head > div,
body[data-page="app"][data-app-mode="workers"] .team-workforce-panel-head > div {
  display: grid;
  gap: 6px;
}

body[data-page="app"][data-app-mode="workers"] .team-workforce-head span,
body[data-page="app"][data-app-mode="workers"] .team-workforce-panel-head span {
  color: #61758d;
  line-height: 1.5;
}

body[data-page="app"][data-app-mode="workers"] .team-workforce-company-defaults {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  justify-content: stretch;
  gap: 12px;
  width: min(100%, 420px);
}

body[data-page="app"][data-app-mode="workers"] .team-workforce-company-default {
  display: grid;
  gap: 8px;
  min-width: 0;
}

body[data-page="app"][data-app-mode="workers"] .team-workforce-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

body[data-page="app"][data-app-mode="workers"] .team-workforce-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

body[data-page="app"][data-app-mode="workers"] .team-workforce-actions,
body[data-page="app"][data-app-mode="workers"] .team-workforce-absence-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body[data-page="app"][data-app-mode="workers"] .team-workforce-days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 10px;
}

body[data-page="app"][data-app-mode="workers"] .team-workforce-day {
  display: grid;
  gap: 4px;
  padding: 12px 10px;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(248, 250, 252, 0.8);
  text-align: left;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

body[data-page="app"][data-app-mode="workers"] .team-workforce-day strong {
  font-size: 13px;
}

body[data-page="app"][data-app-mode="workers"] .team-workforce-day span {
  font-size: 11px;
  color: #70849a;
}

body[data-page="app"][data-app-mode="workers"] .team-workforce-day:hover,
body[data-page="app"][data-app-mode="workers"] .team-workforce-day:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(59, 130, 246, 0.24);
}

body[data-page="app"][data-app-mode="workers"] .team-workforce-day.is-configured {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.18);
}

body[data-page="app"][data-app-mode="workers"] .team-workforce-day.is-active {
  background: linear-gradient(145deg, rgba(59, 130, 246, 0.14), rgba(255, 255, 255, 0.92));
  border-color: rgba(59, 130, 246, 0.26);
  box-shadow: 0 14px 24px -20px rgba(59, 130, 246, 0.48);
}

body[data-page="app"][data-app-mode="workers"] .team-workforce-time-form,
body[data-page="app"][data-app-mode="workers"] .team-workforce-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

body[data-page="app"][data-app-mode="workers"] .team-workforce-company-default input {
  width: 100%;
}

body[data-page="app"][data-app-mode="workers"] .team-workforce-company-defaults .btn {
  width: 100%;
  white-space: nowrap;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-detail .team-workforce-grid {
  grid-template-columns: 1fr;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-detail .team-workforce-panel {
  padding: 18px;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-detail .team-workforce-admin-grid {
  grid-template-columns: 1fr;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-detail .team-workforce-absence-actions {
  display: grid;
  grid-template-columns: 1fr;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-detail .team-workforce-absence-actions .btn {
  width: 100%;
  justify-content: center;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-detail .team-calendar-list .team-list-empty,
body[data-page="app"][data-app-mode="workers"] .team-calendar-detail .team-calendar-list .team-calendar-item {
  border-radius: 20px;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-detail .team-calendar-list .team-list-empty {
  padding: 18px 20px;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-detail .team-calendar-list .team-calendar-item {
  align-items: flex-start;
}

body[data-page="app"][data-app-mode="workers"] .team-workforce-time-form .btn,
body[data-page="app"][data-app-mode="workers"] .team-workforce-admin-note {
  grid-column: 1 / -1;
}

body[data-page="app"][data-app-mode="workers"] .team-workforce-current {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(15, 23, 42, 0.03);
}

body[data-page="app"][data-app-mode="workers"] .team-workforce-current-hero {
  display: grid;
  gap: 4px;
}

body[data-page="app"][data-app-mode="workers"] .team-workforce-current-hero span {
  color: #61758d;
  line-height: 1.5;
}

body[data-page="app"][data-app-mode="workers"] .team-workforce-current-list,
body[data-page="app"][data-app-mode="workers"] .team-workforce-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

body[data-page="app"][data-app-mode="workers"] .team-workforce-current-chip,
body[data-page="app"][data-app-mode="workers"] .team-workforce-metric {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.9);
}

body[data-page="app"][data-app-mode="workers"] .team-workforce-current-chip {
  font-size: 12px;
  color: #43576d;
}

body[data-page="app"][data-app-mode="workers"] .team-workforce-current-chip.is-empty {
  background: rgba(15, 23, 42, 0.04);
  color: #61758d;
}

body[data-page="app"][data-app-mode="workers"] .team-workforce-metric span,
body[data-page="app"][data-app-mode="workers"] .team-workforce-metric small {
  color: #61758d;
}

body[data-page="app"][data-app-mode="workers"] .team-workforce-metric strong {
  font-size: 1.22rem;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-absence-card {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(248, 250, 252, 0.9);
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-absence-card.is-vacation {
  border-color: rgba(59, 130, 246, 0.2);
  background: rgba(59, 130, 246, 0.08);
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-absence-card.is-sick {
  border-color: rgba(239, 68, 68, 0.2);
  background: rgba(239, 68, 68, 0.08);
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-absence-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-absence-head span,
body[data-page="app"][data-app-mode="workers"] .team-calendar-absence-card p {
  color: #61758d;
}

body[data-page="app"][data-app-mode="workers"] .team-ops-card,
body[data-page="worker"] .worker-ops-card,
body[data-page="worker"] .worker-ops-focus-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(16, 32, 51, 0.08);
  background: rgba(255, 255, 255, 0.94);
}

body[data-page="worker"] .worker-ops-card {
  text-align: left;
  cursor: pointer;
  font: inherit;
}

body[data-page="worker"] .worker-ops-card.is-active {
  border-color: rgba(220, 38, 38, 0.28);
  background: rgba(220, 38, 38, 0.08);
}

body[data-page="app"][data-app-mode="workers"] .team-ops-card-head,
body[data-page="worker"] .worker-ops-card-head,
body[data-page="worker"] .worker-ops-focus-head,
body[data-page="worker"] .worker-ops-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body[data-page="app"][data-app-mode="workers"] .team-ops-card p,
body[data-page="app"][data-app-mode="workers"] .team-ops-card small,
body[data-page="worker"] .worker-ops-card p,
body[data-page="worker"] .worker-ops-card small,
body[data-page="worker"] .worker-ops-focus-meta,
body[data-page="worker"] .worker-ops-focus-note,
body[data-page="worker"] .worker-ops-head span {
  color: #61758d;
  line-height: 1.5;
}

body[data-page="worker"] .worker-ops-card-note {
  font-weight: 600;
}

body[data-page="app"][data-app-mode="workers"] .team-ops-badge,
body[data-page="worker"] .worker-ops-badge {
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(16, 32, 51, 0.08);
  background: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

body[data-page="app"][data-app-mode="workers"] .team-ops-badge.is-planned,
body[data-page="worker"] .worker-ops-badge.is-planned {
  border-color: rgba(59, 130, 246, 0.22);
  background: rgba(59, 130, 246, 0.1);
  color: #1d4ed8;
}

body[data-page="app"][data-app-mode="workers"] .team-ops-badge.is-in_progress,
body[data-page="worker"] .worker-ops-badge.is-in_progress {
  border-color: rgba(16, 185, 129, 0.24);
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
}

body[data-page="app"][data-app-mode="workers"] .team-ops-badge.is-paused,
body[data-page="worker"] .worker-ops-badge.is-paused {
  border-color: rgba(245, 158, 11, 0.26);
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
}

body[data-page="app"][data-app-mode="workers"] .team-ops-badge.is-done,
body[data-page="worker"] .worker-ops-badge.is-done {
  border-color: rgba(220, 38, 38, 0.22);
  background: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-facts,
body[data-page="worker"] .worker-calendar-zoom-facts {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-fact,
body[data-page="worker"] .worker-calendar-zoom-fact,
body[data-page="worker"] .worker-ops-fact {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(16, 32, 51, 0.04);
  color: #44586e;
  font-size: 12px;
  line-height: 1.45;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-fact strong,
body[data-page="worker"] .worker-calendar-zoom-fact strong,
body[data-page="worker"] .worker-ops-fact strong {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #70849a;
}

body[data-page="worker"] .worker-ops-list,
body[data-page="worker"] .worker-ops-focus {
  display: grid;
  gap: 12px;
}

body[data-page="worker"] .worker-ops-status-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body[data-page="worker"] .worker-ops-status-actions .btn.is-active {
  border-color: rgba(220, 38, 38, 0.24);
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}

body[data-page="worker"] .worker-ops-field {
  display: grid;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

body[data-page="worker"] .worker-ops-field textarea {
  min-height: 96px;
  resize: vertical;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-ops-overview,
body[data-page="worker"][data-theme="dark"] .worker-ops-overview-card,
body[data-page="worker"][data-theme="dark"] .worker-ops-mode-card {
  border-color: rgba(239, 68, 68, 0.2);
  background: rgba(239, 68, 68, 0.08);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-workforce-card {
  border-color: rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 12% 12%, rgba(59, 130, 246, 0.12), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(239, 68, 68, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(9, 15, 25, 0.98));
  box-shadow: 0 30px 60px -44px rgba(0, 0, 0, 0.66);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-workforce-head span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-workforce-panel-head span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-workforce-current-hero span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-workforce-metric span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-workforce-metric small,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-workforce-company-default,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-absence-head span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-absence-card p {
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-workforce-panel,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-workforce-current,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-workforce-current-chip,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-workforce-metric,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-absence-card {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.76);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-workforce-day {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.72);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-workforce-day span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-workforce-current-chip {
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-workforce-day.is-configured {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.18);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-workforce-day.is-active {
  background: linear-gradient(145deg, rgba(59, 130, 246, 0.16), rgba(15, 23, 42, 0.9));
  border-color: rgba(96, 165, 250, 0.28);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-absence-card.is-vacation {
  background: rgba(59, 130, 246, 0.14);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-absence-card.is-sick {
  background: rgba(239, 68, 68, 0.14);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-ai-card {
  border-color: rgba(239, 68, 68, 0.2);
  background: rgba(239, 68, 68, 0.08);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .calendar-submit-button,
body[data-page="worker"][data-theme="dark"] .calendar-submit-button {
  background: linear-gradient(180deg, #ff5f50 0%, #f14135 100%);
  box-shadow: 0 20px 34px -22px rgba(241, 65, 53, 0.95);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .calendar-submit-button:hover,
body[data-page="worker"][data-theme="dark"] .calendar-submit-button:hover {
  background: linear-gradient(180deg, #ff7467 0%, #f14135 100%);
  box-shadow: 0 24px 36px -22px rgba(255, 95, 80, 1);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-day-zoom {
  background:
    radial-gradient(circle at 12% 10%, rgba(239, 68, 68, 0.16), transparent 34%),
    radial-gradient(circle at 84% 18%, rgba(59, 130, 246, 0.14), transparent 38%),
    rgba(2, 6, 23, 0.66);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-day-zoom-card {
  border-color: rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 14% 12%, rgba(239, 68, 68, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(11, 18, 28, 0.98));
  box-shadow: 0 36px 84px -48px rgba(0, 0, 0, 0.62);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-day-zoom-copy span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-day-zoom-worker-head span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-day-zoom-time span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-day-zoom-entry-copy > span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-day-zoom-entry-copy small,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-day-zoom-loading,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-day-zoom-empty {
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-day-zoom-loading strong,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-day-zoom-empty strong,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-day-zoom-worker-head strong,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-day-zoom-entry-copy strong,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-day-zoom-time strong {
  color: #edf2f7;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-day-zoom-loading,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-day-zoom-empty,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-day-zoom-worker,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-day-zoom-entry {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.76);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-day-zoom-entry.is-overdue,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-day-zoom-entry.is-now,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-day-zoom-entry.is-upcoming {
  background: linear-gradient(145deg, rgba(239, 68, 68, 0.12), rgba(15, 23, 42, 0.84));
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-day-zoom-entry.is-done {
  background: linear-gradient(145deg, rgba(16, 185, 129, 0.12), rgba(15, 23, 42, 0.84));
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-checklist,
body[data-page="worker"][data-theme="dark"] .worker-calendar-checklist {
  --calendar-check-background: rgba(15, 23, 42, 0.12);
  --calendar-check-text: #edf2f7;
  --calendar-check-mark: #8b5cf6;
  --calendar-check-disabled: #94a3b8;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-ai-suggestion,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-ai-form textarea {
  background: rgba(15, 23, 42, 0.76);
  border-color: rgba(255, 255, 255, 0.08);
  color: #edf2f7;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-ai-suggestion strong {
  color: #edf2f7;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-ai-suggestion span {
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-main-stack {
  display: grid;
  gap: 16px;
  align-content: start;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-insights-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 16px;
  align-items: start;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-entry-card,
body[data-page="app"][data-app-mode="workers"] .team-calendar-overview-shell,
body[data-page="app"][data-app-mode="workers"] .team-calendar-metrics-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(19, 35, 52, 0.08);
  box-shadow: 0 20px 42px -34px rgba(15, 23, 42, 0.18);
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-entry-card {
  background:
    radial-gradient(circle at 10% 12%, rgba(14, 165, 233, 0.12), transparent 34%),
    radial-gradient(circle at 88% 14%, rgba(34, 197, 94, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 253, 0.98));
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-overview-shell,
body[data-page="app"][data-app-mode="workers"] .team-calendar-metrics-card {
  background:
    radial-gradient(circle at 14% 14%, rgba(14, 165, 233, 0.08), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 252, 0.98));
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-card-head,
body[data-page="app"][data-app-mode="workers"] .team-calendar-entry-card .team-calendar-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-card-head > div {
  display: grid;
  gap: 6px;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-card-head span {
  color: #61758d;
  line-height: 1.55;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-overview-card {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-metrics-card .team-workforce-metrics {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-metrics-card .team-inline-status,
body[data-page="app"][data-app-mode="workers"] .team-calendar-entry-card .team-inline-status {
  margin: 0;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-ai-card {
  border-color: rgba(14, 165, 233, 0.14);
  background:
    radial-gradient(circle at 14% 16%, rgba(14, 165, 233, 0.08), transparent 36%),
    radial-gradient(circle at 86% 18%, rgba(129, 140, 248, 0.08), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 252, 0.98));
  box-shadow: 0 18px 36px -30px rgba(15, 23, 42, 0.16);
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-ai-head span {
  color: #61758d;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-board,
body[data-page="app"][data-app-mode="workers"] .team-calendar-detail {
  background:
    radial-gradient(circle at 14% 12%, rgba(14, 165, 233, 0.08), transparent 34%),
    radial-gradient(circle at 86% 16%, rgba(34, 197, 94, 0.06), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 253, 0.98));
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-cell.is-today {
  border-color: rgba(14, 165, 233, 0.32);
  box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.1);
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-cell.is-selected {
  border-color: rgba(14, 165, 233, 0.3);
  background: rgba(14, 165, 233, 0.08);
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-cell.has-events {
  border-color: rgba(14, 165, 233, 0.24);
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-cell.has-done-events:not(.has-events) {
  border-color: rgba(16, 185, 129, 0.22);
  background: rgba(16, 185, 129, 0.05);
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-cell-count,
body[data-page="app"][data-app-mode="workers"] .team-calendar-order {
  background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 100%);
  color: #ffffff;
}

body[data-page="app"][data-app-mode="workers"] .team-calendar-item.is-overdue,
body[data-page="app"][data-app-mode="workers"] .team-calendar-item.is-upcoming,
body[data-page="app"][data-app-mode="workers"] .team-calendar-item.is-now {
  border-color: rgba(14, 165, 233, 0.2);
  background: linear-gradient(145deg, rgba(14, 165, 233, 0.06), rgba(255, 255, 255, 0.94));
}

body[data-page="app"][data-app-mode="workers"] .calendar-submit-button {
  background: linear-gradient(135deg, #0ea5e9 0%, #22c55e 100%);
  box-shadow: 0 18px 30px -20px rgba(14, 165, 233, 0.5);
}

body[data-page="app"][data-app-mode="workers"] .calendar-submit-button:hover {
  background: linear-gradient(135deg, #38bdf8 0%, #34d399 100%);
  box-shadow: 0 22px 34px -20px rgba(14, 165, 233, 0.6);
}

body[data-page="app"][data-app-mode="workers"] .calendar-submit-button:focus-visible {
  outline: 2px solid rgba(14, 165, 233, 0.32);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-entry-card,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-overview-shell,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-metrics-card {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 26px 54px -38px rgba(0, 0, 0, 0.5);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-entry-card {
  background:
    radial-gradient(circle at 12% 14%, rgba(14, 165, 233, 0.16), transparent 34%),
    radial-gradient(circle at 86% 18%, rgba(34, 197, 94, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(13, 22, 34, 0.98), rgba(10, 17, 27, 0.96));
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-overview-shell,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-metrics-card {
  background:
    radial-gradient(circle at 14% 16%, rgba(56, 189, 248, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(16, 24, 35, 0.98), rgba(11, 18, 28, 0.96));
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-card-head span {
  color: #9caec0;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-ai-card {
  border-color: rgba(96, 165, 250, 0.18);
  background:
    radial-gradient(circle at 16% 16%, rgba(14, 165, 233, 0.14), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(129, 140, 248, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(16, 24, 35, 0.96), rgba(11, 18, 28, 0.94));
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-board,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-detail {
  background:
    radial-gradient(circle at 14% 12%, rgba(14, 165, 233, 0.14), transparent 34%),
    radial-gradient(circle at 86% 16%, rgba(34, 197, 94, 0.1), transparent 32%),
    linear-gradient(180deg, rgba(15, 23, 34, 0.94), rgba(11, 18, 28, 0.96));
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-cell.is-selected {
  background: rgba(14, 165, 233, 0.08);
  border-color: rgba(56, 189, 248, 0.26);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-cell.is-today {
  border-color: rgba(56, 189, 248, 0.3);
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.12);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-cell.has-events {
  border-color: rgba(56, 189, 248, 0.24);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-cell-count,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-order {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-item.is-overdue,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-item.is-upcoming,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-item.is-now {
  border-color: rgba(56, 189, 248, 0.18);
  background: linear-gradient(145deg, rgba(14, 165, 233, 0.1), rgba(15, 23, 42, 0.84));
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-detail .team-workforce-company-defaults {
  width: 100%;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .calendar-submit-button {
  background: linear-gradient(135deg, #0ea5e9 0%, #22c55e 100%);
  box-shadow: 0 20px 34px -22px rgba(14, 165, 233, 0.56);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .calendar-submit-button:hover {
  background: linear-gradient(135deg, #38bdf8 0%, #34d399 100%);
  box-shadow: 0 24px 38px -22px rgba(14, 165, 233, 0.64);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-weekdays span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-logbook-weekdays span,
body[data-page="worker"][data-theme="dark"] .worker-calendar-weekdays span {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-ops-summary-grid article,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-ops-card,
body[data-page="worker"][data-theme="dark"] .worker-ops-summary-grid article,
body[data-page="worker"][data-theme="dark"] .worker-ops-card,
body[data-page="worker"][data-theme="dark"] .worker-ops-focus-card {
  background: rgba(15, 23, 42, 0.76);
  border-color: rgba(255, 255, 255, 0.08);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-ops-summary-grid span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-ops-card p,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-ops-card small,
body[data-page="worker"][data-theme="dark"] .worker-ops-summary-grid span,
body[data-page="worker"][data-theme="dark"] .worker-ops-card p,
body[data-page="worker"][data-theme="dark"] .worker-ops-card small,
body[data-page="worker"][data-theme="dark"] .worker-ops-focus-meta,
body[data-page="worker"][data-theme="dark"] .worker-ops-focus-note,
body[data-page="worker"][data-theme="dark"] .worker-ops-head span {
  color: #94a3b8;
}

body[data-page="worker"][data-theme="dark"] .worker-ops-card-note {
  color: rgba(233, 245, 255, 0.86);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-fact,
body[data-page="worker"][data-theme="dark"] .worker-calendar-zoom-fact,
body[data-page="worker"][data-theme="dark"] .worker-ops-fact {
  background: rgba(255, 255, 255, 0.04);
  color: #d7e2ee;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-fact strong,
body[data-page="worker"][data-theme="dark"] .worker-calendar-zoom-fact strong,
body[data-page="worker"][data-theme="dark"] .worker-ops-fact strong {
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-calendar-state-badge {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.76);
  color: #cbd5e1;
}

body[data-page="worker"][data-theme="dark"] .worker-ops-card.is-active,
body[data-page="worker"][data-theme="dark"] .worker-ops-status-actions .btn.is-active {
  border-color: rgba(239, 68, 68, 0.28);
  background: rgba(239, 68, 68, 0.12);
  color: #fecaca;
}

@media (max-width: 1320px) {
  body[data-page="app"][data-app-mode="workers"] .team-calendar-insights-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  body[data-page="app"][data-app-mode="workers"] .team-workforce-company-defaults {
    width: 100%;
    justify-content: stretch;
  }

  body[data-page="app"][data-app-mode="workers"] .team-workforce-grid,
  body[data-page="app"][data-app-mode="workers"] .team-workforce-days,
  body[data-page="app"][data-app-mode="workers"] .team-workforce-time-form,
  body[data-page="app"][data-app-mode="workers"] .team-workforce-admin-grid,
  body[data-page="app"][data-app-mode="workers"] .team-calendar-form,
  body[data-page="app"][data-app-mode="workers"] .team-calendar-ai-form,
  body[data-page="worker"] .worker-ops-status-actions,
  body[data-page="app"][data-app-mode="workers"] .team-ops-summary-grid,
  body[data-page="worker"] .worker-ops-summary-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-card {
    padding: 16px;
  }

  body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-head,
  body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-worker-head,
  body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-entry {
    grid-template-columns: 1fr;
    display: grid;
  }

  body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-head {
    justify-content: stretch;
  }

  body[data-page="app"][data-app-mode="workers"] .team-calendar-day-zoom-time {
    grid-template-columns: repeat(2, auto);
    align-items: center;
  }

  body[data-page="app"][data-app-mode="workers"] .team-calendar-entry-card,
  body[data-page="app"][data-app-mode="workers"] .team-calendar-overview-shell,
  body[data-page="app"][data-app-mode="workers"] .team-calendar-metrics-card {
    padding: 16px;
  }
}

@keyframes calendar-submit-slope {
  50% {
    transform: rotate(10deg);
  }
}

@keyframes calendar-check-move {
  50% {
    padding-left: 8px;
    padding-right: 0;
  }

  100% {
    padding-right: 4px;
  }
}

@keyframes calendar-check-slice {
  60% {
    width: calc(100% + 2px);
    left: 4px;
  }

  100% {
    width: calc(100% + 2px);
    left: -2px;
    padding-left: 0;
  }
}

@keyframes calendar-check-01 {
  0% {
    width: 4px;
    top: auto;
    transform: rotate(0);
  }

  50% {
    width: 0;
    top: auto;
    transform: rotate(0);
  }

  51% {
    width: 0;
    top: 10px;
    transform: rotate(45deg);
  }

  100% {
    width: 6px;
    top: 10px;
    transform: rotate(45deg);
  }
}

@keyframes calendar-check-02 {
  0% {
    width: 4px;
    top: auto;
    transform: rotate(0);
  }

  50% {
    width: 0;
    top: auto;
    transform: rotate(0);
  }

  51% {
    width: 0;
    top: 10px;
    transform: rotate(-45deg);
  }

  100% {
    width: 11px;
    top: 10px;
    transform: rotate(-45deg);
  }
}

@keyframes calendar-check-firework {
  0% {
    opacity: 1;
    box-shadow:
      0 0 0 -2px #8b5cf6,
      0 0 0 -2px #8b5cf6,
      0 0 0 -2px #8b5cf6,
      0 0 0 -2px #8b5cf6,
      0 0 0 -2px #8b5cf6,
      0 0 0 -2px #8b5cf6;
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    box-shadow:
      0 -15px 0 0 #8b5cf6,
      14px -8px 0 0 #8b5cf6,
      14px 8px 0 0 #8b5cf6,
      0 15px 0 0 #8b5cf6,
      -14px 8px 0 0 #8b5cf6,
      -14px -8px 0 0 #8b5cf6;
  }
}

body[data-page="app"][data-app-mode="workers"] .team-chat-entry {
  position: relative;
  min-width: 118px;
  justify-content: center;
  gap: 0;
  padding-right: 24px;
  overflow: visible;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.92), rgba(14, 116, 144, 0.92));
  border-color: rgba(34, 211, 238, 0.28);
  color: #ecfeff;
  box-shadow: 0 16px 32px -24px rgba(6, 182, 212, 0.68);
}

body[data-page="app"][data-app-mode="workers"] .team-chat-entry strong {
  position: absolute;
  top: -12px;
  right: -12px;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 2px solid rgba(15, 23, 42, 0.9);
  background: linear-gradient(135deg, #fb7185, #ef4444);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 14px 28px -18px rgba(239, 68, 68, 0.95);
}

body[data-page="app"][data-app-mode="workers"] .team-chat-entry strong[hidden] {
  display: none;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-entry.has-unread {
  animation: team-chat-pulse 1.8s ease-in-out infinite;
}

@keyframes team-chat-pulse {
  0%,
  100% {
    box-shadow: 0 16px 32px -24px rgba(6, 182, 212, 0.68);
  }

  50% {
    box-shadow: 0 22px 42px -20px rgba(34, 211, 238, 0.82);
  }
}

body[data-page="app"][data-app-mode="workers"] .team-chat-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 18% 12%, rgba(34, 211, 238, 0.16), transparent 34%),
    radial-gradient(circle at 82% 16%, rgba(14, 165, 233, 0.14), transparent 40%),
    rgba(3, 7, 18, 0.58);
  backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-modal-card {
  width: min(1220px, 100%);
  max-height: min(88vh, 980px);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
  padding: 22px;
  border-radius: 32px;
  border: 1px solid rgba(125, 211, 252, 0.18);
  background:
    radial-gradient(circle at 18% 14%, rgba(34, 211, 238, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 250, 255, 0.98));
  box-shadow: 0 36px 90px -50px rgba(2, 6, 23, 0.52);
  overflow: hidden;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-modal-head span,
body[data-page="app"][data-app-mode="workers"] .team-chat-sidebar-head span,
body[data-page="app"][data-app-mode="workers"] .team-chat-stage-copy span,
body[data-page="app"][data-app-mode="workers"] .team-chat-thread-copy span,
body[data-page="app"][data-app-mode="workers"] .team-chat-thread-copy small,
body[data-page="app"][data-app-mode="workers"] .team-chat-message-meta span,
body[data-page="app"][data-app-mode="workers"] .team-chat-message p,
body[data-page="app"][data-app-mode="workers"] .team-chat-message-meta,
body[data-page="app"][data-app-mode="workers"] .team-chat-attachment span,
body[data-page="app"][data-app-mode="workers"] .team-chat-pending-item span {
  color: #5f738a;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-modal-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
  gap: 18px;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-sidebar,
body[data-page="app"][data-app-mode="workers"] .team-chat-stage {
  min-height: 0;
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(16, 32, 51, 0.08);
  background: rgba(255, 255, 255, 0.76);
}

body[data-page="app"][data-app-mode="workers"] .team-chat-sidebar {
  align-content: start;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-sidebar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-thread-list,
body[data-page="app"][data-app-mode="workers"] .team-chat-message-list,
body[data-page="app"][data-app-mode="workers"] .team-chat-pending-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 10px;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-thread {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(16, 32, 51, 0.08);
  background: rgba(255, 255, 255, 0.88);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-thread.is-active {
  border-color: rgba(6, 182, 212, 0.3);
  background: linear-gradient(145deg, rgba(6, 182, 212, 0.08), rgba(255, 255, 255, 0.94));
}

body[data-page="app"][data-app-mode="workers"] .team-chat-thread-avatar,
body[data-page="worker"] .worker-direct-thread-avatar,
body[data-page="worker"] .worker-direct-colleague-avatar {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(34, 211, 238, 0.18), rgba(14, 116, 144, 0.22));
  color: #083344;
  font-weight: 800;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-message-avatar,
body[data-page="worker"] .worker-direct-message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(34, 211, 238, 0.18), rgba(14, 116, 144, 0.22));
  color: #083344;
  font-size: 14px;
  font-weight: 800;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-thread-copy,
body[data-page="worker"] .worker-direct-thread-copy,
body[data-page="worker"] .worker-direct-colleague-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-thread-copy span,
body[data-page="app"][data-app-mode="workers"] .team-chat-thread-copy small,
body[data-page="worker"] .worker-direct-thread-copy span,
body[data-page="worker"] .worker-direct-thread-copy small,
body[data-page="worker"] .worker-direct-colleague-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-thread-badge,
body[data-page="worker"] .worker-direct-thread-badge {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #06b6d4, #0ea5e9);
  color: #ecfeff;
  font-size: 12px;
  font-weight: 800;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-stage {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-stage-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-stage-copy {
  display: grid;
  gap: 5px;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-stage-actions,
body[data-page="worker"] .worker-direct-chat-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-stage-actions .btn.is-active,
body[data-page="worker"] .worker-direct-chat-head-actions .btn.is-active {
  border-color: rgba(34, 211, 238, 0.3);
  background: rgba(34, 211, 238, 0.12);
  color: #0891b2;
}

body[data-page="worker"][data-theme="dark"] .worker-direct-chat-head-actions .btn.is-active,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-stage-actions .btn.is-active {
  color: #a5f3fc;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-message {
  display: grid;
  gap: 8px;
  max-width: min(720px, 100%);
  padding: 14px 16px;
  border-radius: 22px;
  border: 1px solid rgba(16, 32, 51, 0.08);
  background: rgba(255, 255, 255, 0.94);
}

body[data-page="app"][data-app-mode="workers"] .team-chat-message.is-manager,
body[data-page="worker"] .worker-direct-message.is-self {
  justify-self: end;
  background: linear-gradient(145deg, rgba(6, 182, 212, 0.12), rgba(255, 255, 255, 0.96));
  border-color: rgba(6, 182, 212, 0.22);
}

body[data-page="app"][data-app-mode="workers"] .team-chat-message-meta,
body[data-page="worker"] .worker-direct-message-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-message-identity,
body[data-page="worker"] .worker-direct-message-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-message-copy,
body[data-page="worker"] .worker-direct-message-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-message-meta-side,
body[data-page="worker"] .worker-direct-message-meta-side {
  display: grid;
  justify-items: end;
  gap: 4px;
  text-align: right;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-read-receipt,
body[data-page="worker"] .worker-direct-read-receipt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-read-receipt-icon,
body[data-page="worker"] .worker-direct-read-receipt-icon {
  letter-spacing: -0.16em;
  font-size: 13px;
  font-weight: 900;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-read-receipt.is-read,
body[data-page="worker"] .worker-direct-read-receipt.is-read {
  color: #0891b2;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-message p,
body[data-page="worker"] .worker-direct-message p {
  margin: 0;
  line-height: 1.6;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-attachment-grid,
body[data-page="worker"] .worker-direct-attachment-grid {
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-attachment,
body[data-page="worker"] .worker-direct-attachment {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(16, 32, 51, 0.08);
  background: rgba(248, 250, 252, 0.88);
}

body[data-page="app"][data-app-mode="workers"] .team-chat-attachment img,
body[data-page="worker"] .worker-direct-attachment img,
body[data-page="app"][data-app-mode="workers"] .team-chat-attachment video,
body[data-page="worker"] .worker-direct-attachment video {
  width: 100%;
  border-radius: 14px;
  display: block;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-attachment audio,
body[data-page="worker"] .worker-direct-attachment audio {
  width: 100%;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-attachment-transcript,
body[data-page="worker"] .worker-direct-attachment-transcript {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(34, 211, 238, 0.16);
  background: rgba(34, 211, 238, 0.08);
}

body[data-page="app"][data-app-mode="workers"] .team-chat-attachment-transcript strong,
body[data-page="worker"] .worker-direct-attachment-transcript strong {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-attachment-transcript p,
body[data-page="worker"] .worker-direct-attachment-transcript p {
  margin: 0;
  line-height: 1.55;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-attachment-transcript small,
body[data-page="worker"] .worker-direct-attachment-transcript small {
  color: #61758d;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-attachment-transcript.is-pending,
body[data-page="worker"] .worker-direct-attachment-transcript.is-pending {
  border-color: rgba(59, 130, 246, 0.16);
  background: rgba(59, 130, 246, 0.08);
}

body[data-page="app"][data-app-mode="workers"] .team-chat-attachment-transcript.is-failed,
body[data-page="worker"] .worker-direct-attachment-transcript.is-failed {
  border-color: rgba(248, 113, 113, 0.16);
  background: rgba(248, 113, 113, 0.08);
}

body[data-page="app"][data-app-mode="workers"] .team-chat-pending-item,
body[data-page="worker"] .worker-direct-pending-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(16, 32, 51, 0.08);
  background: rgba(255, 255, 255, 0.88);
}

body[data-page="app"][data-app-mode="workers"] .team-chat-pending-item > div,
body[data-page="worker"] .worker-direct-pending-item > div {
  display: grid;
  gap: 4px;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-form,
body[data-page="worker"] .worker-direct-chat-form {
  display: grid;
  gap: 12px;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-form textarea,
body[data-page="worker"] .worker-direct-chat-form textarea {
  min-height: 112px;
  resize: vertical;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-form-actions,
body[data-page="worker"] .worker-direct-chat-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-modal-card,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-sidebar,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-stage,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-thread,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-message,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-attachment,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-pending-item {
  background: rgba(15, 23, 42, 0.84);
  border-color: rgba(125, 211, 252, 0.12);
  box-shadow: 0 26px 64px -46px rgba(0, 0, 0, 0.54);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-modal-head strong,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-sidebar-head strong,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-stage-copy strong,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-thread-copy strong,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-message-meta strong,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-message p,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-attachment strong {
  color: #e2f7ff;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-modal-head span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-sidebar-head span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-stage-copy span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-thread-copy span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-thread-copy small,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-message-meta span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-attachment span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-pending-item span {
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-read-receipt,
body[data-page="worker"][data-theme="dark"] .worker-direct-read-receipt {
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-read-receipt.is-read,
body[data-page="worker"][data-theme="dark"] .worker-direct-read-receipt.is-read {
  color: #67e8f9;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-attachment-transcript,
body[data-page="worker"][data-theme="dark"] .worker-direct-attachment-transcript {
  border-color: rgba(34, 211, 238, 0.16);
  background: rgba(8, 47, 73, 0.36);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-attachment-transcript strong,
body[data-page="worker"][data-theme="dark"] .worker-direct-attachment-transcript strong {
  color: #cffafe;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-attachment-transcript p,
body[data-page="worker"][data-theme="dark"] .worker-direct-attachment-transcript p {
  color: #e2f7ff;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-attachment-transcript small,
body[data-page="worker"][data-theme="dark"] .worker-direct-attachment-transcript small {
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-attachment-transcript.is-pending,
body[data-page="worker"][data-theme="dark"] .worker-direct-attachment-transcript.is-pending {
  border-color: rgba(59, 130, 246, 0.22);
  background: rgba(30, 64, 175, 0.28);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-attachment-transcript.is-failed,
body[data-page="worker"][data-theme="dark"] .worker-direct-attachment-transcript.is-failed {
  border-color: rgba(248, 113, 113, 0.2);
  background: rgba(127, 29, 29, 0.26);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-thread.is-active,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-message.is-manager {
  background: linear-gradient(145deg, rgba(34, 211, 238, 0.16), rgba(15, 23, 42, 0.92));
  border-color: rgba(34, 211, 238, 0.18);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-thread-avatar,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-message-avatar {
  color: #cffafe;
}

body[data-page="worker"][data-worker-surface="direct-chat"] .worker-header-grid,
body[data-page="worker"][data-worker-surface="direct-chat"] .worker-bottom-strip {
  display: none;
}

body[data-page="worker"] .worker-direct-chat-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

body[data-page="worker"] .worker-direct-chat-sidebar,
body[data-page="worker"] .worker-direct-chat-stage,
body[data-page="worker"] .worker-direct-chat-card,
body[data-page="worker"] .worker-direct-chat-shell {
  border-radius: 28px;
  border: 1px solid var(--worker-border);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 24px 56px -44px rgba(8, 15, 28, 0.28);
}

body[data-page="worker"][data-theme="dark"] .worker-direct-chat-sidebar,
body[data-page="worker"][data-theme="dark"] .worker-direct-chat-stage,
body[data-page="worker"][data-theme="dark"] .worker-direct-chat-card,
body[data-page="worker"][data-theme="dark"] .worker-direct-chat-shell {
  background: rgba(15, 23, 42, 0.78);
  border-color: rgba(125, 211, 252, 0.12);
  box-shadow: 0 26px 64px -46px rgba(0, 0, 0, 0.54);
}

body[data-page="worker"] .worker-direct-chat-sidebar {
  display: grid;
  gap: 16px;
  padding: 18px;
}

body[data-page="worker"] .worker-direct-chat-card {
  display: grid;
  gap: 14px;
  padding: 16px;
}

body[data-page="worker"] .worker-direct-chat-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body[data-page="worker"] .worker-direct-chat-meta,
body[data-page="worker"] .worker-direct-chat-kicker,
body[data-page="worker"] .worker-direct-chat-hero p,
body[data-page="worker"] .worker-direct-thread-copy span,
body[data-page="worker"] .worker-direct-thread-copy small,
body[data-page="worker"] .worker-direct-colleague-copy span,
body[data-page="worker"] .worker-direct-message-meta span,
body[data-page="worker"] .worker-direct-pending-item span {
  color: var(--worker-muted);
}

body[data-page="worker"] .worker-direct-thread-list,
body[data-page="worker"] .worker-direct-colleague-list,
body[data-page="worker"] .worker-direct-message-list,
body[data-page="worker"] .worker-direct-pending-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 10px;
}

body[data-page="worker"] .worker-direct-thread {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--worker-border);
  background: var(--worker-surface-soft);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

body[data-page="worker"] .worker-direct-thread.is-active {
  border-color: rgba(34, 211, 238, 0.32);
  background: linear-gradient(145deg, rgba(34, 211, 238, 0.12), rgba(255, 255, 255, 0.92));
}

body[data-page="worker"][data-theme="dark"] .worker-direct-thread.is-active {
  background: linear-gradient(145deg, rgba(34, 211, 238, 0.16), rgba(15, 23, 42, 0.92));
}

body[data-page="worker"] .worker-direct-colleague {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--worker-border);
  background: var(--worker-surface-soft);
}

body[data-page="worker"] .worker-direct-chat-stage {
  position: relative;
  display: grid;
  gap: 18px;
  padding: 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 4%, rgba(34, 211, 238, 0.18), transparent 28%),
    radial-gradient(circle at 88% 0%, rgba(59, 130, 246, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(247, 250, 255, 0.82));
}

body[data-page="worker"][data-theme="dark"] .worker-direct-chat-stage {
  background:
    radial-gradient(circle at 8% 4%, rgba(34, 211, 238, 0.18), transparent 28%),
    radial-gradient(circle at 88% 0%, rgba(59, 130, 246, 0.16), transparent 30%),
    linear-gradient(180deg, rgba(6, 12, 24, 0.96), rgba(9, 18, 34, 0.98));
}

body[data-page="worker"] .worker-direct-chat-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 18px;
  padding: 26px 24px 22px;
  border-radius: 30px;
  border: 1px solid rgba(34, 211, 238, 0.18);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.22), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.08));
  text-align: center;
}

body[data-page="worker"][data-theme="dark"] .worker-direct-chat-hero {
  border-color: rgba(34, 211, 238, 0.16);
  background:
    radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(8, 32, 48, 0.36), rgba(6, 16, 30, 0.18));
}

body[data-page="worker"] .worker-direct-chat-hero-art {
  position: absolute;
  inset: -12% -4% auto;
  height: 280px;
  pointer-events: none;
  z-index: -1;
}

body[data-page="worker"] .worker-direct-chat-beam,
body[data-page="worker"] .worker-direct-chat-orb,
body[data-page="worker"] .worker-direct-chat-grid,
body[data-page="worker"] .worker-direct-chat-ring {
  position: absolute;
  display: block;
}

body[data-page="worker"] .worker-direct-chat-beam {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.7), transparent);
}

body[data-page="worker"] .worker-direct-chat-beam.is-a {
  top: 76px;
  left: 10%;
  width: 80%;
}

body[data-page="worker"] .worker-direct-chat-beam.is-b {
  top: 132px;
  left: 18%;
  width: 64%;
}

body[data-page="worker"] .worker-direct-chat-orb {
  border-radius: 999px;
  background: radial-gradient(circle, rgba(103, 232, 249, 0.96), rgba(14, 116, 144, 0.12) 72%, transparent 100%);
  box-shadow: 0 0 44px rgba(34, 211, 238, 0.36);
}

body[data-page="worker"] .worker-direct-chat-orb.is-a {
  top: 34px;
  left: 12%;
  width: 18px;
  height: 18px;
}

body[data-page="worker"] .worker-direct-chat-orb.is-b {
  top: 40px;
  right: 15%;
  width: 26px;
  height: 26px;
}

body[data-page="worker"] .worker-direct-chat-grid {
  inset: 20px 12% auto;
  height: 170px;
  border-radius: 28px;
  background-image:
    linear-gradient(rgba(125, 211, 252, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 211, 252, 0.08) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 92%);
}

body[data-page="worker"] .worker-direct-chat-ring {
  border-radius: 999px;
  border: 1px solid rgba(103, 232, 249, 0.18);
}

body[data-page="worker"] .worker-direct-chat-ring.is-a {
  top: 16px;
  left: 50%;
  width: 340px;
  height: 340px;
  transform: translateX(-50%);
}

body[data-page="worker"] .worker-direct-chat-ring.is-b {
  top: 44px;
  left: 50%;
  width: 440px;
  height: 440px;
  transform: translateX(-50%);
  border-color: rgba(59, 130, 246, 0.12);
}

body[data-page="worker"] .worker-direct-chat-kicker-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

body[data-page="worker"] .worker-direct-chat-kicker {
  display: inline-flex;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(34, 211, 238, 0.24);
  background: rgba(34, 211, 238, 0.08);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-page="worker"] .worker-direct-chat-kicker.is-live {
  border-color: rgba(16, 185, 129, 0.22);
  background: rgba(16, 185, 129, 0.12);
  color: #14b8a6;
}

body[data-page="worker"] .worker-direct-chat-hero h1 {
  margin: 0;
  font-size: clamp(3rem, 8vw, 5.8rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-shadow: 0 10px 36px rgba(34, 211, 238, 0.08);
}

body[data-page="worker"] .worker-direct-chat-hero p {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.03rem;
  line-height: 1.7;
}

body[data-page="worker"] .worker-direct-hero-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body[data-page="worker"] .worker-direct-hero-facts article {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid rgba(125, 211, 252, 0.16);
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(10px);
}

body[data-page="worker"][data-theme="dark"] .worker-direct-hero-facts article {
  background: rgba(6, 18, 32, 0.56);
  border-color: rgba(125, 211, 252, 0.12);
}

body[data-page="worker"] .worker-direct-hero-facts strong {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--worker-muted);
}

body[data-page="worker"] .worker-direct-hero-facts span {
  font-size: 0.98rem;
  font-weight: 700;
}

body[data-page="worker"] .worker-direct-colleagues-board {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 24px;
  border: 1px solid var(--worker-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(244, 249, 255, 0.68));
}

body[data-page="worker"][data-theme="dark"] .worker-direct-colleagues-board {
  background:
    linear-gradient(180deg, rgba(8, 20, 34, 0.84), rgba(10, 18, 34, 0.74));
  border-color: rgba(125, 211, 252, 0.12);
}

body[data-page="worker"] .worker-direct-chat-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 14px;
  padding: 18px;
  min-height: 560px;
  background: rgba(255, 255, 255, 0.84);
}

body[data-page="worker"][data-theme="dark"] .worker-direct-chat-shell {
  background: rgba(11, 18, 32, 0.82);
}

body[data-page="worker"] .worker-direct-chat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

body[data-page="worker"] .worker-direct-chat-head > div:first-child {
  display: grid;
  gap: 5px;
}

body[data-page="worker"] .worker-direct-message-list {
  overflow: auto;
}

body[data-page="worker"] .worker-direct-message {
  display: grid;
  gap: 8px;
  max-width: min(760px, 100%);
  padding: 14px 16px;
  border-radius: 22px;
  border: 1px solid var(--worker-border);
  background: var(--worker-surface-soft);
}

body[data-page="worker"] .worker-direct-message.is-manager {
  justify-self: start;
}

body[data-page="worker"] .worker-direct-message.is-self {
  justify-self: end;
}

body[data-page="worker"][data-theme="dark"] .worker-direct-message.is-self {
  background: linear-gradient(145deg, rgba(34, 211, 238, 0.18), rgba(13, 21, 36, 0.94));
  border-color: rgba(34, 211, 238, 0.18);
}

body[data-page="worker"][data-theme="light"] .worker-direct-message.is-self {
  background: linear-gradient(145deg, rgba(34, 211, 238, 0.12), rgba(255, 255, 255, 0.96));
  border-color: rgba(34, 211, 238, 0.18);
}

body[data-page="worker"][data-theme="dark"] .worker-direct-attachment,
body[data-page="worker"][data-theme="dark"] .worker-direct-thread,
body[data-page="worker"][data-theme="dark"] .worker-direct-colleague,
body[data-page="worker"][data-theme="dark"] .worker-direct-pending-item {
  background: rgba(15, 23, 42, 0.76);
  border-color: rgba(255, 255, 255, 0.08);
}

body[data-page="worker"][data-theme="dark"] .worker-direct-thread-avatar,
body[data-page="worker"][data-theme="dark"] .worker-direct-colleague-avatar,
body[data-page="worker"][data-theme="dark"] .worker-direct-message-avatar {
  color: #cffafe;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-company-profile-editor {
  background: rgba(15, 23, 42, 0.84);
  border-color: rgba(125, 211, 252, 0.12);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-company-name-preview {
  background:
    radial-gradient(circle at 14% 18%, rgba(34, 211, 238, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(10, 22, 38, 0.92), rgba(12, 20, 34, 0.88));
  border-color: rgba(125, 211, 252, 0.12);
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-company-name-preview span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-company-name-preview p {
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-company-profile-copy span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-rank-chip.is-empty {
  color: #94a3b8;
}

body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-rank-chip,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-worker-rank,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-rank-badge,
body[data-page="worker"][data-theme="dark"] .worker-rank-badge {
  border-color: rgba(34, 211, 238, 0.24);
  background: rgba(34, 211, 238, 0.12);
  color: #a5f3fc;
}

@media (max-width: 1100px) {
  body[data-page="app"][data-app-mode="workers"] .team-chat-modal-layout,
  body[data-page="worker"] .worker-direct-chat-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  body[data-page="app"][data-app-mode="workers"] .team-chat-modal {
    padding: 14px;
  }

  body[data-page="app"][data-app-mode="workers"] .team-chat-modal-card,
  body[data-page="worker"] .worker-direct-chat-stage,
  body[data-page="worker"] .worker-direct-chat-shell {
    padding: 16px;
  }

  body[data-page="app"][data-app-mode="workers"] .team-chat-stage-head,
  body[data-page="worker"] .worker-direct-chat-head,
  body[data-page="app"][data-app-mode="workers"] .team-chat-form-actions,
  body[data-page="worker"] .worker-direct-chat-form-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="workers"] .team-chat-thread,
  body[data-page="worker"] .worker-direct-thread {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  body[data-page="worker"] .worker-direct-hero-facts {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="workers"] .team-chat-thread-badge,
  body[data-page="worker"] .worker-direct-thread-badge {
    justify-self: start;
  }

  body[data-page="app"][data-app-mode="workers"] .team-profile-form,
  body[data-page="app"][data-app-mode="workers"] .team-rank-builder,
  body[data-page="app"][data-app-mode="workers"] .team-company-profile-editor {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  body[data-page="app"][data-app-mode="meeting"] .meeting-form.has-voice-input,
  body[data-page="app"][data-app-mode="meeting"] .meeting-form.has-tts-output,
  body[data-page="app"][data-app-mode="receivables"] .receivables-form.has-voice-input,
  body[data-page="app"][data-app-mode="receivables"] .receivables-form.has-tts-output {
    grid-template-columns: 1fr;
  }

  body[data-page="app"] .finora-voice-dock,
  body[data-page="app"] .finora-tts-dock,
  body[data-page="worker"] .finora-voice-dock {
    min-width: 100%;
  }

  body[data-page="worker"] .finora-tts-dock {
    min-width: 100%;
  }
}

@media (max-width: 900px) {
  body[data-page="worker"] .worker-calendar-ai-form.has-voice-input,
  body[data-page="worker"] .worker-calendar-ai-form.has-tts-output,
  body[data-page="worker"] .worker-logbook-ai-form.has-voice-input,
  body[data-page="worker"] .worker-logbook-ai-form.has-tts-output,
  body[data-page="worker"] .worker-chat-form.has-voice-input,
  body[data-page="worker"] .worker-chat-form.has-tts-output,
  body[data-page="app"][data-app-mode="workers"] .team-calendar-ai-form.has-voice-input,
  body[data-page="app"][data-app-mode="workers"] .team-calendar-ai-form.has-tts-output {
    grid-template-columns: 1fr;
  }

  body[data-page="app"] .finora-voice-actions,
  body[data-page="worker"] .finora-voice-actions {
    grid-template-columns: minmax(0, 1fr) 80px;
  }

  body[data-page="worker"] .worker-logbook-ai-tools {
    grid-template-columns: 1fr;
  }

  body[data-page="worker"] .worker-logbook-ai-form > .btn.primary {
    width: 100%;
    justify-self: stretch;
  }

  body[data-page="app"] .finora-tts-toggle,
  body[data-page="worker"] .finora-tts-toggle {
    min-height: 52px;
  }
}

@keyframes finoraTtsBarsPulse {
  0% {
    transform: scaleY(0.42);
    opacity: 0.54;
  }

  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}

body[data-page="app"] .finora-tts-dock,
body[data-page="worker"] .finora-tts-dock {
  display: grid;
  gap: 10px;
  min-width: min(100%, 360px);
  padding: 12px 14px;
  border-radius: 20px;
  border: 1px solid rgba(74, 222, 255, 0.24);
  background:
    radial-gradient(circle at top, rgba(41, 194, 255, 0.16), transparent 58%),
    linear-gradient(180deg, rgba(5, 12, 28, 0.96), rgba(8, 18, 36, 0.92));
  box-shadow:
    0 18px 36px rgba(2, 8, 23, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body[data-page="app"] .finora-tts-main,
body[data-page="worker"] .finora-tts-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

body[data-page="app"] .finora-tts-toggle,
body[data-page="worker"] .finora-tts-toggle {
  min-height: 56px;
  justify-content: flex-start;
  gap: 12px;
  padding: 0 18px;
  border-radius: 18px;
  border: 1px solid rgba(87, 225, 255, 0.18);
  background: linear-gradient(135deg, rgba(10, 22, 44, 0.94), rgba(7, 31, 49, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body[data-page="app"] .finora-tts-toggle.is-active,
body[data-page="worker"] .finora-tts-toggle.is-active {
  border-color: rgba(74, 222, 255, 0.4);
}

body[data-page="app"] .finora-tts-toggle.is-loading,
body[data-page="worker"] .finora-tts-toggle.is-loading,
body[data-page="app"] .finora-tts-toggle.is-playing,
body[data-page="worker"] .finora-tts-toggle.is-playing {
  box-shadow:
    0 0 0 1px rgba(74, 222, 255, 0.22),
    0 0 28px rgba(34, 211, 238, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body[data-page="app"] .finora-tts-stop,
body[data-page="worker"] .finora-tts-stop {
  min-width: 92px;
  min-height: 56px;
  padding: 0 18px;
  border-radius: 18px;
  border: 1px solid rgba(248, 113, 113, 0.22);
  background: linear-gradient(135deg, rgba(51, 15, 24, 0.96), rgba(92, 24, 35, 0.94));
  color: #ffe9e9;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    opacity 180ms ease,
    box-shadow 180ms ease;
}

body[data-page="app"] .finora-tts-stop.is-active,
body[data-page="worker"] .finora-tts-stop.is-active {
  border-color: rgba(248, 113, 113, 0.52);
  box-shadow: 0 0 22px rgba(248, 113, 113, 0.22);
}

body[data-page="app"] .finora-tts-stop:disabled,
body[data-page="worker"] .finora-tts-stop:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: none;
}

body[data-page="app"] .finora-tts-status,
body[data-page="worker"] .finora-tts-status {
  min-height: 1.35rem;
  color: rgba(214, 237, 255, 0.82);
  font-size: 0.85rem;
  line-height: 1.45;
}

body[data-page="app"] .finora-tts-dock[data-state="ready"] .finora-tts-status,
body[data-page="worker"] .finora-tts-dock[data-state="ready"] .finora-tts-status {
  color: rgba(177, 249, 255, 0.92);
}

body[data-page="app"] .finora-tts-dock[data-state="loading"] .finora-tts-status,
body[data-page="worker"] .finora-tts-dock[data-state="loading"] .finora-tts-status,
body[data-page="app"] .finora-tts-dock[data-state="playing"] .finora-tts-status,
body[data-page="worker"] .finora-tts-dock[data-state="playing"] .finora-tts-status {
  color: #dffcff;
}

body[data-page="app"] .finora-tts-dock[data-state="error"] .finora-tts-status,
body[data-page="worker"] .finora-tts-dock[data-state="error"] .finora-tts-status {
  color: #ffb4b4;
}

body[data-page="app"] .finora-tts-toggle.is-playing .finora-tts-bar,
body[data-page="worker"] .finora-tts-toggle.is-playing .finora-tts-bar,
body[data-page="app"] .finora-tts-toggle.is-loading .finora-tts-bar,
body[data-page="worker"] .finora-tts-toggle.is-loading .finora-tts-bar {
  animation: finoraTtsBarsPulse 0.82s ease-in-out infinite alternate;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload,
body[data-page="app"][data-app-mode="meeting"] .meeting-form.has-liquid-upload,
body[data-page="app"][data-app-mode="receivables"] .receivables-form.has-liquid-upload,
body[data-page="worker"] .worker-chat-form.has-liquid-upload {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload.has-voice-input,
body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload.has-tts-output,
body[data-page="app"][data-app-mode="meeting"] .meeting-form.has-liquid-upload.has-voice-input,
body[data-page="app"][data-app-mode="meeting"] .meeting-form.has-liquid-upload.has-tts-output,
body[data-page="app"][data-app-mode="meeting"] .meeting-form.has-liquid-upload.has-voice-input.has-tts-output,
body[data-page="app"][data-app-mode="receivables"] .receivables-form.has-liquid-upload.has-voice-input,
body[data-page="app"][data-app-mode="receivables"] .receivables-form.has-liquid-upload.has-tts-output,
body[data-page="app"][data-app-mode="receivables"] .receivables-form.has-liquid-upload.has-voice-input.has-tts-output,
body[data-page="worker"] .worker-chat-form.has-liquid-upload.has-voice-input,
body[data-page="worker"] .worker-chat-form.has-liquid-upload.has-tts-output,
body[data-page="worker"] .worker-chat-form.has-liquid-upload.has-voice-input.has-tts-output {
  grid-template-columns: minmax(0, 1fr);
}

body[data-page="app"] .finora-ai-composer-row,
body[data-page="worker"] .finora-ai-composer-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
}

body[data-page="app"] .finora-ai-input-shell,
body[data-page="worker"] .finora-ai-input-shell {
  position: relative;
  min-height: 70px;
  padding: 16px 58px 16px 20px;
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.11), transparent 28%),
    radial-gradient(circle at 78% -4%, rgba(137, 151, 169, 0.18), transparent 38%),
    linear-gradient(160deg, rgba(35, 41, 51, 0.98), rgba(10, 13, 19, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -24px 44px rgba(0, 0, 0, 0.34),
    0 18px 42px rgba(0, 0, 0, 0.24);
  overflow: hidden;
  isolation: isolate;
}

body[data-page="app"] .finora-ai-input-shell::before,
body[data-page="worker"] .finora-ai-input-shell::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
  pointer-events: none;
}

body[data-page="app"] .finora-ai-input-shell::after,
body[data-page="worker"] .finora-ai-input-shell::after {
  content: "";
  position: absolute;
  inset: auto 16px 10px 16px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(191, 219, 254, 0.24), rgba(255, 255, 255, 0));
  opacity: 0.78;
  pointer-events: none;
}

body[data-page="app"] .finora-ai-input-glow,
body[data-page="worker"] .finora-ai-input-glow {
  position: absolute;
  inset: -20% 18% auto;
  height: 84%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 68%);
  filter: blur(24px);
  opacity: 0.66;
  pointer-events: none;
}

body[data-page="app"] .finora-ai-input-spark,
body[data-page="worker"] .finora-ai-input-spark {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: rgba(236, 244, 255, 0.72);
  pointer-events: none;
}

body[data-page="app"] .finora-ai-input-spark svg,
body[data-page="worker"] .finora-ai-input-spark svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

body[data-page="app"] .finora-ai-input-control,
body[data-page="worker"] .finora-ai-input-control {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f7fbff !important;
  font-size: 1rem;
  line-height: 1.55;
  padding: 0 !important;
  outline: none;
}

body[data-page="app"] textarea.finora-ai-input-control,
body[data-page="worker"] textarea.finora-ai-input-control {
  min-height: 92px;
  resize: vertical;
}

body[data-page="app"] input.finora-ai-input-control,
body[data-page="worker"] input.finora-ai-input-control {
  min-height: 38px;
}

body[data-page="app"] .finora-ai-input-control::placeholder,
body[data-page="worker"] .finora-ai-input-control::placeholder {
  color: rgba(207, 219, 232, 0.72) !important;
}

body[data-page="app"] .finora-ai-upload-trigger,
body[data-page="worker"] .finora-ai-upload-trigger {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  min-width: 108px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #d6dee8;
  cursor: pointer;
  transition: transform 180ms ease, opacity 180ms ease;
}

body[data-page="app"] .finora-ai-upload-trigger:hover,
body[data-page="worker"] .finora-ai-upload-trigger:hover {
  transform: translateY(-2px);
}

body[data-page="app"] .finora-ai-upload-core,
body[data-page="worker"] .finora-ai-upload-core {
  position: relative;
  display: block;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 30%),
    radial-gradient(circle at 62% 74%, rgba(92, 102, 118, 0.28), rgba(92, 102, 118, 0) 34%),
    linear-gradient(180deg, rgba(79, 86, 98, 0.98), rgba(12, 15, 20, 1));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -18px 26px rgba(0, 0, 0, 0.38),
    0 18px 38px rgba(0, 0, 0, 0.26);
  overflow: hidden;
}

body[data-page="app"] .finora-ai-upload-core::before,
body[data-page="worker"] .finora-ai-upload-core::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 32%),
    linear-gradient(180deg, rgba(49, 55, 65, 0.94), rgba(10, 12, 17, 1));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18);
}

body[data-page="app"] .finora-ai-upload-ring,
body[data-page="worker"] .finora-ai-upload-ring {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from 180deg, rgba(226, 232, 240, 0.12), rgba(255, 255, 255, 0.5), rgba(148, 163, 184, 0.14), rgba(255, 255, 255, 0.42), rgba(226, 232, 240, 0.12));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.94;
}

body[data-page="app"] .finora-ai-upload-ring-secondary,
body[data-page="worker"] .finora-ai-upload-ring-secondary {
  inset: 8px;
  opacity: 0.32;
}

body[data-page="app"] .finora-ai-upload-icon,
body[data-page="worker"] .finora-ai-upload-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(247, 250, 252, 0.94);
  z-index: 1;
}

body[data-page="app"] .finora-ai-upload-icon svg,
body[data-page="worker"] .finora-ai-upload-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  transform: rotate(26deg);
}

body[data-page="app"] .finora-ai-upload-spark,
body[data-page="worker"] .finora-ai-upload-spark {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 16px;
  height: 16px;
  color: rgba(230, 236, 244, 0.88);
  z-index: 2;
}

body[data-page="app"] .finora-ai-upload-spark svg,
body[data-page="worker"] .finora-ai-upload-spark svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

body[data-page="app"] .finora-ai-upload-label,
body[data-page="worker"] .finora-ai-upload-label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(225, 232, 241, 0.82);
}

body[data-page="app"] .finora-ai-upload-trigger[data-state="busy"] .finora-ai-upload-core,
body[data-page="worker"] .finora-ai-upload-trigger[data-state="busy"] .finora-ai-upload-core {
  animation: finoraAiUploadPulse 1s ease-in-out infinite;
}

body[data-page="app"] .finora-ai-upload-trigger[data-state="success"] .finora-ai-upload-ring,
body[data-page="worker"] .finora-ai-upload-trigger[data-state="success"] .finora-ai-upload-ring {
  background: conic-gradient(from 180deg, rgba(74, 222, 128, 0.16), rgba(134, 239, 172, 0.82), rgba(74, 222, 128, 0.16), rgba(134, 239, 172, 0.82), rgba(74, 222, 128, 0.16));
}

body[data-page="app"] .finora-ai-upload-trigger[data-state="error"] .finora-ai-upload-ring,
body[data-page="worker"] .finora-ai-upload-trigger[data-state="error"] .finora-ai-upload-ring {
  background: conic-gradient(from 180deg, rgba(248, 113, 113, 0.16), rgba(252, 165, 165, 0.86), rgba(248, 113, 113, 0.16), rgba(252, 165, 165, 0.86), rgba(248, 113, 113, 0.16));
}

body[data-page="app"] .finora-ai-upload-trigger[data-state="success"] .finora-ai-upload-label,
body[data-page="worker"] .finora-ai-upload-trigger[data-state="success"] .finora-ai-upload-label {
  color: #d1fae5;
}

body[data-page="app"] .finora-ai-upload-trigger[data-state="error"] .finora-ai-upload-label,
body[data-page="worker"] .finora-ai-upload-trigger[data-state="error"] .finora-ai-upload-label {
  color: #fecaca;
}

body[data-page="app"] .finora-ai-submit,
body[data-page="worker"] .finora-ai-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 70px;
  min-width: 164px;
  padding: 0 28px 0 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(circle at 24% 22%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, rgba(98, 108, 122, 0.98), rgba(20, 24, 31, 0.98)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -18px 26px rgba(0, 0, 0, 0.3),
    0 18px 34px rgba(0, 0, 0, 0.22);
  color: #f8fafc;
  font-weight: 700;
  letter-spacing: 0.03em;
  overflow: hidden;
}

body[data-page="app"] .finora-ai-submit:hover,
body[data-page="worker"] .finora-ai-submit:hover {
  transform: translateY(-1px);
}

body[data-page="app"] .finora-ai-submit::before,
body[data-page="worker"] .finora-ai-submit::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  pointer-events: none;
}

body[data-page="app"] .finora-ai-submit::after,
body[data-page="worker"] .finora-ai-submit::after {
  content: "↗";
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}

body[data-page="app"] .finora-ai-submit:disabled,
body[data-page="worker"] .finora-ai-submit:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

body[data-page="app"] .main-chat-form.has-liquid-upload .finora-voice-dock,
body[data-page="app"] .main-chat-form.has-liquid-upload .finora-tts-dock,
body[data-page="app"] .meeting-form.has-liquid-upload .finora-voice-dock,
body[data-page="app"] .meeting-form.has-liquid-upload .finora-tts-dock,
body[data-page="app"] .receivables-form.has-liquid-upload .finora-voice-dock,
body[data-page="app"] .receivables-form.has-liquid-upload .finora-tts-dock,
body[data-page="worker"] .worker-chat-form.has-liquid-upload .finora-voice-dock,
body[data-page="worker"] .worker-chat-form.has-liquid-upload .finora-tts-dock {
  width: 100%;
  min-width: 0;
  justify-self: stretch;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-form.has-liquid-upload,
body[data-page="app"][data-app-mode="receivables"] .receivables-form.has-liquid-upload,
body[data-page="worker"] .worker-chat-form.has-liquid-upload {
  gap: 16px;
}

body[data-page="app"][data-app-mode="meeting"] .meeting-form.has-liquid-upload .finora-ai-input-shell {
  min-height: 74px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-form.has-liquid-upload .finora-ai-input-shell,
body[data-page="worker"] .worker-chat-form.has-liquid-upload .finora-ai-input-shell {
  min-height: 118px;
  padding-top: 18px;
  padding-bottom: 18px;
}

body[data-page="app"][data-app-mode="receivables"] .receivables-form.has-liquid-upload textarea.finora-ai-input-control,
body[data-page="worker"] .worker-chat-form.has-liquid-upload textarea.finora-ai-input-control {
  min-height: 82px;
}

body[data-page="app"] .finora-ai-upload-input,
body[data-page="worker"] .finora-ai-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes finoraAiUploadPulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      inset 0 -18px 26px rgba(0, 0, 0, 0.38),
      0 18px 38px rgba(0, 0, 0, 0.26);
  }

  50% {
    transform: scale(1.04);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      inset 0 -18px 26px rgba(0, 0, 0, 0.38),
      0 18px 38px rgba(0, 0, 0, 0.26),
      0 0 0 6px rgba(255, 255, 255, 0.06);
  }
}

@media (max-width: 900px) {
  body[data-page="app"] .finora-ai-composer-row,
  body[data-page="worker"] .finora-ai-composer-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  body[data-page="app"] .finora-ai-submit,
  body[data-page="worker"] .finora-ai-submit {
    grid-column: 1 / -1;
    min-height: 60px;
  }
}

@media (max-width: 720px) {
  body[data-page="app"] .finora-ai-composer-row,
  body[data-page="worker"] .finora-ai-composer-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  body[data-page="app"] .finora-ai-upload-trigger,
  body[data-page="worker"] .finora-ai-upload-trigger,
  body[data-page="app"] .finora-ai-submit,
  body[data-page="worker"] .finora-ai-submit {
    flex: 1 1 160px;
  }

  body[data-page="app"] .finora-ai-input-shell,
  body[data-page="worker"] .finora-ai-input-shell {
    order: 3;
    flex: 1 1 100%;
    min-width: 100%;
    min-height: 88px;
  }

  body[data-page="app"] .main-chat-form.has-liquid-upload .finora-ai-input-shell,
  body[data-page="worker"] .worker-chat-form.has-liquid-upload .finora-ai-input-shell {
    min-height: 98px;
  }
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload {
  gap: 10px;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-selected-bubble {
  display: grid;
  gap: 10px;
  padding: 13px 16px 14px 18px;
  border-radius: 24px 24px 24px 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background:
    radial-gradient(circle at 18% 16%, rgba(96, 165, 250, 0.14), rgba(96, 165, 250, 0) 28%),
    linear-gradient(180deg, rgba(17, 24, 39, 0.98), rgba(9, 13, 20, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 18px 40px rgba(2, 6, 23, 0.28);
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-selected-bubble[hidden] {
  display: none !important;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-selected-head {
  display: grid;
  gap: 2px;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-selected-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.88);
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-selected-label {
  font-size: 0.92rem;
  font-weight: 700;
  color: #f8fafc;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-selected-list {
  display: grid;
  gap: 8px;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-selected-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.74);
  color: #e2e8f0;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-selected-card {
  display: grid;
  gap: 10px;
  padding: 14px 15px;
  border-radius: 20px;
  border: 1px solid rgba(125, 153, 182, 0.18);
  background:
    linear-gradient(180deg, rgba(12, 21, 36, 0.94), rgba(8, 14, 26, 0.96)),
    rgba(8, 14, 26, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 32px rgba(2, 6, 23, 0.18);
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-selected-card[data-confidence="high"] {
  border-color: rgba(96, 201, 135, 0.28);
  background:
    radial-gradient(circle at top right, rgba(96, 201, 135, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(11, 24, 22, 0.96), rgba(8, 16, 18, 0.98));
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-selected-card[data-confidence="medium"] {
  border-color: rgba(114, 181, 255, 0.2);
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-selected-card[data-confidence="low"] {
  border-color: rgba(244, 191, 117, 0.22);
  background:
    radial-gradient(circle at top right, rgba(251, 191, 36, 0.12), transparent 40%),
    linear-gradient(180deg, rgba(20, 18, 13, 0.96), rgba(12, 11, 9, 0.98));
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-selected-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-selected-card-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-selected-card-copy strong {
  color: #f8fafc;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.2;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-selected-card-copy small {
  color: rgba(191, 210, 230, 0.76);
  font-size: 0.79rem;
  line-height: 1.4;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-selected-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.78);
  color: #e2e8f0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-selected-badge[data-confidence="high"] {
  border-color: rgba(96, 201, 135, 0.34);
  background: rgba(15, 61, 42, 0.5);
  color: #d7ffe4;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-selected-badge[data-confidence="medium"] {
  border-color: rgba(114, 181, 255, 0.28);
  background: rgba(18, 47, 85, 0.48);
  color: #dbeafe;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-selected-badge[data-confidence="low"] {
  border-color: rgba(244, 191, 117, 0.28);
  background: rgba(92, 52, 14, 0.4);
  color: #fde7bf;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-selected-card-body {
  display: grid;
  gap: 7px;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-selected-meta-row {
  display: grid;
  gap: 3px;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-selected-meta-row span {
  color: rgba(148, 163, 184, 0.88);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-selected-meta-row p {
  margin: 0;
  color: rgba(232, 240, 249, 0.92);
  font-size: 0.84rem;
  line-height: 1.45;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-composer-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-upload-trigger {
  min-width: 60px;
  gap: 0;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-upload-label {
  display: none;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-upload-core {
  width: 58px;
  height: 58px;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-upload-core::before {
  inset: 6px;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-upload-icon svg {
  width: 20px;
  height: 20px;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-input-shell {
  min-height: 62px;
  padding: 14px 50px 14px 18px;
  border-radius: 28px;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload input.finora-ai-input-control {
  min-height: 32px;
  font-size: 1rem;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-submit {
  min-width: 58px;
  width: 58px;
  min-height: 58px;
  height: 58px;
  padding: 0;
  border-radius: 50%;
  font-size: 0;
  color: transparent;
}

body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-submit::after {
  width: 32px;
  height: 32px;
  font-size: 1rem;
}

@media (max-width: 900px) {
  body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-composer-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-submit {
    grid-column: auto;
  }
}

@media (max-width: 720px) {
  body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-composer-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-upload-trigger,
  body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-submit {
    flex: none;
  }

  body[data-page="app"][data-app-mode="main"] .main-chat-form.has-liquid-upload .finora-ai-input-shell {
    order: initial;
    min-width: 0;
    min-height: 62px;
  }
}

body[data-page="app"][data-app-mode="customers"] .customers-shell {
  min-height: 100vh;
  padding: 22px;
  display: grid;
  gap: 22px;
  background:
    radial-gradient(circle at 12% 0%, rgba(34, 211, 238, 0.2), transparent 26%),
    radial-gradient(circle at 85% 4%, rgba(251, 191, 36, 0.14), transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(59, 130, 246, 0.1), transparent 30%),
    linear-gradient(180deg, #040913, #07111d 34%, #091424 62%, #040913);
}

body[data-page="app"][data-app-mode="customers"] .customers-topbar,
body[data-page="app"][data-app-mode="customers"] .customers-top-actions,
body[data-page="app"][data-app-mode="customers"] .customers-card-head,
body[data-page="app"][data-app-mode="customers"] .customers-detail-card-head,
body[data-page="app"][data-app-mode="customers"] .customers-linked-head,
body[data-page="app"][data-app-mode="customers"] .customers-linked-side,
body[data-page="app"][data-app-mode="customers"] .customers-detail-actions,
body[data-page="app"][data-app-mode="customers"] .customers-control-bar,
body[data-page="app"][data-app-mode="customers"] .customers-control-actions,
body[data-page="app"][data-app-mode="customers"] .customers-detail-toolbar,
body[data-page="app"][data-app-mode="customers"] .customers-linked-actions,
body[data-page="app"][data-app-mode="customers"] .customers-preview-head,
body[data-page="app"][data-app-mode="customers"] .customers-pagination {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="customers"] .customers-topbar,
body[data-page="app"][data-app-mode="customers"] .customers-hero,
body[data-page="app"][data-app-mode="customers"] .customers-control-bar,
body[data-page="app"][data-app-mode="customers"] .customers-overview,
body[data-page="app"][data-app-mode="customers"] .customers-detail-wrap,
body[data-page="app"][data-app-mode="customers"] .customers-stat-card,
body[data-page="app"][data-app-mode="customers"] .customers-card,
body[data-page="app"][data-app-mode="customers"] .customers-detail,
body[data-page="app"][data-app-mode="customers"] .customers-detail-card,
body[data-page="app"][data-app-mode="customers"] .customers-score-card,
body[data-page="app"][data-app-mode="customers"] .customers-linked-card {
  border-radius: 28px;
  border: 1px solid rgba(94, 234, 212, 0.16);
  background:
    radial-gradient(circle at 18% 8%, rgba(56, 189, 248, 0.12), transparent 26%),
    radial-gradient(circle at 88% 0%, rgba(250, 204, 21, 0.08), transparent 22%),
    linear-gradient(160deg, rgba(7, 14, 28, 0.96), rgba(11, 18, 32, 0.98));
  box-shadow:
    0 32px 80px -46px rgba(8, 145, 178, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  position: relative;
  overflow: hidden;
}

body[data-page="app"][data-app-mode="customers"] .customers-stat-card::before,
body[data-page="app"][data-app-mode="customers"] .customers-card::before,
body[data-page="app"][data-app-mode="customers"] .customers-detail-card::before,
body[data-page="app"][data-app-mode="customers"] .customers-score-card::before,
body[data-page="app"][data-app-mode="customers"] .customers-linked-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(125, 211, 252, 0.1), transparent 24%);
  pointer-events: none;
}

body[data-page="app"][data-app-mode="customers"] .customers-topbar {
  padding: 18px 22px;
}

body[data-page="app"][data-app-mode="customers"] .customers-topbar h1 {
  margin: 6px 0 0;
  color: #f8fafc;
  font-size: clamp(30px, 3vw, 42px);
}

body[data-page="app"][data-app-mode="customers"] .customers-hero {
  padding: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.75fr);
  gap: 18px;
}

body[data-page="app"][data-app-mode="customers"] .customers-hero-copy {
  display: grid;
  gap: 12px;
}

body[data-page="app"][data-app-mode="customers"] .customers-hero-kicker,
body[data-page="app"][data-app-mode="customers"] .customers-card-kicker {
  margin: 0;
  color: #7dd3fc;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="customers"] .customers-hero h2,
body[data-page="app"][data-app-mode="customers"] .customers-detail-copy h2 {
  margin: 0;
  color: #f8fafc;
  line-height: 1.02;
}

body[data-page="app"][data-app-mode="customers"] .customers-hero h2 {
  font-size: clamp(34px, 4vw, 58px);
}

body[data-page="app"][data-app-mode="customers"] .customers-hero p,
body[data-page="app"][data-app-mode="customers"] .customers-detail-copy p,
body[data-page="app"][data-app-mode="customers"] .customers-card-contact,
body[data-page="app"][data-app-mode="customers"] .customers-linked-card p {
  margin: 0;
  color: #b9cfe1;
  font-size: 14px;
  line-height: 1.6;
}

body[data-page="app"][data-app-mode="customers"] .customers-hero-badges,
body[data-page="app"][data-app-mode="customers"] .customers-card-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page="app"][data-app-mode="customers"] .customers-hero-badge,
body[data-page="app"][data-app-mode="customers"] .customers-card-pill-row span,
body[data-page="app"][data-app-mode="customers"] .customers-card-score {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(125, 211, 252, 0.24);
  background: rgba(7, 89, 133, 0.24);
  color: #d5f7ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="customers"] .customers-hero-panel {
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(8, 15, 28, 0.64);
  padding: 18px;
  display: grid;
  gap: 12px;
  align-content: start;
}

body[data-page="app"][data-app-mode="customers"] .customers-hero-panel strong {
  color: #f8fafc;
  font-size: 18px;
}

body[data-page="app"][data-app-mode="customers"] .customers-hero-steps {
  margin: 0;
  padding-left: 18px;
  color: #c7d9ea;
  display: grid;
  gap: 10px;
  font-size: 14px;
}

body[data-page="app"][data-app-mode="customers"] .customers-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

body[data-page="app"][data-app-mode="customers"] .customers-stat-card {
  padding: 16px 18px;
  display: grid;
  gap: 6px;
}

body[data-page="app"][data-app-mode="customers"] .customers-stat-card.wide {
  grid-column: span 1;
}

body[data-page="app"][data-app-mode="customers"] .customers-stat-card span,
body[data-page="app"][data-app-mode="customers"] .customers-card-metrics small,
body[data-page="app"][data-app-mode="customers"] .customers-detail-stats span,
body[data-page="app"][data-app-mode="customers"] .customers-detail-data small,
body[data-page="app"][data-app-mode="customers"] .customers-score-card span {
  color: #8fb2c9;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="customers"] .customers-stat-card strong,
body[data-page="app"][data-app-mode="customers"] .customers-card-metrics strong,
body[data-page="app"][data-app-mode="customers"] .customers-detail-stats strong,
body[data-page="app"][data-app-mode="customers"] .customers-detail-data strong,
body[data-page="app"][data-app-mode="customers"] .customers-score-card strong {
  color: #f8fafc;
  font-size: 22px;
  font-weight: 800;
}

body[data-page="app"][data-app-mode="customers"] .customers-layout {
  display: none;
}

body[data-page="app"][data-app-mode="customers"] .customers-control-bar,
body[data-page="app"][data-app-mode="customers"] .customers-overview,
body[data-page="app"][data-app-mode="customers"] .customers-detail-wrap,
body[data-page="app"][data-app-mode="customers"] .customers-detail {
  padding: 18px;
}

body[data-page="app"][data-app-mode="customers"] .customers-control-bar,
body[data-page="app"][data-app-mode="customers"] .customers-overview,
body[data-page="app"][data-app-mode="customers"] .customers-detail-wrap,
body[data-page="app"][data-app-mode="customers"] .customers-detail,
body[data-page="app"][data-app-mode="customers"] .customers-preview-dialog {
  display: grid;
  gap: 16px;
}

body[data-page="app"][data-app-mode="customers"] .customers-control-bar h2,
body[data-page="app"][data-app-mode="customers"] .customers-detail-card h3,
body[data-page="app"][data-app-mode="customers"] .customers-card h3 {
  margin: 0;
  color: #f8fafc;
}

body[data-page="app"][data-app-mode="customers"] .customers-control-kicker,
body[data-page="app"][data-app-mode="customers"] .customers-detail-card-head span,
body[data-page="app"][data-app-mode="customers"] .customers-detail-toolbar p,
body[data-page="app"][data-app-mode="customers"] .customers-preview-head p {
  margin: 4px 0 0;
  color: #a8bfd2;
  font-size: 13px;
}

body[data-page="app"][data-app-mode="customers"] .customers-control-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7dd3fc;
}

body[data-page="app"][data-app-mode="customers"] .customers-control-actions {
  align-items: end;
}

body[data-page="app"][data-app-mode="customers"] .customers-search {
  display: grid;
  gap: 6px;
  min-width: min(340px, 100%);
}

body[data-page="app"][data-app-mode="customers"] .customers-search span {
  color: #8fb2c9;
  font-size: 12px;
}

body[data-page="app"][data-app-mode="customers"] .customers-search input {
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(11, 19, 33, 0.9);
  color: #e2e8f0;
  padding: 12px 14px;
  font-size: 14px;
}

body[data-page="app"][data-app-mode="customers"] .customers-search input:focus {
  outline: none;
  border-color: rgba(56, 189, 248, 0.82);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.16);
}

body[data-page="app"][data-app-mode="customers"] .customers-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

body[data-page="app"][data-app-mode="customers"] .customers-pagination {
  align-items: center;
}

body[data-page="app"][data-app-mode="customers"] .customers-page-meta {
  color: #9ac5d8;
  font-size: 13px;
}

body[data-page="app"][data-app-mode="customers"] .customers-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page="app"][data-app-mode="customers"] .customers-page-pill {
  min-width: 42px;
  min-height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(125, 211, 252, 0.2);
  background: rgba(6, 78, 59, 0.18);
  color: #d9f7ff;
  font-weight: 800;
  cursor: pointer;
}

body[data-page="app"][data-app-mode="customers"] .customers-page-pill.active {
  border-color: rgba(45, 212, 191, 0.55);
  background: rgba(13, 148, 136, 0.26);
}

body[data-page="app"][data-app-mode="customers"] .customers-card {
  padding: 15px;
  display: grid;
  gap: 12px;
  cursor: pointer;
  min-height: 100%;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

body[data-page="app"][data-app-mode="customers"] .customers-card:hover,
body[data-page="app"][data-app-mode="customers"] .customers-card.active {
  transform: translateY(-3px);
  border-color: rgba(45, 212, 191, 0.4);
  box-shadow:
    0 34px 58px -36px rgba(45, 212, 191, 0.34),
    0 0 0 1px rgba(125, 211, 252, 0.05);
}

body[data-page="app"][data-app-mode="customers"] .customers-card:focus-visible {
  outline: none;
  transform: translateY(-3px);
  border-color: rgba(125, 211, 252, 0.52);
  box-shadow:
    0 34px 58px -36px rgba(45, 212, 191, 0.34),
    0 0 0 3px rgba(56, 189, 248, 0.18);
}

body[data-page="app"][data-app-mode="customers"] .customers-card-head h3,
body[data-page="app"][data-app-mode="customers"] .customers-card-head p {
  margin: 0;
}

body[data-page="app"][data-app-mode="customers"] .customers-card-head > div,
body[data-page="app"][data-app-mode="customers"] .customers-linked-head > div {
  display: grid;
  gap: 4px;
}

body[data-page="app"][data-app-mode="customers"] .customers-card-identity,
body[data-page="app"][data-app-mode="customers"] .customers-detail-identity {
  margin: 0;
  color: #edf8ff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}

body[data-page="app"][data-app-mode="customers"] .customers-card-context,
body[data-page="app"][data-app-mode="customers"] .customers-detail-context {
  margin: 0;
  color: #8fdfff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="customers"] .customers-card-score {
  background: rgba(6, 78, 59, 0.34);
}

body[data-page="app"][data-app-mode="customers"] .customers-card-contact {
  display: grid;
  gap: 3px;
}

body[data-page="app"][data-app-mode="customers"] .customers-card-profile-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

body[data-page="app"][data-app-mode="customers"] .customers-card-profile-note span {
  color: #b7d0e0;
  font-size: 12px;
  line-height: 1.5;
}

body[data-page="app"][data-app-mode="customers"] .customers-card-profile-note strong {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(125, 211, 252, 0.22);
  background: rgba(7, 89, 133, 0.16);
  color: #dff8ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="customers"] .customers-card-metrics,
body[data-page="app"][data-app-mode="customers"] .customers-detail-stats,
body[data-page="app"][data-app-mode="customers"] .customers-detail-grid,
body[data-page="app"][data-app-mode="customers"] .customers-detail-data,
body[data-page="app"][data-app-mode="customers"] .customers-score-grid {
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="customers"] .customers-card-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-page="app"][data-app-mode="customers"] .customers-card-metrics div,
body[data-page="app"][data-app-mode="customers"] .customers-detail-stats article,
body[data-page="app"][data-app-mode="customers"] .customers-detail-data div {
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(8, 15, 28, 0.58);
  padding: 12px;
  display: grid;
  gap: 4px;
}

body[data-page="app"][data-app-mode="customers"] .customers-meter {
  height: 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(125, 211, 252, 0.12);
  overflow: hidden;
}

body[data-page="app"][data-app-mode="customers"] .customers-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #2dd4bf);
}

body[data-page="app"][data-app-mode="customers"] .customers-meter.danger i {
  background: linear-gradient(90deg, #f59e0b, #ef4444);
}

body[data-page="app"][data-app-mode="customers"] .customers-empty {
  border-radius: 20px;
  border: 1px dashed rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 36, 0.52);
  padding: 18px;
  color: #a7bed2;
  font-size: 14px;
  line-height: 1.6;
}

body[data-page="app"][data-app-mode="customers"] .customers-detail {
  display: grid;
  gap: 16px;
  padding: 0;
}

body[data-page="app"][data-app-mode="customers"] .customers-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 16px;
}

body[data-page="app"][data-app-mode="customers"] .customers-detail-copy {
  display: grid;
  gap: 12px;
  align-content: start;
}

body[data-page="app"][data-app-mode="customers"] .customers-detail-address {
  color: #b9cfe1;
}

body[data-page="app"][data-app-mode="customers"] .customers-detail-actions {
  justify-content: flex-start;
}

body[data-page="app"][data-app-mode="customers"] .customers-detail-toolbar {
  align-items: center;
}

body[data-page="app"][data-app-mode="customers"] .customers-score-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-page="app"][data-app-mode="customers"] .customers-score-card {
  padding: 16px;
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="customers"] .customers-score-card.risk {
  border-color: rgba(248, 113, 113, 0.16);
}

body[data-page="app"][data-app-mode="customers"] .customers-detail-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body[data-page="app"][data-app-mode="customers"] .customers-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-page="app"][data-app-mode="customers"] .customers-detail-card {
  padding: 16px;
}

body[data-page="app"][data-app-mode="customers"] .customers-detail-summary-card {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 16px;
}

body[data-page="app"][data-app-mode="customers"] .customers-detail-grid-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-page="app"][data-app-mode="customers"] .customers-detail-linked {
  display: grid;
  gap: 12px;
}

body[data-page="app"][data-app-mode="customers"] .customers-linked-list {
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="customers"] .customers-linked-card {
  padding: 14px;
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="customers"] .customers-linked-card strong {
  color: #f8fafc;
  font-size: 16px;
}

body[data-page="app"][data-app-mode="customers"] .customers-linked-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page="app"][data-app-mode="customers"] .customers-linked-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(8, 15, 28, 0.64);
  color: #d8e6f2;
  font-size: 12px;
}

body[data-page="app"][data-app-mode="customers"] .customers-linked-side {
  color: #9fd1e0;
  font-size: 12px;
}

body[data-page="app"][data-app-mode="customers"] .customers-linked-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(125, 211, 252, 0.22);
  background: rgba(7, 89, 133, 0.2);
  color: #e1f7ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="customers"] .customers-linked-badge.paid,
body[data-page="app"][data-app-mode="customers"] .customers-linked-badge.approved {
  background: rgba(20, 83, 45, 0.48);
  border-color: rgba(34, 197, 94, 0.34);
  color: #d6ffe5;
}

body[data-page="app"][data-app-mode="customers"] .customers-linked-badge.open,
body[data-page="app"][data-app-mode="customers"] .customers-linked-badge.review {
  background: rgba(8, 47, 73, 0.56);
  border-color: rgba(56, 189, 248, 0.34);
  color: #d9f5ff;
}

body[data-page="app"][data-app-mode="customers"] .customers-linked-badge.overdue,
body[data-page="app"][data-app-mode="customers"] .customers-linked-badge.revision {
  background: rgba(127, 29, 29, 0.42);
  border-color: rgba(248, 113, 113, 0.34);
  color: #ffe2e2;
}

body[data-page="app"][data-app-mode="customers"] .customers-linked-badge.draft {
  background: rgba(51, 65, 85, 0.48);
  border-color: rgba(148, 163, 184, 0.24);
  color: #d7e3ed;
}

body[data-page="app"][data-app-mode="customers"] .customers-linked-badge.pending {
  background: rgba(120, 53, 15, 0.42);
  border-color: rgba(251, 191, 36, 0.32);
  color: #ffe9bd;
}

body[data-page="app"][data-app-mode="customers"] .customers-linked-badge.no_data {
  background: rgba(30, 41, 59, 0.52);
  border-color: rgba(148, 163, 184, 0.22);
  color: #dbe7f2;
}

body[data-page="app"][data-app-mode="customers"] .customers-linked-badge.finance {
  background: rgba(8, 47, 73, 0.52);
  border-color: rgba(125, 211, 252, 0.28);
  color: #dff8ff;
}

body[data-page="app"][data-app-mode="customers"] .customers-linked-actions,
body[data-page="app"][data-app-mode="customers"] .customers-move-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}

body[data-page="app"][data-app-mode="customers"] .customers-move-control {
  display: grid;
  gap: 6px;
  flex: 1 1 280px;
}

body[data-page="app"][data-app-mode="customers"] .customers-move-control span {
  color: #8fb2c9;
  font-size: 12px;
}

body[data-page="app"][data-app-mode="customers"] .customers-move-control select {
  width: 100%;
  min-height: 44px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(11, 19, 33, 0.9);
  color: #e2e8f0;
  padding: 10px 14px;
  font-size: 14px;
}

body[data-page="app"][data-app-mode="customers"] .customers-move-control select:focus {
  outline: none;
  border-color: rgba(56, 189, 248, 0.82);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.16);
}

body[data-page="app"][data-app-mode="customers"] .customers-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  padding: 18px;
}

body[data-page="app"][data-app-mode="customers"] .customers-preview-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 10%, rgba(56, 189, 248, 0.12), transparent 24%),
    radial-gradient(circle at 80% 0%, rgba(251, 191, 36, 0.1), transparent 24%),
    rgba(2, 6, 23, 0.78);
  backdrop-filter: blur(14px);
}

body[data-page="app"][data-app-mode="customers"] .customers-preview-dialog {
  position: relative;
  width: min(1360px, calc(100vw - 36px));
  height: min(94vh, 960px);
  margin: 0 auto;
  padding: 24px;
  border-radius: 34px;
  border: 1px solid rgba(125, 211, 252, 0.18);
  background:
    radial-gradient(circle at 14% 0%, rgba(56, 189, 248, 0.12), transparent 24%),
    radial-gradient(circle at 92% 0%, rgba(250, 204, 21, 0.08), transparent 20%),
    linear-gradient(180deg, rgba(5, 11, 22, 0.96), rgba(8, 14, 28, 0.98));
  box-shadow:
    0 48px 120px -54px rgba(2, 6, 23, 0.96),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body[data-page="app"][data-app-mode="customers"] .customers-preview-layout {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 18px;
}

body[data-page="app"][data-app-mode="customers"] .customers-preview-panel {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 18px;
  border-radius: 28px;
  border: 1px solid rgba(125, 211, 252, 0.14);
  background:
    radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(7, 14, 28, 0.96), rgba(10, 18, 34, 0.94));
}

body[data-page="app"][data-app-mode="customers"] .customers-preview-panel-copy {
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="customers"] .customers-preview-panel-kicker {
  margin: 0;
  color: #8fdfff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="customers"] .customers-preview-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page="app"][data-app-mode="customers"] .customers-preview-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body[data-page="app"][data-app-mode="customers"] .customers-preview-meta article {
  display: grid;
  gap: 5px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(8, 15, 28, 0.56);
}

body[data-page="app"][data-app-mode="customers"] .customers-preview-meta span {
  color: #8fb2c9;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="customers"] .customers-preview-meta strong {
  color: #f8fafc;
  font-size: 14px;
  line-height: 1.45;
}

body[data-page="app"][data-app-mode="customers"] .customers-preview-scene {
  min-height: 0;
  border-radius: 30px;
  border: 1px solid rgba(125, 211, 252, 0.14);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.08), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(56, 189, 248, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(5, 11, 22, 0.92), rgba(8, 14, 28, 0.98));
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-page="app"][data-app-mode="customers"] .customers-preview-stage {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: auto;
  padding: 24px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 18px;
}

body[data-page="app"][data-app-mode="customers"] .customers-preview-stage::-webkit-scrollbar {
  width: 10px;
}

body[data-page="app"][data-app-mode="customers"] .customers-preview-stage::-webkit-scrollbar-track {
  background: rgba(15, 23, 36, 0.72);
  border-radius: 999px;
}

body[data-page="app"][data-app-mode="customers"] .customers-preview-stage::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.5);
  border-radius: 999px;
}

body[data-page="app"][data-app-mode="customers"] .customers-preview-empty {
  width: min(100%, 720px);
  min-height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 42px 32px;
  text-align: center;
  border-radius: 30px;
  border: 1px dashed rgba(148, 163, 184, 0.24);
  background:
    radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.08), transparent 28%),
    rgba(8, 15, 28, 0.72);
}

body[data-page="app"][data-app-mode="customers"] .customers-preview-empty strong {
  color: #f8fafc;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.02;
}

body[data-page="app"][data-app-mode="customers"] .customers-preview-empty p {
  margin: 0;
  max-width: 520px;
  color: #b7d0e0;
  font-size: 15px;
  line-height: 1.65;
}

body[data-page="app"][data-app-mode="customers"] .main-template-preview-page-stack {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 18px;
}

body[data-page="app"][data-app-mode="customers"] .main-template-preview-page-frame {
  display: grid;
  gap: 10px;
  justify-items: center;
}

body[data-page="app"][data-app-mode="customers"] .main-template-preview-page-badge {
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(15, 23, 42, 0.82);
  color: #dce8f3;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="customers"] .main-template-preview-a4 {
  position: relative;
  max-width: 100%;
  aspect-ratio: var(--preview-aspect, 210 / 297);
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.16);
  box-shadow:
    0 30px 90px -44px rgba(2, 6, 23, 0.88),
    0 0 0 1px rgba(255, 255, 255, 0.42);
}

body[data-page="app"][data-app-mode="customers"] .main-template-preview-el {
  position: absolute;
  overflow: hidden;
  box-sizing: border-box;
  color: #0f172a;
  font-size: 10px;
  line-height: 1.25;
  border-radius: 2px;
}

body[data-page="app"][data-app-mode="customers"] .main-template-preview-el.text,
body[data-page="app"][data-app-mode="customers"] .main-template-preview-el.agb {
  white-space: pre-wrap;
  word-break: break-word;
}

body[data-page="app"][data-app-mode="customers"] .main-template-preview-el.text,
body[data-page="app"][data-app-mode="customers"] .main-template-preview-el.agb,
body[data-page="app"][data-app-mode="customers"] .main-template-preview-el.invoice-details,
body[data-page="app"][data-app-mode="customers"] .main-template-preview-el.signature,
body[data-page="app"][data-app-mode="customers"] .main-template-preview-el.qr-box,
body[data-page="app"][data-app-mode="customers"] .main-template-preview-el.table-note,
body[data-page="app"][data-app-mode="customers"] .main-template-preview-el.footer-details {
  overflow: visible;
}

body[data-page="app"][data-app-mode="customers"] .main-template-preview-el.signature,
body[data-page="app"][data-app-mode="customers"] .main-template-preview-el.invoice-details,
body[data-page="app"][data-app-mode="customers"] .main-template-preview-el.qr-box,
body[data-page="app"][data-app-mode="customers"] .main-template-preview-el.table-note,
body[data-page="app"][data-app-mode="customers"] .main-template-preview-el.footer-details,
body[data-page="app"][data-app-mode="customers"] .main-template-preview-el.table,
body[data-page="app"][data-app-mode="customers"] .main-template-preview-el.image,
body[data-page="app"][data-app-mode="customers"] .main-template-preview-el.qrcode {
  border: none;
  background: transparent;
  padding: 0;
}

body[data-page="app"][data-app-mode="customers"] .main-template-preview-table-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  background: transparent;
  font-size: inherit;
  line-height: 1.15;
  color: #0f172a;
}

body[data-page="app"][data-app-mode="customers"] .main-template-preview-table-grid th {
  background: rgba(15, 23, 42, 0.07);
  font-weight: 700;
}

body[data-page="app"][data-app-mode="customers"] .main-template-preview-table-grid th,
body[data-page="app"][data-app-mode="customers"] .main-template-preview-table-grid td,
body[data-page="app"][data-app-mode="customers"] .main-template-preview-table-summary td {
  padding: 1px 3px;
  border: none;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
  vertical-align: top;
}

body[data-page="app"][data-app-mode="customers"] .main-template-preview-table-summary {
  border-top: 1px solid rgba(15, 23, 42, 0.14);
}

body[data-page="app"][data-app-mode="customers"] .main-template-preview-table-summary tr.emph td {
  border-top: 1px solid rgba(15, 23, 42, 0.12);
}

body[data-page="app"][data-app-mode="customers"] .main-template-preview-table-summary tr.emph td:last-child {
  color: #047857;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="customers"] .main-template-preview-signature {
  width: 100%;
  height: 100%;
  display: grid;
  gap: 6px;
}

body[data-page="app"][data-app-mode="customers"] .main-template-preview-signature-slot,
body[data-page="app"][data-app-mode="customers"] .main-template-preview-invoice,
body[data-page="app"][data-app-mode="customers"] .main-template-preview-qr-copy,
body[data-page="app"][data-app-mode="customers"] .main-template-preview-footer-column {
  display: grid;
  gap: 2px;
}

body[data-page="app"][data-app-mode="customers"] .main-template-preview-signature-label,
body[data-page="app"][data-app-mode="customers"] .main-template-preview-footer-line {
  color: #0f172a;
  line-height: 1.25;
}

body[data-page="app"][data-app-mode="customers"] .main-template-preview-signature-line {
  border-top: 1px solid rgba(15, 23, 42, 0.4);
}

body[data-page="app"][data-app-mode="customers"] .main-template-preview-signature-name,
body[data-page="app"][data-app-mode="customers"] .main-template-preview-invoice-row span,
body[data-page="app"][data-app-mode="customers"] .main-template-preview-qr-link,
body[data-page="app"][data-app-mode="customers"] .main-template-preview-table-note {
  color: #64748b;
}

body[data-page="app"][data-app-mode="customers"] .main-template-preview-invoice-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

body[data-page="app"][data-app-mode="customers"] .main-template-preview-invoice-row strong {
  color: #0f172a;
  font-weight: 600;
}

body[data-page="app"][data-app-mode="customers"] .main-template-preview-qr-box {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22%;
  gap: 4px;
  align-items: center;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 6px;
  padding: 5px 6px;
  background: #ffffff;
}

body[data-page="app"][data-app-mode="customers"] .main-template-preview-qr-box.align-left {
  grid-template-columns: 22% minmax(0, 1fr);
}

body[data-page="app"][data-app-mode="customers"] .main-template-preview-qr-copy p {
  margin: 0;
  font-size: 0.9em;
  line-height: 1.25;
}

body[data-page="app"][data-app-mode="customers"] .main-template-preview-qr-code {
  height: 100%;
  min-height: 24px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 4px;
  display: grid;
  place-items: center;
  background: #ffffff;
  overflow: hidden;
  font-size: 0.82em;
  font-weight: 700;
  color: #64748b;
}

body[data-page="app"][data-app-mode="customers"] .main-template-preview-table-note {
  border-top: 1px solid rgba(15, 23, 42, 0.14);
  padding-top: 3px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

body[data-page="app"][data-app-mode="customers"] .main-template-preview-table-note.is-empty {
  color: #94a3b8;
  font-style: italic;
}

body[data-page="app"][data-app-mode="customers"] .main-template-preview-footer-details {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body[data-page="app"][data-app-mode="customers"] .main-template-preview-el.image img,
body[data-page="app"][data-app-mode="customers"] .main-template-preview-el.qrcode img {
  width: 100%;
  height: 100%;
  display: block;
}

body[data-page="app"][data-app-mode="customers"] .main-template-preview-el.image img {
  object-fit: fill;
}

body[data-page="app"][data-app-mode="customers"] .main-template-preview-el.qrcode img {
  object-fit: contain;
}

body[data-page="app"][data-app-mode="customers"] .main-template-preview-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 6px;
  font-size: 12px;
  color: #64748b;
}

@media (max-width: 1180px) {
  body[data-page="app"][data-app-mode="customers"] .customers-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-page="app"][data-app-mode="customers"] .customers-list,
  body[data-page="app"][data-app-mode="customers"] .customers-detail-hero,
  body[data-page="app"][data-app-mode="customers"] .customers-detail-grid,
  body[data-page="app"][data-app-mode="customers"] .customers-detail-summary-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  body[data-page="app"][data-app-mode="customers"] .customers-shell {
    padding: 14px;
  }

  body[data-page="app"][data-app-mode="customers"] .customers-topbar,
  body[data-page="app"][data-app-mode="customers"] .customers-hero,
  body[data-page="app"][data-app-mode="customers"] .customers-control-bar,
  body[data-page="app"][data-app-mode="customers"] .customers-overview,
  body[data-page="app"][data-app-mode="customers"] .customers-detail-wrap,
  body[data-page="app"][data-app-mode="customers"] .customers-detail {
    padding: 16px;
  }

  body[data-page="app"][data-app-mode="customers"] .customers-hero,
  body[data-page="app"][data-app-mode="customers"] .customers-stats,
  body[data-page="app"][data-app-mode="customers"] .customers-list,
  body[data-page="app"][data-app-mode="customers"] .customers-card-metrics,
  body[data-page="app"][data-app-mode="customers"] .customers-score-grid,
  body[data-page="app"][data-app-mode="customers"] .customers-detail-stats,
  body[data-page="app"][data-app-mode="customers"] .customers-detail-data,
  body[data-page="app"][data-app-mode="customers"] .customers-detail-summary-card,
  body[data-page="app"][data-app-mode="customers"] .customers-detail-grid-compact {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  body[data-page="app"][data-app-mode="customers"] .customers-preview-dialog {
    width: calc(100vw - 18px);
    height: min(94vh, 860px);
    padding: 12px;
  }

  body[data-page="app"][data-app-mode="customers"] .customers-preview-layout,
  body[data-page="app"][data-app-mode="customers"] .customers-preview-meta {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="customers"] .customers-preview-stage {
    padding: 16px;
  }
}

body[data-page="app"][data-app-mode="mailbox"] {
  color: #e6eef8;
  background:
    radial-gradient(circle at 10% 0%, rgba(34, 211, 238, 0.18), transparent 24%),
    radial-gradient(circle at 88% 8%, rgba(251, 191, 36, 0.14), transparent 24%),
    linear-gradient(180deg, #05101e 0%, #071424 38%, #081525 66%, #040913 100%);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-shell {
  --mail-accent: #5eead4;
  --mail-accent-soft: rgba(45, 212, 191, 0.18);
  --mail-highlight: #8bdcff;
  --mail-warm: #fbbf24;
  min-height: 100vh;
  padding: 22px;
  display: grid;
  gap: 20px;
  background:
    radial-gradient(circle at 8% 0%, rgba(34, 211, 238, 0.18), transparent 22%),
    radial-gradient(circle at 84% 0%, rgba(251, 191, 36, 0.12), transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(59, 130, 246, 0.1), transparent 30%),
    linear-gradient(180deg, #05101e 0%, #071424 36%, #081525 70%, #040913 100%);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-shell[data-provider="microsoft"] {
  --mail-accent: #60a5fa;
  --mail-accent-soft: rgba(59, 130, 246, 0.18);
  --mail-highlight: #c4b5fd;
  --mail-warm: #38bdf8;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-shell[data-provider="yahoo"] {
  --mail-accent: #a78bfa;
  --mail-accent-soft: rgba(139, 92, 246, 0.18);
  --mail-highlight: #e9d5ff;
  --mail-warm: #f472b6;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-shell[data-provider="icloud"] {
  --mail-accent: #7dd3fc;
  --mail-accent-soft: rgba(125, 211, 252, 0.18);
  --mail-highlight: #dbeafe;
  --mail-warm: #67e8f9;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-shell[data-provider="aol"] {
  --mail-accent: #fb7185;
  --mail-accent-soft: rgba(251, 113, 133, 0.18);
  --mail-highlight: #fecdd3;
  --mail-warm: #fdba74;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-shell[data-provider="custom"] {
  --mail-accent: #34d399;
  --mail-accent-soft: rgba(52, 211, 153, 0.18);
  --mail-highlight: #fef08a;
  --mail-warm: #f59e0b;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-topbar,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-top-actions,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-pane-head,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-detail-card-head,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-topbar,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-hero,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-pane,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-panel,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-detail-card,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-signal-card,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-preview-summary,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-item {
  border-radius: 30px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.05), transparent 24%),
    radial-gradient(circle at 85% 0%, rgba(255, 255, 255, 0.04), transparent 24%),
    linear-gradient(160deg, rgba(7, 14, 28, 0.96), rgba(10, 17, 31, 0.98));
  box-shadow:
    0 32px 80px -48px rgba(8, 15, 28, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  position: relative;
  overflow: hidden;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-topbar::before,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-hero::before,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-pane::before,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-panel::before,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-detail-card::before,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-signal-card::before,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-preview-summary::before,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 30%),
    radial-gradient(circle at 100% 0%, var(--mail-accent-soft), transparent 28%);
  pointer-events: none;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-topbar {
  padding: 18px 22px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-topbar h1 {
  margin: 6px 0 0;
  color: #f8fafc;
  font-size: clamp(30px, 3vw, 42px);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-top-actions {
  align-items: center;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hero,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-grid,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-bottom-grid,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-detail-grid,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-provider-list,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-list,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-routing-grid,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-architecture-list,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-security-list,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-lanes {
  display: grid;
  gap: 14px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hero,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-pane,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-panel {
  padding: 20px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
  align-items: stretch;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hero-copy {
  display: grid;
  gap: 14px;
  align-content: center;
  padding-right: 12px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-kicker,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-pane-kicker,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-signal-kicker {
  margin: 0;
  color: var(--mail-highlight);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hero-copy h2 {
  margin: 0;
  color: #f8fafc;
  font-size: clamp(36px, 4.3vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.05em;
  max-width: 13ch;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hero-copy p,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-preview-summary p,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-item p,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-detail-card p,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-panel p,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-architecture-list span {
  margin: 0;
  color: #b9cde0;
  font-size: 14px;
  line-height: 1.65;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hero-badges,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hero-badges span,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-pane-chip,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-status {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.65);
  color: #e8f7ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-pane-chip,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-status {
  border-color: color-mix(in srgb, var(--mail-accent) 40%, rgba(148, 163, 184, 0.22));
  background: color-mix(in srgb, var(--mail-accent-soft) 70%, rgba(15, 23, 42, 0.56));
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hero-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hero-steps article,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-routing-grid article,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-architecture-list div,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-lane,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-security-item {
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(8, 15, 28, 0.58);
  padding: 14px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hero-steps strong {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--mail-accent), var(--mail-warm));
  color: #04111f;
  font-size: 15px;
  font-weight: 900;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hero-steps span,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-lane small {
  display: block;
  margin-top: 10px;
  color: #9eb9cf;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hero-scene {
  position: relative;
  min-height: 470px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-scene-grid {
  position: absolute;
  inset: 14px;
  border-radius: 28px;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.06) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1), transparent 85%);
  opacity: 0.72;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-scene-orbit {
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 1;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-scene-ring,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-scene-core,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-scene-node {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-scene-ring {
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--mail-accent) 45%, rgba(255, 255, 255, 0.12));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  animation: mailbox-orbit-spin 24s linear infinite;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-scene-ring.ring-a {
  width: 74%;
  height: 74%;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-scene-ring.ring-b {
  width: 52%;
  height: 52%;
  animation-duration: 18s;
  animation-direction: reverse;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-scene-ring.ring-c {
  width: 90%;
  height: 90%;
  opacity: 0.5;
  animation-duration: 34s;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-scene-core {
  width: 134px;
  height: 134px;
  border-radius: 32px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.16), transparent 30%),
    linear-gradient(155deg, color-mix(in srgb, var(--mail-accent) 70%, #0f172a), rgba(6, 78, 59, 0.86));
  color: #ecfeff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.15;
  box-shadow:
    0 28px 56px -34px color-mix(in srgb, var(--mail-accent) 75%, transparent),
    0 0 48px -24px color-mix(in srgb, var(--mail-highlight) 60%, transparent);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-scene-node {
  min-width: 92px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 15, 28, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.24);
  color: #f8fafc;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 18px 30px -26px rgba(8, 15, 28, 0.9);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-scene-node::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--mail-accent) 60%, white), transparent 65%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-scene-node.node-google {
  left: 22%;
  top: 22%;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-scene-node.node-microsoft {
  left: 77%;
  top: 25%;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-scene-node.node-yahoo {
  left: 76%;
  top: 76%;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-scene-node.node-icloud {
  left: 24%;
  top: 76%;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-signal-card {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: min(320px, calc(100% - 28px));
  padding: 18px;
  backdrop-filter: blur(16px);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-signal-card strong,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-detail-card strong,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-preview-summary strong,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-item strong,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-routing-grid strong,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-architecture-list strong {
  color: #f8fafc;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-signal-card strong,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-preview-summary strong {
  display: block;
  font-size: 20px;
  line-height: 1.2;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-signal-card span,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-detail-card-head span,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-head small {
  color: #a9c5db;
  font-size: 12px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-grid {
  grid-template-columns: minmax(290px, 0.86fr) minmax(0, 1.18fr) minmax(320px, 0.96fr);
  align-items: start;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-pane {
  align-content: start;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-provider-card {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 24px;
  background: rgba(8, 15, 28, 0.62);
  color: #f8fafc;
  padding: 14px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-provider-card:hover,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-provider-card.is-active {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--mail-accent) 45%, rgba(148, 163, 184, 0.16));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--mail-accent-soft) 90%, rgba(8, 15, 28, 0.72)), rgba(8, 15, 28, 0.72));
  box-shadow: 0 24px 40px -32px color-mix(in srgb, var(--mail-accent) 70%, transparent);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-provider-mark {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 900;
  color: #04111f;
  background: linear-gradient(135deg, var(--mail-accent), var(--mail-warm));
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-provider-copy {
  display: grid;
  gap: 3px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-provider-copy strong,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-pane-head h3,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-panel h3 {
  margin: 0;
  color: #f8fafc;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-provider-copy small {
  color: #9eb9cf;
  font-size: 12px;
  line-height: 1.4;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-provider-card i {
  font-style: normal;
  color: #dff8ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-detail-card {
  padding: 16px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-pulse-bar {
  margin-top: 16px;
  height: 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.16);
  overflow: hidden;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-pulse-bar i {
  display: block;
  width: 58%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mail-accent), var(--mail-highlight), var(--mail-warm));
  animation: mailbox-pulse 3.2s ease-in-out infinite;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-lanes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-lane strong,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-security-item strong,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-routing-grid strong,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-architecture-list strong {
  display: block;
  font-size: 15px;
  line-height: 1.35;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-security-list {
  align-content: start;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-security-item p,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-action-note {
  margin-top: 8px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-action-stack {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-preview-pane {
  align-content: start;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-preview-summary,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-note {
  padding: 16px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-item {
  padding: 14px;
  transition: transform 0.22s ease, border-color 0.22s ease;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--mail-accent) 32%, rgba(148, 163, 184, 0.14));
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-item strong {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.35;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-item p {
  margin-top: 8px;
  font-size: 13px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-item.tone-new .mailbox-thread-status {
  background: rgba(20, 83, 45, 0.42);
  border-color: rgba(34, 197, 94, 0.34);
  color: #d7ffe6;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-item.tone-synced .mailbox-thread-status {
  background: rgba(8, 47, 73, 0.48);
  border-color: rgba(56, 189, 248, 0.34);
  color: #dff8ff;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-item.tone-draft .mailbox-thread-status {
  background: rgba(120, 53, 15, 0.44);
  border-color: rgba(251, 191, 36, 0.34);
  color: #fff0c7;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-note {
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background:
    radial-gradient(circle at 100% 0%, var(--mail-accent-soft), transparent 28%),
    rgba(8, 15, 28, 0.62);
  color: #d9ebf8;
  font-size: 14px;
  line-height: 1.6;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-bottom-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-routing-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-architecture-list {
  align-content: start;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-panel h3 {
  font-size: 24px;
}

@keyframes mailbox-orbit-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes mailbox-pulse {
  0%,
  100% {
    width: 34%;
    opacity: 0.9;
  }
  50% {
    width: 82%;
    opacity: 1;
  }
}

@media (max-width: 1380px) {
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-hero,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-grid,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-bottom-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-lanes,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-routing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1040px) {
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-detail-grid,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-hero-steps {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-hero-copy h2 {
    max-width: none;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-hero-scene {
    min-height: 400px;
  }
}

@media (max-width: 860px) {
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-shell {
    padding: 14px;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-topbar,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-hero,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-pane,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-panel {
    padding: 16px;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-lanes,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-routing-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-provider-card {
    grid-template-columns: auto 1fr;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-provider-card i {
    grid-column: 2;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-hero-actions .btn {
    width: 100%;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-signal-card {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    margin-top: 16px;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-scene-orbit {
    width: min(100%, 360px);
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-scene-core {
    width: 120px;
    height: 120px;
    font-size: 14px;
  }
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-hero {
  grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
  align-items: stretch;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-copy,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-note,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-form,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-inbox-panel,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-panel {
  display: grid;
  gap: 14px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-copy h2 {
  margin: 0;
  color: #f8fafc;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.05em;
  max-width: 11ch;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-copy p,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-note p {
  margin: 0;
  color: #bfd2e4;
  font-size: 15px;
  line-height: 1.7;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-note {
  align-content: start;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background:
    radial-gradient(circle at 100% 0%, var(--mail-accent-soft), transparent 34%),
    rgba(7, 14, 28, 0.58);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-note strong {
  color: #f8fafc;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
  gap: 20px;
  align-items: start;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-simple-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-simple-head h3 {
  margin: 4px 0 0;
  color: #f8fafc;
  font-size: 28px;
  line-height: 1.05;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-provider-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-field {
  display: grid;
  gap: 8px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-field span,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-checkbox-field span {
  color: #dbeaf8;
  font-size: 13px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-field input,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-field select {
  width: 100%;
  min-height: 54px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(7, 14, 28, 0.78);
  color: #f8fafc;
  padding: 0 16px;
  font: inherit;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-field input::placeholder {
  color: #7f97ab;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-field input:focus,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-field select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--mail-accent) 46%, rgba(148, 163, 184, 0.18));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mail-accent-soft) 75%, transparent);
  transform: translateY(-1px);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-form-row,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-advanced-fields {
  display: grid;
  gap: 12px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-form-row {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.8fr);
  align-items: end;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-form-row.mailbox-form-row-wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-advanced-fields[hidden] {
  display: none;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-domain-setup[hidden] {
  display: none;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-domain-setup {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background:
    radial-gradient(circle at 100% 0%, rgba(94, 234, 212, 0.14), transparent 30%),
    rgba(9, 19, 36, 0.88);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-domain-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-domain-head strong {
  display: block;
  color: #f8fafc;
  font-size: 16px;
  line-height: 1.2;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-domain-head p,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-domain-status,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-domain-summary p {
  margin: 0;
  color: #bcd1e5;
  font-size: 13px;
  line-height: 1.6;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-domain-status-wrap {
  display: grid;
  align-content: end;
  min-height: 54px;
  padding: 0 16px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(4, 11, 22, 0.56);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-domain-status[data-state="loading"] {
  color: #dff8ff;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-domain-status[data-state="saved"] {
  color: #bbffd7;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-domain-status[data-state="error"] {
  color: #ffb9c1;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-domain-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-domain-check-item {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.025);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-domain-check-item strong {
  color: #f8fafc;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-domain-check-item span {
  color: #bcd1e5;
  font-size: 12px;
  line-height: 1.55;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-domain-check-item[data-state="ok"] {
  border-color: rgba(45, 212, 191, 0.24);
  background: rgba(16, 185, 129, 0.12);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-domain-check-item[data-state="missing"] {
  border-color: rgba(248, 113, 113, 0.24);
  background: rgba(239, 68, 68, 0.12);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-domain-check-item[data-state="pending"] {
  border-color: rgba(125, 211, 252, 0.2);
  background: rgba(56, 189, 248, 0.08);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-domain-summary {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(4, 11, 22, 0.48);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-domain-summary ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: #d8e8f7;
  font-size: 12px;
  line-height: 1.6;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-domain-mode-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-domain-mode-chip {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(6, 12, 25, 0.72);
  color: #d7e6f5;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.22s ease, transform 0.22s ease, background 0.22s ease;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-domain-mode-chip.is-active {
  border-color: rgba(94, 234, 212, 0.3);
  background: linear-gradient(135deg, rgba(58, 123, 213, 0.24), rgba(94, 234, 212, 0.22));
  color: #f8fbff;
  transform: translateY(-1px);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-domain-connect-panel,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-panel,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-mailbox-stage {
  display: grid;
  gap: 14px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-quickstart {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-quickstart article {
  display: grid;
  gap: 6px;
  padding: 13px 14px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background:
    linear-gradient(180deg, rgba(10, 18, 34, 0.86), rgba(8, 15, 28, 0.78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-quickstart strong {
  color: #f8fafc;
  font-size: 12px;
  letter-spacing: 0.04em;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-quickstart span,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-inline-help {
  color: #b9cee0;
  font-size: 12px;
  line-height: 1.55;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-inline-help {
  display: block;
  margin-top: 2px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-panel[hidden] {
  display: none;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-head,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-mailbox-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-head strong,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-mailbox-head strong {
  display: block;
  color: #f8fafc;
  font-size: 16px;
  line-height: 1.2;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-head p,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-mailbox-head p,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-empty {
  margin: 0;
  color: #bcd1e5;
  font-size: 13px;
  line-height: 1.6;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-provider-support {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background:
    radial-gradient(circle at 100% 0%, rgba(96, 165, 250, 0.12), transparent 28%),
    rgba(5, 12, 24, 0.58);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-provider-support-head {
  display: grid;
  gap: 4px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-provider-support-head strong {
  color: #f8fafc;
  font-size: 14px;
  line-height: 1.2;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-provider-support-head span {
  color: #a9c0d4;
  font-size: 12px;
  line-height: 1.55;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-provider-support-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-provider-support-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: #e8f3fb;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-domain-list,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-mailbox-list {
  display: grid;
  gap: 12px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-domain-card,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-mailbox-card,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-empty,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-mailbox-stage {
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background:
    radial-gradient(circle at 100% 0%, rgba(96, 165, 250, 0.1), transparent 28%),
    rgba(4, 11, 22, 0.54);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-domain-card {
  display: grid;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.22s ease, transform 0.22s ease, background 0.22s ease;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-domain-card:hover {
  transform: translateY(-1px);
  border-color: rgba(125, 211, 252, 0.24);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-domain-card.is-active {
  border-color: rgba(94, 234, 212, 0.32);
  background:
    radial-gradient(circle at 100% 0%, rgba(94, 234, 212, 0.14), transparent 26%),
    rgba(6, 16, 32, 0.86);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-domain-main,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-mailbox-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-domain-main strong,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-mailbox-main strong {
  color: #f8fafc;
  font-size: 15px;
  line-height: 1.2;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-domain-main p,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-mailbox-main p,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-domain-meta,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-mailbox-meta {
  margin: 0;
  color: #b7cce2;
  font-size: 12px;
  line-height: 1.55;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-domain-badges,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-mailbox-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.7);
  color: #d9e8f5;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-badge[data-state="ready"] {
  border-color: rgba(45, 212, 191, 0.28);
  background: rgba(16, 185, 129, 0.15);
  color: #c9ffe3;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-badge[data-state="dns_pending"] {
  border-color: rgba(125, 211, 252, 0.22);
  background: rgba(56, 189, 248, 0.11);
  color: #d7f0ff;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-badge[data-state="draft"] {
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.66);
  color: #dbe7f1;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-badge[data-state="missing"] {
  border-color: rgba(248, 113, 113, 0.24);
  background: rgba(239, 68, 68, 0.11);
  color: #ffd3d8;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-grid article {
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.025);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-preview article {
  display: grid;
  gap: 6px;
  padding: 13px 14px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background:
    linear-gradient(180deg, rgba(10, 18, 34, 0.9), rgba(8, 15, 28, 0.82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-preview strong,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-note strong {
  color: #f8fafc;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-preview strong {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-preview span {
  color: #bdd1e3;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-note {
  margin: -2px 0 0;
  color: #93adc1;
  font-size: 12px;
  line-height: 1.6;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-grid strong {
  display: block;
  margin-bottom: 4px;
  color: #f8fafc;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-grid span {
  color: #bcd1e5;
  font-size: 12px;
  line-height: 1.55;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-actions {
  align-items: center;
}

body[data-page="app"][data-app-mode="mailbox"] [data-mailbox-connect-only][hidden] {
  display: none !important;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-advanced-label {
  margin: 4px 0 0;
  color: #9fc1da;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-checkbox-field {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(7, 14, 28, 0.78);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-checkbox-field input {
  width: 18px;
  height: 18px;
  accent-color: var(--mail-accent);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-form-status {
  margin: 0;
  min-height: 24px;
  color: #bfd2e4;
  font-size: 13px;
  line-height: 1.55;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-form-status[data-state="loading"] {
  color: #dff8ff;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-form-status[data-state="saved"] {
  color: #b7ffd7;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-form-status[data-state="error"] {
  color: #ffb6be;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-preview-summary {
  gap: 10px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-preview-status {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.62);
  color: #dff8ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-preview-status[data-state="connected"],
body[data-page="app"][data-app-mode="mailbox"] .mailbox-pane-chip[data-state="connected"] {
  border-color: rgba(45, 212, 191, 0.24);
  background: rgba(16, 185, 129, 0.14);
  color: #c7ffe1;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-folder-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-folder-strip[hidden] {
  display: none;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-folder-pill {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(7, 14, 28, 0.72);
  color: #d9ebf8;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-folder-pill:hover,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-folder-pill.is-active {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--mail-accent) 40%, rgba(148, 163, 184, 0.16));
  background: color-mix(in srgb, var(--mail-accent-soft) 78%, rgba(7, 14, 28, 0.72));
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-list-live {
  min-height: 480px;
  align-content: start;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-empty-state {
  padding: 22px;
  border-radius: 24px;
  border: 1px dashed rgba(148, 163, 184, 0.22);
  background: rgba(7, 14, 28, 0.38);
  color: #bfd2e4;
  font-size: 14px;
  line-height: 1.65;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-item {
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-item.is-unread {
  border-color: color-mix(in srgb, var(--mail-accent) 40%, rgba(148, 163, 184, 0.16));
  box-shadow:
    0 28px 64px -42px rgba(8, 15, 28, 0.9),
    0 0 0 1px color-mix(in srgb, var(--mail-accent-soft) 68%, transparent);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-flag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.62);
  color: #d9ebf8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-flag.unread {
  border-color: rgba(45, 212, 191, 0.3);
  background: rgba(16, 185, 129, 0.16);
  color: #c7ffe1;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-flag.answered {
  border-color: rgba(96, 165, 250, 0.28);
  background: rgba(59, 130, 246, 0.16);
  color: #dbeafe;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-flag.flagged {
  border-color: rgba(251, 191, 36, 0.28);
  background: rgba(245, 158, 11, 0.14);
  color: #fff2c7;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-flag.draft {
  border-color: rgba(244, 114, 182, 0.28);
  background: rgba(236, 72, 153, 0.14);
  color: #ffd4ea;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-flag.sent {
  border-color: rgba(110, 231, 183, 0.34);
  background: rgba(16, 185, 129, 0.18);
  color: #d7ffea;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-flag.priority.high {
  border-color: rgba(248, 113, 113, 0.34);
  background: rgba(239, 68, 68, 0.18);
  color: #ffe0e0;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-flag.priority.medium {
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(234, 179, 8, 0.16);
  color: #fff1bf;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-flag.intent.question,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-flag.intent.meeting,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-flag.intent.offer,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-flag.intent.support,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-flag.intent.complaint {
  border-color: rgba(96, 165, 250, 0.26);
  background: rgba(59, 130, 246, 0.14);
  color: #d9e9ff;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-flag.tone.urgent,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-flag.tone.frustrated {
  border-color: rgba(251, 113, 133, 0.34);
  background: rgba(244, 63, 94, 0.16);
  color: #ffe2ea;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-flag.tone.promotional {
  border-color: rgba(244, 114, 182, 0.32);
  background: rgba(236, 72, 153, 0.15);
  color: #ffd9ee;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-flag.tone.friendly {
  border-color: rgba(45, 212, 191, 0.34);
  background: rgba(20, 184, 166, 0.16);
  color: #d6fff6;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-flag.tone.formal {
  border-color: rgba(148, 163, 184, 0.32);
  background: rgba(51, 65, 85, 0.26);
  color: #e2e8f0;
}

@media (max-width: 1180px) {
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-hero,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-provider-picker,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-form-row {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-form-actions .btn,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-top-actions .btn {
    width: 100%;
  }
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-stage,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-stage,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-main,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-grid,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-stats,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-launch-list,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-actions,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-shell,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-content,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-panel,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-messages,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form {
  display: grid;
  gap: 16px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-approval-toast {
  position: fixed;
  top: 26px;
  right: 26px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 300px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(94, 234, 212, 0.26);
  background:
    radial-gradient(circle at 0% 0%, rgba(94, 234, 212, 0.18), transparent 38%),
    rgba(5, 16, 30, 0.95);
  box-shadow: 0 34px 80px -40px rgba(94, 234, 212, 0.45);
  color: #f8fafc;
  transform: translateY(-10px) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-approval-toast[data-variant="sent"] {
  border-color: rgba(110, 231, 183, 0.28);
  background:
    radial-gradient(circle at 0% 0%, rgba(110, 231, 183, 0.18), transparent 38%),
    rgba(5, 16, 30, 0.95);
  box-shadow: 0 34px 80px -40px rgba(110, 231, 183, 0.42);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-approval-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-approval-copy {
  display: grid;
  gap: 3px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-approval-toast strong {
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-approval-toast span:last-child {
  color: #cfe6f6;
  font-size: 13px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-approval-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #5eead4, #8bdcff);
  color: #05101e;
  box-shadow:
    0 0 0 8px rgba(94, 234, 212, 0.14),
    0 18px 36px -24px rgba(94, 234, 212, 0.55);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-approval-toast[data-variant="sent"] .mailbox-approval-icon {
  background: linear-gradient(135deg, #6ee7b7, #7dd3fc);
  box-shadow:
    0 0 0 8px rgba(110, 231, 183, 0.14),
    0 18px 36px -24px rgba(110, 231, 183, 0.45);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-approval-icon svg {
  width: 18px;
  height: 18px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-stage {
  gap: 20px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-scene {
  position: relative;
  min-height: 340px;
  display: grid;
  align-items: end;
  gap: 14px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-scene-card {
  position: relative;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background:
    radial-gradient(circle at 100% 0%, rgba(94, 234, 212, 0.12), transparent 36%),
    rgba(7, 14, 28, 0.7);
  z-index: 1;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-scene-card small {
  display: block;
  color: #8bdcff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-scene-card strong,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-launch-list article strong {
  display: block;
  margin-top: 8px;
  color: #f8fafc;
  font-size: 18px;
  line-height: 1.3;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-scene-card p,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-launch-list article p {
  margin: 8px 0 0;
  color: #b7cbdd;
  font-size: 14px;
  line-height: 1.65;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-scene-card-secondary {
  width: min(86%, 360px);
  margin-left: auto;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-scene-orbit {
  position: absolute;
  right: 10%;
  top: 12%;
  width: 240px;
  height: 240px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at 50% 50%, rgba(94, 234, 212, 0.18), transparent 44%),
    rgba(7, 14, 28, 0.34);
  animation: mailbox-orbit-spin 18s linear infinite;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-scene-orbit span {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--mail-accent), var(--mail-highlight));
  box-shadow: 0 0 24px rgba(94, 234, 212, 0.32);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-scene-orbit span:nth-child(1) {
  top: 18px;
  left: calc(50% - 9px);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-scene-orbit span:nth-child(2) {
  left: 20px;
  bottom: 44px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-scene-orbit span:nth-child(3) {
  right: 34px;
  bottom: 20px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-launch-panel {
  align-content: start;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-launch-list article {
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(7, 14, 28, 0.5);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-stage {
  grid-template-columns: minmax(300px, 0.84fr) minmax(0, 1.16fr);
  gap: 20px;
  align-items: start;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-sidebar {
  position: sticky;
  top: 20px;
  align-content: start;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-brand h2,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-toolbar h3,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-head h3,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-column h3 {
  margin: 4px 0 0;
  color: #f8fafc;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-brand h2,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-toolbar h3 {
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.04;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-actions .btn {
  width: 100%;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-stats article {
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(7, 14, 28, 0.5);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-stats small {
  display: block;
  color: #8ba8bf;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-stats strong {
  display: block;
  margin-top: 10px;
  color: #f8fafc;
  font-size: 28px;
  line-height: 1;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-folders {
  display: grid;
  gap: 12px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-folders-head,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-column-head,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-meta,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-folders-head span,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-column-head strong {
  color: #f8fafc;
  font-size: 16px;
  font-weight: 800;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-folders-head small,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-column-head span,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-meta small {
  color: #8ba8bf;
  font-size: 12px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-folder-strip-live {
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-folder-strip-live .mailbox-folder-pill {
  justify-content: flex-start;
  min-height: 42px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-toolbar {
  display: grid;
  grid-template-columns: auto minmax(280px, 420px);
  gap: 18px;
  align-items: center;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-search-field input {
  width: 100%;
  min-height: 56px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(7, 14, 28, 0.76);
  color: #f8fafc;
  padding: 0 18px;
  font: inherit;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-search-field input::placeholder {
  color: #7f97ab;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-search-field input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--mail-accent) 45%, rgba(148, 163, 184, 0.16));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mail-accent-soft) 72%, transparent);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-grid {
  grid-template-columns: minmax(360px, 0.86fr) minmax(0, 1.14fr);
  gap: 20px;
  align-items: start;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-column,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-column {
  align-content: start;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-list-live {
  min-height: 640px;
  align-content: start;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-item {
  cursor: pointer;
  border-radius: 24px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-item.is-active {
  border-color: color-mix(in srgb, var(--mail-accent) 42%, rgba(148, 163, 184, 0.18));
  background:
    radial-gradient(circle at 100% 0%, rgba(94, 234, 212, 0.16), transparent 32%),
    linear-gradient(160deg, rgba(8, 17, 32, 0.98), rgba(8, 19, 38, 0.98));
  box-shadow:
    0 32px 72px -42px rgba(8, 15, 28, 0.96),
    0 0 0 1px color-mix(in srgb, var(--mail-accent-soft) 70%, transparent);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-item:focus {
  outline: none;
  transform: translateY(-2px);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-shell {
  min-height: 640px;
  align-content: start;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-empty {
  display: grid;
  place-items: center;
  min-height: 420px;
  padding: 32px;
  border-radius: 28px;
  border: 1px dashed rgba(148, 163, 184, 0.22);
  background: rgba(7, 14, 28, 0.32);
  text-align: center;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-empty strong {
  color: #f8fafc;
  font-size: 22px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-empty p,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-from,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-to {
  margin: 0;
  color: #b7cbdd;
  font-size: 14px;
  line-height: 1.7;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-content {
  align-content: start;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-from {
  margin-top: 4px;
  font-size: 15px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-to {
  font-size: 13px;
  color: #8ba8bf;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-body {
  margin: 0;
  min-height: 320px;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(7, 14, 28, 0.54);
  color: #dcebf8;
  padding: 18px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.72;
  font: inherit;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-attachment-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(7, 14, 28, 0.72);
  color: #d9ebf8;
  font-size: 12px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-panel {
  position: fixed;
  right: 26px;
  bottom: 114px;
  z-index: 50;
  width: min(420px, calc(100vw - 28px));
  max-height: min(76vh, 780px);
  padding: 20px;
  border-radius: 30px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background:
    radial-gradient(circle at 100% 0%, rgba(94, 234, 212, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(4, 11, 22, 0.98), rgba(7, 15, 29, 0.98));
  box-shadow:
    0 44px 120px -48px rgba(8, 15, 28, 1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-panel.is-open {
  display: grid;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-head h3 {
  font-size: 26px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene {
  position: relative;
  height: 92px;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at 18% 22%, rgba(94, 234, 212, 0.18), transparent 22%),
    radial-gradient(circle at 82% 30%, rgba(139, 220, 255, 0.18), transparent 22%),
    rgba(7, 14, 28, 0.56);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene span {
  position: absolute;
  inset: auto;
  width: 110px;
  height: 110px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(94, 234, 212, 0.08);
  filter: blur(2px);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene span:nth-child(1) {
  top: -28px;
  left: 18px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene span:nth-child(2) {
  top: 10px;
  right: 24px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene span:nth-child(3) {
  bottom: -42px;
  left: 42%;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-messages {
  max-height: 320px;
  overflow: auto;
  padding-right: 4px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-message {
  padding: 14px 16px;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(7, 14, 28, 0.54);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-message.user {
  background: rgba(12, 31, 49, 0.74);
  border-color: rgba(94, 234, 212, 0.14);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-message strong {
  display: block;
  color: #f8fafc;
  font-size: 13px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-message p {
  margin: 8px 0 0;
  color: #d6e6f4;
  font-size: 14px;
  line-height: 1.68;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(7, 14, 28, 0.78);
  color: #f8fafc;
  padding: 16px 18px;
  font: inherit;
  line-height: 1.6;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--mail-accent) 46%, rgba(148, 163, 184, 0.18));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mail-accent-soft) 74%, transparent);
}

@media (max-width: 1280px) {
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-stage,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-grid,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-toolbar {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-sidebar {
    position: relative;
    top: auto;
  }
}

@media (max-width: 920px) {
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-stats {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-scene-orbit {
    width: 180px;
    height: 180px;
  }
}

@media (max-width: 760px) {
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-approval-toast,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-panel {
    right: 14px;
    left: 14px;
    width: auto;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-approval-toast {
    min-width: 0;
    top: 14px;
  }

}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-shell {
  position: relative;
  gap: 16px;
  padding: 16px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-app-topbar {
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  border-radius: 28px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-topbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-topbar-mark {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--mail-accent), var(--mail-warm));
  color: #03101d;
  font-size: 20px;
  font-weight: 900;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-topbar-search {
  width: 100%;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-topbar-search input {
  width: 100%;
  min-height: 56px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(10, 20, 36, 0.84);
  color: #f8fafc;
  padding: 0 18px;
  font: inherit;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-topbar-search input::placeholder {
  color: #839bb0;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-topbar-search input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--mail-accent) 46%, rgba(148, 163, 184, 0.14));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mail-accent-soft) 76%, transparent);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-topbar-actions {
  justify-content: flex-end;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-app-frame {
  display: grid;
  grid-template-columns: 286px minmax(380px, 0.82fr) minmax(0, 1fr);
  gap: 0;
  min-height: calc(100vh - 132px);
  border-radius: 34px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background:
    radial-gradient(circle at 0% 0%, rgba(94, 234, 212, 0.08), transparent 22%),
    linear-gradient(180deg, rgba(4, 11, 22, 0.96), rgba(7, 15, 29, 0.98));
  box-shadow: 0 40px 120px -56px rgba(8, 15, 28, 0.96);
  overflow: hidden;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-app-frame > .mailbox-pane {
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 18px;
  min-width: 0;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-app-frame > .mailbox-pane::before {
  display: none;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-app-sidebar,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-app-list {
  border-right: 1px solid rgba(148, 163, 184, 0.12);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-stage {
  gap: 0;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-sidebar {
  position: relative;
  top: auto;
  align-content: start;
  gap: 18px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-brand h2 {
  max-width: none;
  font-size: 30px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-brand p,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-preview-summary p {
  color: #a8bfd2;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-summary {
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(10, 20, 36, 0.66);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-sidebar-actions,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-actions {
  gap: 10px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-stats {
  grid-template-columns: 1fr;
  gap: 10px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-stats article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(10, 20, 36, 0.64);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-stats strong {
  margin-top: 0;
  font-size: 22px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-folder-select-wrap {
  display: grid;
  gap: 8px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-folder-select-wrap span {
  color: #d6e6f4;
  font-size: 12px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-folder-select-wrap select {
  width: 100%;
  min-height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(10, 20, 36, 0.8);
  color: #f8fafc;
  padding: 0 14px;
  font: inherit;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-folder-strip-live {
  gap: 8px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-folder-strip-live .mailbox-folder-pill {
  width: 100%;
  justify-content: flex-start;
  border-radius: 16px;
  min-height: 40px;
  padding: 0 14px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-column,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-column {
  gap: 0;
  min-width: 0;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-list-head,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-head {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-list-live {
  gap: 0;
  min-height: 0;
  overflow: auto;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-table-head {
  display: grid;
  grid-template-columns: 124px minmax(160px, 220px) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 0 12px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-table-head span {
  color: #8aa4bb;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-item {
  display: grid;
  grid-template-columns: 124px minmax(160px, 220px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border: 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 14px 12px;
  transition: background 0.18s ease, border-color 0.18s ease;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-item::before {
  display: none;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-item:hover {
  transform: none;
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(148, 163, 184, 0.14);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-item.is-active,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-item.is-unread {
  box-shadow: none;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-item.is-active {
  background: rgba(94, 234, 212, 0.08);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-head {
  display: grid;
  gap: 8px;
  min-width: 0;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-head small {
  display: block;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: #9eb5c8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-item strong {
  margin: 0;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-item p {
  margin: 0;
  color: #99b1c4;
  font-size: 13px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-flags {
  margin-top: 0;
  gap: 6px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-shell {
  min-height: 0;
  overflow: hidden;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-empty,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-body {
  background: rgba(10, 20, 36, 0.66);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-content {
  gap: 16px;
  min-width: 0;
  overflow: auto;
  max-height: calc(100vh - 220px);
  padding: 22px;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: #030507;
  box-sizing: border-box;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-content h3 {
  margin: 2px 0 0;
  font-size: 28px;
  line-height: 1.08;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-header-card {
  display: grid;
  gap: 12px;
  padding: 0 0 18px;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  background: transparent;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-header-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-header-row span {
  color: #89a6bc;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-header-row strong {
  color: #f8fafc;
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-body {
  margin: 0;
  min-height: 0;
  max-height: none;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: #e5eef7;
  padding: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.72;
  font: inherit;
  overflow: visible;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-body p {
  margin: 0 0 16px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-body p:last-child {
  margin-bottom: 0;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-overlay {
  position: fixed;
  inset: 92px 16px 16px;
  z-index: 20;
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-gutter: stable both-edges;
  min-height: 0;
  padding: 24px 24px calc(220px + env(safe-area-inset-bottom, 0px));
  border-radius: 34px;
  background: rgba(3, 9, 18, 0.68);
  backdrop-filter: blur(18px);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-overlay[hidden] {
  display: none;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-overlay::after {
  content: "";
  display: block;
  min-height: 180px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-surface {
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: 24px 24px 140px;
  min-height: max-content;
  border-radius: 28px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background:
    radial-gradient(circle at 100% 0%, rgba(94, 234, 212, 0.12), transparent 28%),
    rgba(7, 14, 28, 0.94);
  box-shadow: 0 44px 120px -58px rgba(0, 0, 0, 0.92);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-surface-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-surface-head h2 {
  margin: 4px 0 0;
  color: #f8fafc;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  max-width: 12ch;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-surface-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.92fr) minmax(0, 1.08fr);
  gap: 22px;
  align-items: start;
  padding-top: 18px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-surface-grid > * {
  min-width: 0;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-intro,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-form-wrap {
  display: grid;
  gap: 16px;
  min-height: max-content;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-intro p {
  margin: 0;
  color: #b5c9db;
  font-size: 15px;
  line-height: 1.72;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-provider-picker {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-provider-card {
  border-radius: 18px;
  padding: 12px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-form {
  gap: 12px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-help {
  margin: 0;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(10, 20, 36, 0.62);
  color: #c8dced;
  font-size: 13px;
  line-height: 1.6;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-form-actions {
  justify-content: flex-start;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-panel {
  width: 360px;
  max-height: calc(100vh - 170px);
  border-radius: 24px;
  padding: 16px;
  background: rgba(7, 14, 28, 0.96);
  gap: 14px;
  grid-template-rows: auto auto auto auto minmax(180px, 1fr) auto;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-messages {
  min-height: 0;
  max-height: none;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form textarea {
  min-height: 108px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-index {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background:
    radial-gradient(circle at 0% 0%, rgba(94, 234, 212, 0.1), transparent 26%),
    rgba(9, 18, 34, 0.88);
  min-height: 0;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-index-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-index-head h4 {
  margin: 4px 0 0;
  color: #f8fafc;
  font-size: 18px;
  line-height: 1.15;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-route-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(94, 234, 212, 0.18);
  background: rgba(94, 234, 212, 0.1);
  color: #c8fff3;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-index-copy {
  margin: 0;
  color: #9eb5c8;
  font-size: 13px;
  line-height: 1.55;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-composer-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-composer-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(255, 255, 255, 0.03);
  color: #e8f3fb;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-composer-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(94, 234, 212, 0.22);
  background: rgba(94, 234, 212, 0.08);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-composer-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-composer-chip strong {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(94, 234, 212, 0.14);
  color: #baffef;
  font-size: 11px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-composer-empty,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-reference-empty {
  color: #8da4b8;
  font-size: 12px;
  line-height: 1.55;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-reference-list {
  display: grid;
  gap: 10px;
  min-height: 0;
  max-height: 232px;
  overflow: auto;
  padding-right: 4px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-reference-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.025);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-reference-item.is-active {
  border-color: rgba(94, 234, 212, 0.22);
  background: rgba(94, 234, 212, 0.08);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-reference-number {
  min-width: 72px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(7, 14, 28, 0.72);
  color: #f8fafc;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-reference-number:hover {
  transform: translateY(-1px);
  border-color: rgba(94, 234, 212, 0.24);
  background: rgba(16, 34, 52, 0.82);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-reference-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-reference-copy strong {
  color: #f8fafc;
  font-size: 13px;
  line-height: 1.35;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-reference-copy p {
  margin: 0;
  color: #d6e6f4;
  font-size: 13px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-reference-copy small {
  color: #87a0b5;
  font-size: 11px;
  line-height: 1.45;
}

@media (max-width: 1360px) {
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-app-topbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-app-frame {
    grid-template-columns: 260px minmax(320px, 0.84fr) minmax(0, 1fr);
  }
}

@media (max-width: 1180px) {
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-app-frame {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-app-sidebar,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-app-list {
    border-right: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-overlay {
    inset: 14px;
    border-radius: 24px;
    height: calc(100dvh - 28px);
    max-height: calc(100dvh - 28px);
    padding: 18px 18px calc(240px + env(safe-area-inset-bottom, 0px));
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-surface-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-content {
    max-height: none;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-route-status {
    justify-self: start;
  }
}

@media (max-width: 820px) {
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-provider-picker {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-surface {
    padding: 18px 18px 176px;
    border-radius: 22px;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-overlay::after {
    min-height: 220px;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-connect-surface-head {
    flex-direction: column;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-table-head,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-header-row {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-item {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-form-row.mailbox-form-row-wide,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-domain-checklist,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-preview,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-hosting-quickstart {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-reference-item {
    grid-template-columns: 1fr;
  }
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-shell[data-view="detail"] .mailbox-app-list {
  display: none;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-shell[data-view="detail"] .mailbox-app-reader {
  grid-column: 2 / -1;
  padding: 22px 26px 28px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-shell[data-view="detail"] .mailbox-reader-shell {
  overflow: auto;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-sidebar {
  gap: 14px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-brand p,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-preview-summary p,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-stats article small,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-folder-select-wrap span {
  color: #90a8bb;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-summary,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-stats article,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-folder-select-wrap select,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-folder-strip-live .mailbox-folder-pill {
  background: rgba(9, 16, 27, 0.78);
  border-color: rgba(148, 163, 184, 0.1);
  box-shadow: none;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-folder-strip-live {
  gap: 6px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-folder-strip-live .mailbox-folder-pill {
  min-height: 38px;
  border-radius: 14px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-sidebar-actions .btn {
  min-height: 44px;
  border-radius: 14px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-table-head {
  padding: 0 18px 12px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-item {
  grid-template-columns: 106px minmax(150px, 210px) minmax(0, 1fr);
  padding: 16px 18px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-item.is-active {
  background: rgba(76, 125, 255, 0.11);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-status {
  min-height: 32px;
  padding: 6px 11px;
  background: rgba(12, 26, 47, 0.82);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-head small {
  color: #bed0de;
  font-size: 12px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-item strong {
  font-size: 16px;
  color: #f7fbff;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-item p {
  color: #89a2b7;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 0;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-heading,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-head-actions,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-message-top,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-sender-line {
  display: flex;
  align-items: center;
  gap: 14px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-heading {
  min-width: 0;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-head-actions {
  justify-content: flex-end;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-head-actions small {
  color: #7f95a8;
  font-size: 12px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-back {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 14px;
  background: rgba(10, 20, 36, 0.78);
  color: #f8fafc;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-back:hover {
  transform: translateY(-1px);
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(16, 30, 49, 0.92);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-shell {
  min-height: calc(100vh - 236px);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-empty {
  min-height: calc(100vh - 260px);
  border-style: solid;
  border-color: rgba(148, 163, 184, 0.1);
  background:
    radial-gradient(circle at 20% 0%, rgba(76, 125, 255, 0.08), transparent 18%),
    rgba(5, 10, 17, 0.94);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-content {
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-message {
  display: grid;
  gap: 18px;
  max-width: 1160px;
  margin: 0 auto;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-message-top {
  align-items: flex-start;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-avatar {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: linear-gradient(135deg, rgba(93, 234, 212, 0.95), rgba(126, 214, 255, 0.95));
  color: #06111d;
  font-size: 22px;
  font-weight: 900;
  box-shadow: 0 22px 50px -28px rgba(93, 234, 212, 0.5);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-message-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-message-copy h3 {
  margin: 0;
  font-size: clamp(34px, 4vw, 50px);
  line-height: 0.98;
  letter-spacing: -0.05em;
  color: #f8fafc;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-sender-line {
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-sender-line strong {
  color: #f8fafc;
  font-size: 16px;
  line-height: 1.5;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-header-card {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding: 20px 22px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 22px;
  background: rgba(9, 15, 25, 0.8);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-header-row {
  grid-template-columns: 1fr;
  gap: 6px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-header-row span {
  color: #6f8599;
  letter-spacing: 0.18em;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-header-row strong {
  color: #f5f8fc;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-attachments {
  gap: 8px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-attachment-chip {
  min-height: 32px;
  padding: 5px 12px;
  background: rgba(11, 24, 41, 0.88);
  border-color: rgba(148, 163, 184, 0.12);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-html-stage,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-body {
  border-radius: 28px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(236, 242, 248, 0.98));
  box-shadow: 0 40px 80px -60px rgba(148, 163, 184, 0.45);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-html-stage {
  overflow: hidden;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-frame {
  display: block;
  width: 100%;
  min-height: 860px;
  border: 0;
  background: transparent;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-body {
  padding: 28px 30px;
  color: #172231;
  font-size: 15px;
  line-height: 1.75;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-body p {
  color: inherit;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-shell[data-view="list"] .mailbox-reader-back {
  opacity: 0.44;
  pointer-events: none;
}

@media (max-width: 1360px) {
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-message-copy h3 {
    font-size: clamp(28px, 4vw, 42px);
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-header-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-shell[data-view="detail"] .mailbox-app-reader {
    grid-column: auto;
    padding: 20px 18px 24px;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-shell,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-empty {
    min-height: 0;
  }
}

@media (max-width: 820px) {
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-head,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-heading,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-head-actions,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-message-top {
    flex-direction: column;
    align-items: flex-start;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-message-copy h3 {
    font-size: 30px;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-header-card {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-body {
    padding: 20px;
  }
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-shell[data-view="list"] .mailbox-app-list {
  display: grid;
  grid-column: 2 / -1;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-shell[data-view="list"] .mailbox-app-reader {
  display: none;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-shell[data-view="detail"] .mailbox-app-list {
  display: none;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-shell[data-view="detail"] .mailbox-app-reader {
  display: grid;
  grid-column: 2 / -1;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-head {
  padding-bottom: 18px;
  margin-bottom: 18px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-heading {
  gap: 12px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-back {
  width: auto;
  min-width: 0;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-item {
  align-items: center;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-copy {
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-stack-preview {
  display: grid;
  gap: 10px;
  margin-top: 2px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-stack-card {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(8, 15, 28, 0.58);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-stack-card.outgoing {
  border-color: rgba(110, 231, 183, 0.22);
  background:
    radial-gradient(circle at 0% 0%, rgba(110, 231, 183, 0.12), transparent 36%),
    rgba(8, 15, 28, 0.64);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-stack-card.incoming {
  border-color: rgba(125, 211, 252, 0.18);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-stack-card small {
  color: #9ec2d9;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-stack-card p {
  margin: 0;
  color: #e6f2fb;
  font-size: 13px;
  line-height: 1.6;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-stack-divider,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-thread-separator {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-stack-divider::before,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-thread-separator::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.22), transparent);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-stack-divider span,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-thread-separator span {
  position: relative;
  z-index: 1;
  padding: 0 10px;
  color: #8ba8be;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(5, 10, 17, 0.96);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-flag {
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.08em;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-message {
  gap: 20px;
  max-width: 1180px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-message-copy h3 {
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.02;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-sender-line {
  justify-content: space-between;
  gap: 12px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-sender-line strong {
  font-size: 15px;
  color: #dce7f2;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-sender-line .mailbox-thread-status {
  min-height: 28px;
  padding: 4px 10px;
  background: rgba(13, 25, 42, 0.86);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-header-card {
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 22px;
  background: rgba(9, 15, 25, 0.72);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-header-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-header-copy,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-header-date,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-header-meta {
  display: grid;
  gap: 6px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-header-copy span,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-header-date span,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-header-meta span {
  color: #74889c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-header-copy strong,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-header-date strong,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-header-meta strong {
  color: #f7fbff;
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-header-copy small {
  color: #aebfd0;
  font-size: 13px;
  line-height: 1.55;
  word-break: break-word;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-header-date {
  min-width: 220px;
  justify-items: end;
  text-align: right;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-header-meta {
  padding-top: 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-thread-stack {
  display: grid;
  gap: 14px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-thread-stack[hidden] {
  display: none;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-thread-card {
  display: grid;
  gap: 14px;
  padding: 22px 24px;
  border-radius: 24px;
  border: 1px solid rgba(110, 231, 183, 0.22);
  background:
    radial-gradient(circle at 0% 0%, rgba(110, 231, 183, 0.14), transparent 34%),
    rgba(9, 15, 25, 0.76);
  box-shadow: 0 28px 56px -42px rgba(16, 185, 129, 0.36);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-thread-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-thread-meta span {
  color: #9ff4d0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-thread-meta strong {
  color: #dff8ef;
  font-size: 12px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-thread-body {
  color: #e9f4fb;
  font-size: 14px;
  line-height: 1.72;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-thread-body p {
  margin: 0 0 12px;
  color: inherit;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-thread-body p:last-child {
  margin-bottom: 0;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-html-stage {
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(241, 245, 249, 0.98), rgba(233, 239, 246, 0.98));
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-frame {
  min-height: 920px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-body {
  background: rgba(248, 250, 252, 0.98);
  color: #162334;
  padding: 28px 30px;
}

@media (max-width: 1180px) {
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-shell[data-view="list"] .mailbox-app-list,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-shell[data-view="detail"] .mailbox-app-reader {
    grid-column: auto;
  }
}

@media (max-width: 820px) {
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-header-lead {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-header-date {
    min-width: 0;
    justify-items: start;
    text-align: left;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-reader-sender-line {
    justify-content: flex-start;
  }
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-topbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-welcome-card {
  display: grid;
  gap: 16px;
  padding: 20px;
  border-radius: 30px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background:
    radial-gradient(circle at 0% 0%, rgba(94, 234, 212, 0.14), transparent 28%),
    radial-gradient(circle at 100% 20%, rgba(252, 211, 77, 0.1), transparent 24%),
    linear-gradient(180deg, rgba(9, 18, 31, 0.98), rgba(6, 13, 24, 0.98));
  box-shadow: 0 30px 80px -56px rgba(0, 0, 0, 0.96);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-welcome-copy {
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-welcome-copy h2 {
  margin: 0;
  max-width: none;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.02;
  letter-spacing: -0.05em;
  color: #f8fbff;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-welcome-copy p {
  margin: 0;
  color: #adc2d4;
  line-height: 1.72;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-welcome-meta {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(8, 15, 26, 0.74);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-welcome-meta strong {
  color: #f8fbff;
  font-size: 18px;
  line-height: 1.4;
  word-break: break-word;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-actions .btn,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-live-actions .gradient-button {
  width: 100%;
}

body[data-page="app"][data-app-mode="mailbox"] .gradient-button {
  position: relative;
  padding: 16px 32px;
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  background: transparent;
  border: 0;
  cursor: pointer;
  border-radius: 50px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body[data-page="app"][data-app-mode="mailbox"] .gradient-button:hover {
  transform: scale(1.03);
  box-shadow: 0 22px 48px -28px rgba(120, 190, 255, 0.48);
}

body[data-page="app"][data-app-mode="mailbox"] .gradient-button::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3, #ff6b6b);
  z-index: -2;
  filter: blur(10px);
  transform: rotate(0deg);
  transition: transform 1.5s ease-in-out;
}

body[data-page="app"][data-app-mode="mailbox"] .gradient-button:hover::before {
  transform: rotate(180deg);
}

body[data-page="app"][data-app-mode="mailbox"] .gradient-button::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: rgba(2, 6, 12, 0.98);
  border-radius: 47px;
  z-index: -1;
}

body[data-page="app"][data-app-mode="mailbox"] .gradient-button:active {
  transform: scale(0.99);
}

body[data-page="app"][data-app-mode="mailbox"] .gradient-button:disabled {
  cursor: not-allowed;
  opacity: 0.72;
  transform: none;
  box-shadow: none;
}

body[data-page="app"][data-app-mode="mailbox"] .gradient-text {
  color: transparent;
  background: conic-gradient(from 0deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3, #ff6b6b);
  -webkit-background-clip: text;
  background-clip: text;
  filter: hue-rotate(0deg);
}

body[data-page="app"][data-app-mode="mailbox"] .gradient-button:hover .gradient-text {
  animation: hue-rotating 2s linear infinite;
}

@keyframes hue-rotating {
  to {
    filter: hue-rotate(360deg);
  }
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-launch,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-submit-button {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-panel {
  display: none;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  width: min(432px, calc(100vw - 28px));
  height: min(78vh, 820px);
  max-height: min(78vh, 820px);
  padding: 18px;
  border-radius: 32px;
  background:
    radial-gradient(circle at 100% 0%, rgba(86, 210, 255, 0.16), transparent 32%),
    linear-gradient(180deg, rgba(4, 11, 22, 0.98), rgba(7, 15, 29, 0.99));
  overflow: hidden;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scroll {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  overflow: auto;
  padding-right: 4px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-head {
  align-items: flex-start;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene {
  display: flex;
  align-items: flex-end;
  min-height: 132px;
  padding: 16px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  max-width: 272px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene-copy small {
  color: #8fc5f8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene-copy strong {
  color: #f8fbff;
  font-size: 19px;
  line-height: 1.35;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene-copy p {
  margin: 0;
  color: #a8bfd2;
  font-size: 13px;
  line-height: 1.7;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-chip {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(10, 20, 36, 0.72);
  color: #dfeaf4;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(94, 234, 212, 0.26);
  background: rgba(12, 29, 47, 0.92);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-index {
  gap: 10px;
  padding: 16px;
  border-radius: 22px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-index-head {
  display: grid;
  gap: 10px;
  justify-items: start;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-index-head h4 {
  font-size: 20px;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-route-status {
  min-height: 32px;
  padding: 0 14px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-index-copy {
  font-size: 12px;
  line-height: 1.6;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-composer-list {
  max-height: 92px;
  overflow: auto;
  padding-right: 2px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-reference-list {
  max-height: 184px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-reference-item {
  padding: 11px 12px;
  border-radius: 16px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-message {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 20px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-message-body {
  display: grid;
  gap: 10px;
  min-width: 0;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-message-body p {
  margin: 0;
  color: #d6e6f4;
  font-size: 14px;
  line-height: 1.68;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form {
  display: grid;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form-actions {
  display: flex;
  justify-content: flex-start;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form textarea {
  min-height: 112px;
  max-height: 180px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-submit-button {
  min-width: 160px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-dock {
  min-width: 0;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 18px;
  border-color: rgba(94, 234, 212, 0.18);
  background:
    radial-gradient(circle at top, rgba(41, 194, 255, 0.12), transparent 56%),
    rgba(8, 18, 34, 0.9);
  box-shadow: none;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-toggle,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-stop {
  min-height: 48px;
  border-radius: 16px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-status {
  font-size: 12px;
  line-height: 1.5;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-skeleton {
  display: grid;
  grid-template-columns: 124px minmax(160px, 220px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-skeleton-stack {
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-skeleton-pill,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-skeleton-line {
  position: relative;
  overflow: hidden;
  background: rgba(148, 163, 184, 0.14);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-skeleton-pill::after,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-skeleton-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.8s linear infinite;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-skeleton-pill {
  height: 32px;
  border-radius: 999px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-skeleton-line {
  height: 12px;
  border-radius: 999px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-skeleton-line.mini {
  width: 72px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-skeleton-line.short {
  width: 44%;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-skeleton-line.medium {
  width: 62%;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-skeleton-line.long {
  width: 84%;
}

@media (max-width: 1360px) {
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-topbar-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 820px) {
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-welcome-card {
    padding: 18px;
    border-radius: 24px;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form-actions {
    justify-content: stretch;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-submit-button {
    width: 100%;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-thread-skeleton {
    grid-template-columns: 1fr;
  }
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-panel {
  width: min(448px, calc(100vw - 28px));
  height: min(80vh, 860px);
  max-height: min(80vh, 860px);
  padding: 20px;
  border-radius: 34px;
  border: 1px solid rgba(146, 184, 255, 0.12);
  background:
    radial-gradient(circle at 18% 10%, rgba(86, 210, 255, 0.12), transparent 28%),
    radial-gradient(circle at 88% 14%, rgba(94, 234, 212, 0.12), transparent 26%),
    linear-gradient(180deg, rgba(4, 10, 21, 0.985), rgba(6, 14, 28, 0.992));
  box-shadow:
    0 48px 120px -58px rgba(1, 7, 18, 1),
    0 18px 48px rgba(15, 23, 42, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(26px);
  isolation: isolate;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-panel::before,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0;
  border-radius: inherit;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-panel::before {
  inset: 1px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 18%),
    radial-gradient(circle at 84% 18%, rgba(117, 223, 255, 0.12), transparent 22%);
  opacity: 0.9;
  z-index: -1;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-panel::after {
  inset: auto -18% -36% auto;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(86, 210, 255, 0.14), transparent 68%);
  filter: blur(28px);
  opacity: 0.72;
  animation: mailboxAiBloom 10s ease-in-out infinite;
  z-index: -1;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-panel.is-open {
  animation: mailboxAiPanelEnter 520ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-head {
  position: relative;
  z-index: 2;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-head .mailbox-kicker {
  color: #9fd8ff;
  letter-spacing: 0.24em;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-head h3 {
  font-size: clamp(38px, 4.4vw, 52px);
  line-height: 0.94;
  letter-spacing: -0.055em;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-head .btn {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 15px;
  background: rgba(18, 28, 47, 0.84);
  border-color: rgba(148, 163, 184, 0.14);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scroll {
  position: relative;
  z-index: 1;
  gap: 16px;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(98, 210, 255, 0.78) rgba(8, 15, 27, 0.18);
  mask-image: linear-gradient(180deg, transparent 0, #000 24px, #000 calc(100% - 28px), transparent 100%);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scroll::-webkit-scrollbar {
  width: 8px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scroll::-webkit-scrollbar-track {
  background: rgba(8, 15, 27, 0.22);
  border-radius: 999px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(89, 226, 255, 0.94), rgba(61, 148, 255, 0.86));
  box-shadow: 0 0 20px rgba(61, 148, 255, 0.34);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene {
  position: relative;
  min-height: 176px;
  padding: 22px;
  align-items: flex-start;
  border-radius: 28px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at 18% 18%, rgba(93, 234, 212, 0.16), transparent 20%),
    linear-gradient(180deg, rgba(9, 18, 35, 0.9), rgba(7, 14, 28, 0.82));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 22px 56px -42px rgba(20, 36, 58, 0.86);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, transparent 16%, rgba(128, 232, 255, 0.18) 28%, transparent 40%);
  opacity: 0.55;
  transform: translateX(-60%);
  animation: mailboxAiSweep 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  pointer-events: none;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene::after {
  content: "";
  position: absolute;
  inset: auto 18px 18px 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(157, 241, 255, 0.54), transparent);
  opacity: 0.72;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene span {
  filter: blur(0);
  opacity: 0.9;
  mix-blend-mode: screen;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene span:nth-child(1) {
  animation: mailboxAiOrbFloatA 8s ease-in-out infinite;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene span:nth-child(2) {
  animation: mailboxAiOrbFloatB 10s ease-in-out infinite;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene span:nth-child(3) {
  animation: mailboxAiOrbFloatC 12s ease-in-out infinite;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene-copy {
  gap: 10px;
  max-width: 282px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene-copy strong {
  font-size: 29px;
  line-height: 1.02;
  letter-spacing: -0.05em;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene-copy p {
  max-width: 28ch;
  color: #a8c4d8;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-chip {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 16px;
  background: rgba(11, 18, 34, 0.84);
  border-color: rgba(148, 163, 184, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(86, 210, 255, 0.28);
  background: linear-gradient(180deg, rgba(14, 27, 47, 0.96), rgba(10, 18, 34, 0.92));
  box-shadow: 0 16px 32px -24px rgba(56, 189, 248, 0.38);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-index {
  position: relative;
  overflow: hidden;
  gap: 12px;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at 100% 0%, rgba(94, 234, 212, 0.1), transparent 28%),
    rgba(9, 16, 31, 0.84);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-index::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 30%);
  pointer-events: none;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-index-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-route-status {
  min-height: 34px;
  padding: 0 14px;
  background:
    linear-gradient(180deg, rgba(17, 45, 58, 0.9), rgba(10, 28, 40, 0.86));
  border-color: rgba(94, 234, 212, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 28px -24px rgba(94, 234, 212, 0.54);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-composer-list,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-reference-list,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-messages {
  scrollbar-width: thin;
  scrollbar-color: rgba(114, 225, 255, 0.54) transparent;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-composer-chip,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-reference-item {
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-reference-item:hover {
  transform: translateY(-1px);
  border-color: rgba(86, 210, 255, 0.2);
  background: rgba(15, 28, 48, 0.78);
  box-shadow: 0 18px 34px -28px rgba(56, 189, 248, 0.34);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-reference-copy p {
  color: #c4d8e7;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-messages {
  display: grid;
  gap: 10px;
  align-content: start;
  padding-right: 2px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-message {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(9, 17, 31, 0.92), rgba(8, 14, 27, 0.88));
  border-color: rgba(148, 163, 184, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 24px 48px -40px rgba(2, 8, 18, 0.96);
  animation: mailboxAiMessageReveal 420ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
  animation-delay: calc(var(--mailbox-ai-order, 0) * 36ms);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-message::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(86, 210, 255, 0.06), transparent 34%);
  pointer-events: none;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-message.user {
  background:
    linear-gradient(180deg, rgba(10, 24, 44, 0.94), rgba(8, 19, 34, 0.88));
  border-color: rgba(86, 210, 255, 0.16);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form {
  position: relative;
  z-index: 2;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
  background: linear-gradient(180deg, rgba(5, 11, 20, 0), rgba(5, 11, 20, 0.58) 22%, rgba(5, 11, 20, 0.92));
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form textarea {
  min-height: 126px;
  max-height: 186px;
  padding: 20px 20px 18px;
  border-radius: 26px;
  border: 1px solid rgba(94, 234, 212, 0.2);
  background:
    radial-gradient(circle at 0% 0%, rgba(94, 234, 212, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(8, 14, 27, 0.94), rgba(7, 12, 22, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 34px -26px rgba(56, 189, 248, 0.22);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form textarea::placeholder {
  color: #98b5ca;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form textarea:focus {
  border-color: rgba(86, 210, 255, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 4px rgba(86, 210, 255, 0.12),
    0 20px 42px -30px rgba(86, 210, 255, 0.34);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form-actions {
  justify-content: flex-start;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-submit-button {
  min-width: 176px;
  min-height: 58px;
  box-shadow: 0 24px 44px -28px rgba(86, 210, 255, 0.38);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-dock,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-dock {
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background:
    linear-gradient(180deg, rgba(9, 17, 31, 0.88), rgba(7, 13, 24, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 32px -28px rgba(2, 8, 18, 0.84);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-main,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-actions {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-toggle,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-trigger {
  min-height: 56px;
  border-radius: 18px;
  border-color: rgba(86, 210, 255, 0.16);
  background: linear-gradient(135deg, rgba(11, 23, 45, 0.96), rgba(8, 29, 46, 0.98));
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-stop,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-stop {
  min-width: 110px;
  min-height: 56px;
  border-radius: 18px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-trigger:hover:not(:disabled),
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-toggle:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 18px 32px -28px rgba(86, 210, 255, 0.36);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-status,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-status {
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 11px;
  letter-spacing: 0.12em;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-trigger-label,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-label {
  font-size: 11px;
  letter-spacing: 0.16em;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-stop-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

@keyframes mailboxAiPanelEnter {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mailboxAiBloom {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.56;
  }

  50% {
    transform: translate3d(-12px, -10px, 0) scale(1.08);
    opacity: 0.84;
  }
}

@keyframes mailboxAiSweep {
  0% {
    transform: translateX(-68%);
    opacity: 0;
  }

  15% {
    opacity: 0.55;
  }

  55% {
    opacity: 0.38;
  }

  100% {
    transform: translateX(78%);
    opacity: 0;
  }
}

@keyframes mailboxAiOrbFloatA {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(10px, -8px, 0) scale(1.08);
  }
}

@keyframes mailboxAiOrbFloatB {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(-8px, 10px, 0) scale(1.06);
  }
}

@keyframes mailboxAiOrbFloatC {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(6px, -12px, 0) scale(1.1);
  }
}

@keyframes mailboxAiMessageReveal {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 760px) {
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-panel {
    width: auto;
    height: min(82vh, 860px);
    padding: 16px;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-head h3 {
    font-size: 34px;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene {
    min-height: 158px;
    padding: 18px;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-quick-actions {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-index-head,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-main,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-actions {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-stop,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-stop,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-submit-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-panel,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-panel::after,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene::before,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene span,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-message {
    animation: none !important;
  }
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-panel {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 12px;
  width: min(432px, calc(100vw - 28px));
  height: min(78vh, 812px);
  max-height: min(78vh, 812px);
  padding: 18px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-head {
  padding-bottom: 8px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-head h3 {
  font-size: clamp(30px, 4vw, 40px);
  line-height: 0.96;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-top {
  display: grid;
  gap: 10px;
  align-content: start;
  max-height: 198px;
  overflow: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(98, 210, 255, 0.56) transparent;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-top::-webkit-scrollbar,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-messages::-webkit-scrollbar {
  width: 7px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-top::-webkit-scrollbar-thumb,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-messages::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(98, 210, 255, 0.88), rgba(56, 132, 255, 0.84));
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-top::-webkit-scrollbar-track,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-messages::-webkit-scrollbar-track {
  background: rgba(8, 15, 27, 0.16);
  border-radius: 999px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene {
  min-height: 82px;
  padding: 14px 18px;
  border-radius: 20px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene-copy {
  max-width: 200px;
  gap: 4px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene-copy strong {
  font-size: 17px;
  line-height: 1.04;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene-copy p {
  font-size: 12px;
  line-height: 1.5;
  max-width: 24ch;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-quick-actions {
  gap: 8px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-chip {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 14px;
  font-size: 11px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-index {
  gap: 8px;
  padding: 10px 12px;
  border-radius: 16px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-index-head {
  grid-template-columns: 1fr;
  align-items: center;
  gap: 0;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-index .mailbox-kicker {
  margin: 0;
  color: #8fbddd;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-route-status {
  display: none;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-composer-list {
  max-height: 42px;
  flex-wrap: nowrap;
  overflow: auto;
  padding-bottom: 2px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-composer-chip {
  flex: 0 0 auto;
  min-height: 34px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-reference-list {
  max-height: 78px;
  gap: 6px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-reference-item {
  padding: 9px 10px;
  border-radius: 13px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-reference-number {
  min-width: 62px;
  min-height: 32px;
  font-size: 11px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-reference-copy strong {
  font-size: 12px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-reference-copy p {
  font-size: 12px;
  -webkit-line-clamp: 1;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-reference-copy small {
  font-size: 10px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-messages {
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
  gap: 8px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-message {
  padding: 12px 13px;
  border-radius: 18px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-message strong {
  font-size: 12px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-message-body {
  gap: 8px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-message-body p {
  font-size: 13px;
  line-height: 1.56;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form {
  gap: 10px;
  padding-top: 12px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form textarea {
  min-height: 78px;
  max-height: 118px;
  padding: 16px 18px 14px;
  border-radius: 22px;
  font-size: 14px;
  line-height: 1.5;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-submit-button {
  min-width: 148px;
  min-height: 52px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-dock,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-dock {
  padding: 10px 12px;
  border-radius: 18px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-toggle,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-trigger,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-stop,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-stop {
  min-height: 48px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-status,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-status {
  min-height: 32px;
  font-size: 10px;
}

@media (max-width: 760px) {
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-panel {
    width: auto;
    height: min(82vh, 812px);
    padding: 14px;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-top {
    max-height: 188px;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-head h3 {
    font-size: 32px;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-quick-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-chip {
    min-height: 36px;
    padding: 0 8px;
    font-size: 10px;
  }
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-top {
  max-height: 172px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-messages {
  display: block;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 12px 6px 0;
  border-top: 1px solid rgba(148, 163, 184, 0.08);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: auto;
  scrollbar-color: rgba(98, 210, 255, 0.92) rgba(8, 15, 27, 0.24);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-messages::-webkit-scrollbar {
  width: 10px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-messages::-webkit-scrollbar-track {
  background: rgba(8, 15, 27, 0.22);
  border-radius: 999px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-messages::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(116, 238, 255, 0.98), rgba(59, 130, 246, 0.92));
  border: 2px solid rgba(8, 15, 27, 0.18);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.34);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form {
  gap: 12px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-composer-shell.container-ia-chat {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  width: 100%;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-input-shell {
  position: relative;
  min-height: 84px;
  padding: 16px 18px;
  border-radius: 30px;
  border: 1px solid rgba(99, 200, 255, 0.18);
  background:
    radial-gradient(circle at 0% 0%, rgba(86, 210, 255, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(8, 14, 27, 0.98), rgba(7, 12, 22, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 34px -26px rgba(56, 189, 248, 0.22);
  overflow: hidden;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-input-shell::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 28%),
    radial-gradient(circle at 92% 16%, rgba(94, 234, 212, 0.08), transparent 22%);
  pointer-events: none;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-input-shell textarea {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 48px;
  max-height: 118px;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  resize: none;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form-actions {
  align-self: stretch;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-submit-button {
  min-width: 150px;
  min-height: 56px;
  border-radius: 999px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-audio-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  width: 100%;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-dock.is-mailbox-speaker,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-dock.is-mailbox-voice {
  align-self: stretch;
  min-width: 0;
  height: 100%;
  padding: 10px 12px;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background:
    linear-gradient(180deg, rgba(9, 17, 31, 0.9), rgba(7, 13, 24, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 32px -28px rgba(2, 8, 18, 0.84);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-dock.is-mailbox-speaker .finora-tts-main,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-dock.is-mailbox-voice .finora-voice-actions {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-dock.is-mailbox-speaker .finora-tts-bars {
  display: none;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-speaker {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  color: #dffcff;
  flex: 0 0 auto;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-speaker svg {
  width: 100%;
  height: 100%;
  display: block;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-toggle,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-trigger {
  min-height: 54px;
  border-radius: 18px;
  border-color: rgba(86, 210, 255, 0.18);
  background: linear-gradient(135deg, rgba(11, 23, 45, 0.96), rgba(8, 29, 46, 0.98));
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-toggle {
  justify-content: flex-start;
  gap: 10px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-stop,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-stop {
  min-width: 92px;
  min-height: 54px;
  border-radius: 18px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-label,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-trigger-label {
  font-size: 11px;
  letter-spacing: 0.16em;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-pill {
  min-width: 40px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-status,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-status {
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 14px;
  font-size: 10px;
  letter-spacing: 0.12em;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-toggle.is-playing .finora-tts-speaker,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-toggle.is-loading .finora-tts-speaker {
  animation: mailboxSpeakerPulse 0.9s ease-in-out infinite;
}

@keyframes mailboxSpeakerPulse {
  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(116, 238, 255, 0));
  }

  50% {
    transform: scale(1.12);
    filter: drop-shadow(0 0 10px rgba(116, 238, 255, 0.52));
  }
}

@media (max-width: 760px) {
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-audio-row {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-composer-shell.container-ia-chat {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-submit-button {
    width: 100%;
  }
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-panel {
  width: min(446px, calc(100vw - 28px));
  height: min(80vh, 836px);
  max-height: min(80vh, 836px);
  gap: 14px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-head {
  padding-bottom: 10px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-head h3 {
  font-size: clamp(34px, 4.2vw, 44px);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-top {
  max-height: 184px;
  gap: 12px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene {
  min-height: 94px;
  padding: 16px 18px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene-copy {
  max-width: 220px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene-copy small {
  font-size: 9px;
  letter-spacing: 0.2em;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene-copy strong {
  font-size: 18px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-quick-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-chip {
  min-height: 40px;
  padding: 0 10px;
  font-size: 11px;
  line-height: 1.2;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-index {
  padding: 11px 12px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-reference-list {
  max-height: 82px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-messages {
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(8, 14, 26, 0.94), rgba(6, 12, 22, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 24px 44px -38px rgba(2, 8, 18, 0.9);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-message {
  border-radius: 20px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form {
  gap: 12px;
  padding-top: 10px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-composer-shell.container-ia-chat {
  grid-template-columns: minmax(0, 1fr) 154px;
  gap: 12px;
  align-items: stretch;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-input-shell {
  min-height: 92px;
  padding: 18px 18px 16px;
  border-radius: 28px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-input-shell textarea {
  min-height: 54px;
  max-height: 112px;
  font-size: 15px;
  line-height: 1.5;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-submit-button {
  width: 100%;
  min-width: 0;
  min-height: 60px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-audio-row {
  grid-template-columns: 1fr;
  gap: 10px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-dock.is-mailbox-speaker,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-dock.is-mailbox-voice {
  padding: 12px;
  border-radius: 22px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-dock.is-mailbox-speaker .finora-tts-main,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-dock.is-mailbox-voice .finora-voice-actions {
  grid-template-columns: minmax(0, 1fr) 104px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-toggle,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-trigger {
  min-height: 56px;
  padding: 0 16px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-stop,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-stop {
  min-width: 104px;
  min-height: 56px;
  padding: 0 12px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-label,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-trigger-label,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-stop-label {
  font-size: 11px;
  letter-spacing: 0.12em;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-status,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-status {
  min-height: 36px;
  justify-content: flex-start;
  text-align: left;
  padding-inline: 12px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-status {
  justify-content: center;
  text-align: center;
}

@media (max-width: 760px) {
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-panel {
    width: auto;
    height: min(82vh, 836px);
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-composer-shell.container-ia-chat {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-quick-actions {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-dock.is-mailbox-speaker .finora-tts-main,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-dock.is-mailbox-voice .finora-voice-actions {
    grid-template-columns: 1fr;
  }
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-panel {
  gap: 10px;
  width: min(440px, calc(100vw - 28px));
  height: min(79vh, 820px);
  max-height: min(79vh, 820px);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-head {
  padding-bottom: 6px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-head h3 {
  font-size: clamp(30px, 3.5vw, 38px);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-top {
  max-height: 150px;
  gap: 8px;
  padding-right: 2px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene {
  min-height: 74px;
  padding: 12px 16px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-scene-copy strong {
  font-size: 16px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-quick-actions {
  gap: 7px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-chip {
  min-height: 36px;
  padding: 0 10px;
  font-size: 10px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-index {
  gap: 7px;
  padding: 9px 11px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-composer-list {
  max-height: 38px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-reference-list {
  max-height: 68px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-messages {
  padding: 14px 10px 10px 0;
  gap: 10px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-message {
  padding: 13px 14px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-message strong {
  font-size: 12px;
  letter-spacing: 0.02em;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-message-body p {
  font-size: 13px;
  line-height: 1.58;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form {
  gap: 8px;
  padding-top: 8px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-composer-shell.container-ia-chat {
  grid-template-columns: minmax(0, 1fr) 142px;
  gap: 10px;
  align-items: center;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-input-shell {
  min-height: 72px;
  padding: 14px 16px;
  border-radius: 24px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-input-shell textarea {
  min-height: 34px;
  max-height: 88px;
  font-size: 14px;
  line-height: 1.45;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-submit-button {
  min-width: 142px;
  min-height: 50px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-audio-row {
  gap: 8px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-dock.is-mailbox-speaker,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-dock.is-mailbox-voice {
  padding: 10px 11px;
  border-radius: 18px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-dock.is-mailbox-speaker .finora-tts-main,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-dock.is-mailbox-voice .finora-voice-actions {
  grid-template-columns: minmax(0, 1fr) 96px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-toggle,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-trigger,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-stop,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-stop {
  min-height: 46px;
}

@media (max-width: 760px) {
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-panel {
    height: min(84vh, 820px);
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-top {
    max-height: 170px;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-composer-shell.container-ia-chat {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-submit-button {
    width: 100%;
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-tts-dock.is-mailbox-speaker .finora-tts-main,
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-form .finora-voice-dock.is-mailbox-voice .finora-voice-actions {
    grid-template-columns: 1fr;
  }
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-message-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-message-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(116, 170, 255, 0.18);
  background: linear-gradient(180deg, rgba(10, 18, 34, 0.96), rgba(8, 14, 28, 0.9));
  color: rgba(223, 235, 255, 0.9);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    color 0.16s ease;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-message-action:hover {
  transform: translateY(-1px);
  border-color: rgba(116, 170, 255, 0.34);
  box-shadow: 0 18px 30px -24px rgba(72, 132, 255, 0.48);
  color: #ffffff;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-ai-message-action.is-primary {
  border-color: rgba(107, 242, 212, 0.3);
  background:
    radial-gradient(circle at 0% 0%, rgba(107, 242, 212, 0.14), transparent 48%),
    linear-gradient(135deg, rgba(8, 20, 32, 0.98), rgba(7, 25, 39, 0.92));
  color: #d9fff5;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-compose-panel {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 30;
  display: grid;
  gap: 14px;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 22px;
  border-radius: 30px;
  border: 1px solid rgba(132, 174, 255, 0.16);
  background:
    radial-gradient(circle at top right, rgba(87, 146, 255, 0.16), transparent 28%),
    linear-gradient(180deg, rgba(8, 15, 28, 0.98), rgba(9, 16, 29, 0.94));
  box-shadow:
    0 34px 80px rgba(3, 8, 18, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: auto;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-compose-panel.is-open {
  animation: mailboxComposeRise 0.24s ease;
}

@keyframes mailboxComposeRise {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-compose-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-compose-head h3 {
  margin: 2px 0 0;
  color: rgba(246, 249, 255, 0.98);
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -0.04em;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-compose-form {
  display: grid;
  gap: 14px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-compose-form .mailbox-field textarea,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-compose-form .mailbox-field input {
  width: 100%;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-compose-form .mailbox-field textarea {
  min-height: 74px;
  resize: vertical;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-compose-body-field textarea {
  min-height: 180px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-compose-ai-actions,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-compose-actions,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-compose-upload-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-compose-upload-row input[type="file"] {
  display: none;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-compose-attachments {
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-compose-attachment-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-compose-attachment-copy {
  min-width: 0;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-compose-attachment-copy strong {
  display: block;
  color: rgba(243, 247, 255, 0.96);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-compose-attachment-copy small,
body[data-page="app"][data-app-mode="mailbox"] .mailbox-compose-attachment-empty {
  color: rgba(180, 193, 217, 0.78);
  line-height: 1.5;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-attachment-chip {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-attachment-chip strong {
  color: rgba(238, 244, 255, 0.96);
}

body[data-page="app"][data-app-mode="mailbox"] .mailbox-attachment-chip small {
  color: rgba(176, 192, 220, 0.8);
  line-height: 1.45;
}

@media (max-width: 760px) {
  body[data-page="app"][data-app-mode="mailbox"] .mailbox-compose-panel {
    inset: auto 12px 12px 12px;
    width: auto;
    max-height: calc(100vh - 24px);
  }

  body[data-page="app"][data-app-mode="mailbox"] .mailbox-compose-attachment-card {
    align-items: flex-start;
    flex-direction: column;
  }
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(0, 0, 0, 0.035), transparent 32%),
    linear-gradient(180deg, #f8f6f1, #ffffff 38%, #f7f5ef 100%) !important;
  background-color: #fcfbf8 !important;
  color: #121212 !important;
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-page {
  min-height: 100vh;
  padding: 28px;
  display: grid;
  gap: 24px;
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-topbar {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-back,
body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(18, 18, 18, 0.12);
  background: rgba(255, 255, 255, 0.82);
  color: #121212;
  text-decoration: none;
  font-weight: 600;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-back:hover,
body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-back:focus-visible,
body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-link-btn:hover,
body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-link-btn:focus-visible {
  border-color: rgba(18, 18, 18, 0.28);
  background: #ffffff;
  transform: translateY(-1px);
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-mark {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: #111111;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.12);
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-kicker {
  margin: 0 0 6px;
  color: rgba(18, 18, 18, 0.5);
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-brand h1,
body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-sheet-head h2 {
  margin: 0;
  color: #111111;
  letter-spacing: -0.04em;
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-brand h1 {
  font-size: clamp(2rem, 3vw, 3rem);
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-connection,
body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-sheet-head p {
  margin: 0;
  color: rgba(18, 18, 18, 0.66);
  line-height: 1.6;
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-sheet {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 28px;
  border-radius: 34px;
  border: 1px solid rgba(18, 18, 18, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 248, 242, 0.96)),
    #ffffff;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 24px;
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-sheet-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-pill {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(18, 18, 18, 0.12);
  background: #ffffff;
  color: #111111;
  font-weight: 600;
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-pill[data-state="connected"] {
  border-color: rgba(17, 118, 74, 0.18);
  background: rgba(219, 249, 234, 0.95);
  color: #0d6b42;
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-pill[data-state="error"] {
  border-color: rgba(167, 41, 41, 0.16);
  background: rgba(255, 236, 236, 0.96);
  color: #8d2020;
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-standalone-form {
  display: grid;
  gap: 18px;
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-standalone-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-standalone-field {
  display: grid;
  gap: 10px;
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-standalone-field span {
  font-size: 0.95rem;
  font-weight: 700;
  color: #111111;
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-standalone-field input,
body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-standalone-field textarea {
  width: 100%;
  min-height: 58px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(18, 18, 18, 0.12);
  background: rgba(255, 255, 255, 0.96);
  color: #111111;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-standalone-field textarea {
  min-height: 120px;
  resize: vertical;
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-body-field textarea {
  min-height: 320px;
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-standalone-field input::placeholder,
body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-standalone-field textarea::placeholder {
  color: rgba(18, 18, 18, 0.42);
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-standalone-field input:focus,
body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-standalone-field textarea:focus {
  outline: none;
  border-color: rgba(18, 18, 18, 0.28);
  box-shadow:
    0 0 0 4px rgba(18, 18, 18, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-standalone-actions,
body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-standalone-footer,
body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-standalone-upload {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-standalone-upload input[type="file"] {
  display: none;
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-primary,
body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-secondary,
body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-inline-remove {
  min-height: 50px;
  padding: 0 20px;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid transparent;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-primary {
  background: #101010;
  color: #ffffff;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-secondary,
body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-inline-remove {
  background: #ffffff;
  color: #111111;
  border-color: rgba(18, 18, 18, 0.14);
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-primary:hover,
body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-primary:focus-visible,
body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-secondary:hover,
body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-secondary:focus-visible,
body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-inline-remove:hover,
body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-inline-remove:focus-visible {
  transform: translateY(-1px);
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-primary:hover,
body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-primary:focus-visible {
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.18);
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-standalone-attachments {
  display: grid;
  gap: 10px;
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-attachment-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 24px;
  border: 1px solid rgba(18, 18, 18, 0.1);
  background: rgba(255, 255, 255, 0.84);
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-attachment-copy {
  min-width: 0;
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-attachment-copy strong {
  display: block;
  color: #111111;
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-attachment-copy small,
body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-attachment-empty,
body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-standalone-status {
  color: rgba(18, 18, 18, 0.62);
  line-height: 1.6;
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-standalone-status[data-state="error"] {
  color: #9b2020;
}

body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-standalone-status[data-state="saved"] {
  color: #0f6b45;
}

@media (max-width: 920px) {
  body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-topbar,
  body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-sheet-head {
    grid-template-columns: 1fr;
    display: grid;
  }

  body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-sheet-meta {
    justify-content: flex-start;
  }

  body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-standalone-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-page {
    padding: 18px;
  }

  body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-sheet {
    padding: 20px;
    border-radius: 26px;
  }

  body[data-page="standalone"][data-app-mode="mailbox-compose"] .mailbox-compose-attachment-card {
    flex-direction: column;
    align-items: flex-start;
  }
}

body[data-page="app"][data-app-mode="desktop"] {
  --desktop-border: rgba(165, 202, 255, 0.13);
  --desktop-border-strong: rgba(168, 216, 255, 0.22);
  --desktop-panel: rgba(11, 17, 30, 0.7);
  --desktop-panel-solid: rgba(11, 17, 30, 0.94);
  --desktop-panel-soft: rgba(17, 24, 39, 0.58);
  --desktop-text: rgba(241, 247, 255, 0.97);
  --desktop-text-soft: rgba(186, 201, 225, 0.82);
  --desktop-text-muted: rgba(160, 177, 204, 0.62);
  --desktop-accent: rgba(127, 211, 255, 0.94);
  --desktop-accent-soft: rgba(100, 155, 255, 0.74);
  --desktop-success: rgba(150, 247, 199, 0.96);
  --desktop-warm: rgba(255, 221, 159, 0.96);
  --desktop-danger: rgba(255, 167, 167, 0.96);
  min-height: 100dvh;
  margin: 0;
  color: var(--desktop-text);
  background:
    radial-gradient(circle at 14% 12%, rgba(103, 168, 255, 0.2), transparent 24%),
    radial-gradient(circle at 84% 10%, rgba(103, 255, 226, 0.1), transparent 26%),
    radial-gradient(circle at 52% 64%, rgba(87, 104, 255, 0.14), transparent 34%),
    linear-gradient(135deg, #060b15 0%, #081120 32%, #07101d 58%, #040812 100%);
  background-attachment: fixed;
}

body[data-page="app"][data-app-mode="desktop"]::before,
body[data-page="app"][data-app-mode="desktop"]::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body[data-page="app"][data-app-mode="desktop"]::before {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.085), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 34%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 88px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.016), rgba(255, 255, 255, 0.016) 1px, transparent 1px, transparent 88px);
  opacity: 0.4;
}

body[data-page="app"][data-app-mode="desktop"]::after {
  background:
    radial-gradient(circle at 25% 15%, rgba(123, 214, 255, 0.08), transparent 22%),
    radial-gradient(circle at 78% 26%, rgba(104, 148, 255, 0.07), transparent 22%);
  filter: blur(48px);
  opacity: 0.92;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-shell {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-sizing: border-box;
  isolation: isolate;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-ambient-layer,
body[data-page="app"][data-app-mode="desktop"] .desktop-ambient-grid {
  position: fixed;
  pointer-events: none;
  z-index: -1;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-ambient-layer-a {
  inset: 3vh auto auto 4vw;
  width: 34vw;
  height: 34vw;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(119, 193, 255, 0.18) 0%, rgba(119, 193, 255, 0.05) 34%, transparent 68%);
  filter: blur(24px);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-ambient-layer-b {
  inset: auto 4vw 5vh auto;
  width: 28vw;
  height: 28vw;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(109, 255, 225, 0.09) 0%, rgba(109, 255, 225, 0.03) 36%, transparent 70%);
  filter: blur(30px);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-ambient-grid {
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 22%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.016), transparent 40%);
  mix-blend-mode: screen;
  opacity: 0.24;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-topbar,
body[data-page="app"][data-app-mode="desktop"] .desktop-command-deck,
body[data-page="app"][data-app-mode="desktop"] .desktop-folder-stage,
body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-shell,
body[data-page="app"][data-app-mode="desktop"] .desktop-list-panel,
body[data-page="app"][data-app-mode="desktop"] .desktop-inspector-panel {
  border: 1px solid var(--desktop-border);
  background:
    linear-gradient(180deg, rgba(22, 30, 49, 0.5) 0%, rgba(9, 14, 25, 0.74) 100%);
  box-shadow:
    0 24px 80px rgba(2, 5, 10, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(28px) saturate(138%);
  -webkit-backdrop-filter: blur(28px) saturate(138%);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-topbar {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-topbar::before,
body[data-page="app"][data-app-mode="desktop"] .desktop-command-deck::before,
body[data-page="app"][data-app-mode="desktop"] .desktop-folder-stage::before,
body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-shell::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.075), transparent 26%, transparent 72%, rgba(117, 213, 255, 0.06));
  opacity: 0.9;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-topbar-brand-shell,
body[data-page="app"][data-app-mode="desktop"] .desktop-topbar-brand,
body[data-page="app"][data-app-mode="desktop"] .desktop-topbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-topbar-brand-shell {
  gap: 16px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-window-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 15, 26, 0.48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-window-controls span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: block;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-window-controls span:nth-child(1) {
  background: #ff6b6b;
  box-shadow: 0 0 18px rgba(255, 107, 107, 0.35);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-window-controls span:nth-child(2) {
  background: #ffd166;
  box-shadow: 0 0 18px rgba(255, 209, 102, 0.35);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-window-controls span:nth-child(3) {
  background: #8ef0b6;
  box-shadow: 0 0 18px rgba(142, 240, 182, 0.35);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-topbar-mark {
  width: 50px;
  height: 50px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  font-weight: 800;
  color: #06101c;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.72), transparent 28%),
    linear-gradient(135deg, rgba(143, 241, 255, 0.98), rgba(101, 139, 255, 0.95));
  box-shadow:
    0 16px 44px rgba(78, 126, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-topbar h1 {
  margin: 2px 0 0;
  font-size: clamp(1.8rem, 2.6vw, 2.35rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-topbar-nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(6, 11, 20, 0.44);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-shell .btn.ghost {
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.012) 100%);
  color: rgba(235, 242, 255, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 24px rgba(4, 9, 18, 0.12);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-shell .btn.ghost:hover,
body[data-page="app"][data-app-mode="desktop"] .desktop-shell .btn.ghost:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(145, 216, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 16px 30px rgba(4, 10, 20, 0.18);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-shell .btn.ghost:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-topbar-actions {
  justify-self: end;
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-topbar .btn.ghost {
  border-radius: 14px;
  box-shadow: none;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-topbar .btn.ghost:hover,
body[data-page="app"][data-app-mode="desktop"] .desktop-topbar .btn.ghost:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(127, 211, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 8px 24px rgba(3, 7, 15, 0.24);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-live-pill {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  padding: 11px 16px 11px 34px;
  border: 1px solid rgba(131, 255, 220, 0.15);
  background: rgba(8, 18, 27, 0.58);
  color: rgba(194, 255, 234, 0.96);
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-live-pill::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: var(--desktop-success);
  box-shadow: 0 0 18px rgba(150, 247, 199, 0.48);
  animation: desktopPulse 2.6s ease-in-out infinite;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-command-deck {
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  padding: 26px 26px 24px;
  display: grid;
  gap: 22px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-command-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.9fr);
  gap: 24px;
  align-items: center;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-hero-copy {
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-kicker {
  display: inline-flex;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(159, 206, 255, 0.7);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-hero-copy h2 {
  margin: 0;
  max-width: 13ch;
  font-size: clamp(2.2rem, 4vw, 4.2rem);
  line-height: 0.98;
  letter-spacing: -0.065em;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-hero-copy p {
  margin: 0;
  max-width: 68ch;
  color: var(--desktop-text-soft);
  font-size: 1.02rem;
  line-height: 1.65;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-command-rail {
  position: relative;
  min-height: 220px;
  padding: 18px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 18% 24%, rgba(118, 199, 255, 0.18), transparent 22%),
    linear-gradient(180deg, rgba(7, 12, 22, 0.36), rgba(12, 18, 31, 0.56));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 80px rgba(94, 142, 255, 0.05);
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 10px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-command-chip {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(224, 235, 255, 0.9);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-command-orbit {
  position: absolute;
  right: 28px;
  bottom: 22px;
  width: 140px;
  height: 140px;
  display: grid;
  place-items: center;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-command-orbit-ring,
body[data-page="app"][data-app-mode="desktop"] .desktop-command-orbit-core {
  position: absolute;
  border-radius: 999px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-command-orbit-ring {
  inset: 0;
  border: 1px solid rgba(140, 201, 255, 0.18);
  box-shadow:
    inset 0 0 40px rgba(124, 182, 255, 0.05),
    0 0 40px rgba(72, 124, 255, 0.08);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-command-orbit-core {
  inset: 30%;
  background:
    radial-gradient(circle, rgba(159, 228, 255, 0.96) 0%, rgba(99, 147, 255, 0.88) 58%, rgba(99, 147, 255, 0) 100%);
  box-shadow: 0 0 48px rgba(86, 147, 255, 0.34);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-card {
  position: relative;
  overflow: hidden;
  min-height: 134px;
  border-radius: 24px;
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(16, 23, 37, 0.8) 0%, rgba(9, 14, 24, 0.9) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 60px rgba(104, 145, 255, 0.03),
    0 14px 34px rgba(0, 0, 0, 0.2);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
  animation: desktopRise 520ms ease backwards;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-card:nth-child(2) {
  animation-delay: 40ms;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-card:nth-child(3) {
  animation-delay: 80ms;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-card:nth-child(4) {
  animation-delay: 120ms;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-card:nth-child(5) {
  animation-delay: 160ms;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-card:hover {
  transform: translateY(-2px);
  border-color: rgba(160, 216, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 60px rgba(105, 166, 255, 0.05),
    0 18px 40px rgba(0, 0, 0, 0.22);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-card::after {
  content: "";
  position: absolute;
  inset: auto 16px 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(146, 219, 255, 0.72), transparent);
  opacity: 0.6;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-card small,
body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-card span {
  color: var(--desktop-text-muted);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-card small {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-card strong {
  font-size: clamp(1.55rem, 2.1vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.05em;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-card[data-tone="danger"] strong {
  color: var(--desktop-danger);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-card[data-tone="success"] strong {
  color: var(--desktop-success);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-card[data-tone="accent"] strong {
  color: rgba(184, 221, 255, 0.98);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-card[data-tone="warm"] strong {
  color: var(--desktop-warm);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-workspace-grid {
  display: grid;
  grid-template-columns: 332px minmax(0, 1fr);
  gap: 18px;
  min-height: clamp(720px, 72vh, 920px);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-stage,
body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-shell {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-stage {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-stage-head,
body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-head,
body[data-page="app"][data-app-mode="desktop"] .desktop-subsection-head,
body[data-page="app"][data-app-mode="desktop"] .desktop-item-card-top,
body[data-page="app"][data-app-mode="desktop"] .desktop-group-head,
body[data-page="app"][data-app-mode="desktop"] .desktop-inspector-toolbar,
body[data-page="app"][data-app-mode="desktop"] .desktop-inline-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-stage-head {
  padding: 4px 2px 0;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-stage h3,
body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-head h3 {
  margin: 6px 0 0;
  font-size: 1.42rem;
  letter-spacing: -0.045em;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-stage-tools,
body[data-page="app"][data-app-mode="desktop"] #desktop-folder-meta {
  color: var(--desktop-text-muted);
  font-size: 0.86rem;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-grid {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card {
  position: relative;
  overflow: hidden;
  min-height: 122px;
  padding: 18px 18px 18px 20px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(18, 25, 41, 0.82) 0%, rgba(9, 15, 26, 0.9) 100%);
  color: inherit;
  text-align: left;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "icon meta"
    "icon detail";
  column-gap: 16px;
  row-gap: 5px;
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
  animation: desktopRise 540ms ease backwards;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card:nth-child(2) {
  animation-delay: 40ms;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card:nth-child(3) {
  animation-delay: 80ms;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card:nth-child(4) {
  animation-delay: 120ms;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card:nth-child(5) {
  animation-delay: 160ms;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, transparent, rgba(143, 215, 255, 0.78), transparent);
  opacity: 0;
  transition: opacity 180ms ease;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card:hover,
body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card:focus-visible,
body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card.is-active {
  transform: translateX(4px);
  border-color: rgba(154, 217, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(25, 35, 56, 0.88) 0%, rgba(11, 18, 31, 0.94) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 80px rgba(113, 163, 255, 0.04),
    0 18px 38px rgba(0, 0, 0, 0.22);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card:hover::before,
body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card:focus-visible::before,
body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card.is-active::before {
  opacity: 1;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-icon {
  grid-area: icon;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 1.45rem;
  color: rgba(225, 242, 255, 0.98);
  background:
    radial-gradient(circle at 24% 22%, rgba(255, 255, 255, 0.18), transparent 26%),
    linear-gradient(135deg, rgba(40, 88, 128, 0.92), rgba(17, 32, 58, 0.94));
  box-shadow:
    0 16px 36px rgba(5, 10, 20, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card strong {
  grid-area: title;
  align-self: end;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card small {
  grid-area: meta;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-detail {
  grid-area: detail;
  margin: 0;
  line-height: 1.5;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card small,
body[data-page="app"][data-app-mode="desktop"] .desktop-folder-detail,
body[data-page="app"][data-app-mode="desktop"] .desktop-item-card p,
body[data-page="app"][data-app-mode="desktop"] .desktop-item-card small,
body[data-page="app"][data-app-mode="desktop"] .desktop-copy-block,
body[data-page="app"][data-app-mode="desktop"] .desktop-empty-state {
  color: var(--desktop-text-soft);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-shell {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-head {
  padding: 6px 8px 0;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-head p {
  margin: 6px 0 0;
  color: var(--desktop-text-soft);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-search {
  min-width: 300px;
  display: grid;
  gap: 7px;
  color: var(--desktop-text-muted);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-search span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-search input {
  width: 100%;
  min-height: 52px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(4, 8, 15, 0.66) 0%, rgba(9, 14, 24, 0.88) 100%);
  padding: 0 18px;
  color: rgba(244, 248, 255, 0.98);
  box-sizing: border-box;
  outline: none;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-search input:focus {
  border-color: rgba(143, 215, 255, 0.22);
  box-shadow:
    0 0 0 1px rgba(143, 215, 255, 0.12),
    0 10px 30px rgba(1, 4, 10, 0.18);
  transform: translateY(-1px);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-grouping {
  display: inline-flex;
  gap: 8px;
  padding: 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(5, 10, 18, 0.42);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-grouping .btn.ghost {
  border-radius: 999px;
  min-height: 40px;
  padding-inline: 15px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-grouping .btn.is-active {
  border-color: rgba(143, 214, 255, 0.22);
  background: rgba(106, 171, 255, 0.08);
  color: rgba(212, 240, 255, 0.98);
  box-shadow: inset 0 0 0 1px rgba(143, 215, 255, 0.09);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(440px, 1.02fr) minmax(360px, 0.88fr);
  gap: 18px;
  height: clamp(560px, 64vh, 840px);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-list-panel,
body[data-page="app"][data-app-mode="desktop"] .desktop-inspector-panel {
  min-height: 0;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    linear-gradient(180deg, rgba(12, 19, 32, 0.88) 0%, rgba(7, 12, 22, 0.94) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 90px rgba(120, 171, 255, 0.03),
    0 24px 48px rgba(0, 0, 0, 0.22);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-list-panel,
body[data-page="app"][data-app-mode="desktop"] .desktop-inspector-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-list,
body[data-page="app"][data-app-mode="desktop"] .desktop-inspector {
  min-height: 0;
  overflow: auto;
  scrollbar-gutter: stable;
  padding: 18px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-inspector-toolbar,
body[data-page="app"][data-app-mode="desktop"] .desktop-footer-status {
  padding: 15px 18px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-inspector-toolbar {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-footer-status {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.9rem;
  color: var(--desktop-text-muted);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-footer-status[data-state="pending"] {
  color: var(--desktop-warm);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-footer-status[data-state="saved"] {
  color: var(--desktop-success);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-footer-status[data-state="error"] {
  color: var(--desktop-danger);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-group-section {
  position: relative;
  display: grid;
  gap: 12px;
  padding-left: 18px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-group-section::before {
  content: "";
  position: absolute;
  inset: 42px auto 12px 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(140, 196, 255, 0.24), transparent 90%);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-group-section + .desktop-group-section {
  margin-top: 24px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-group-head {
  color: rgba(177, 208, 245, 0.88);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-group-head strong {
  font-size: 1rem;
  letter-spacing: -0.03em;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-card-stack,
body[data-page="app"][data-app-mode="desktop"] .desktop-media-grid,
body[data-page="app"][data-app-mode="desktop"] .desktop-bookkeeping-grid,
body[data-page="app"][data-app-mode="desktop"] .desktop-linked-list {
  display: grid;
  gap: 12px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-item-card,
body[data-page="app"][data-app-mode="desktop"] .desktop-media-card,
body[data-page="app"][data-app-mode="desktop"] .desktop-linked-row.is-static {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(17, 25, 41, 0.84) 0%, rgba(8, 14, 24, 0.92) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 60px rgba(106, 156, 255, 0.03),
    0 16px 30px rgba(0, 0, 0, 0.17);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-item-card {
  width: 100%;
  padding: 18px 18px 18px 20px;
  text-align: left;
  color: inherit;
  cursor: pointer;
  display: grid;
  gap: 8px;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-item-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, transparent, rgba(145, 217, 255, 0.8), transparent);
  opacity: 0;
  transition: opacity 160ms ease;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-item-card:hover,
body[data-page="app"][data-app-mode="desktop"] .desktop-item-card:focus-visible,
body[data-page="app"][data-app-mode="desktop"] .desktop-item-card.is-active {
  transform: translateY(-2px);
  border-color: rgba(143, 215, 255, 0.2);
  background:
    linear-gradient(180deg, rgba(22, 32, 52, 0.9) 0%, rgba(10, 16, 28, 0.96) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 80px rgba(115, 175, 255, 0.05),
    0 18px 36px rgba(0, 0, 0, 0.22);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-item-card:hover::before,
body[data-page="app"][data-app-mode="desktop"] .desktop-item-card:focus-visible::before,
body[data-page="app"][data-app-mode="desktop"] .desktop-item-card.is-active::before {
  opacity: 1;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-item-card.is-static {
  cursor: default;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-item-card-top strong {
  font-size: 1.08rem;
  letter-spacing: -0.03em;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-chip {
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(226, 234, 248, 0.92);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-chip[data-tone="danger"] {
  color: rgba(255, 215, 215, 0.98);
  border-color: rgba(255, 126, 126, 0.22);
  background: rgba(255, 104, 104, 0.07);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-chip[data-tone="success"] {
  color: rgba(197, 255, 222, 0.98);
  border-color: rgba(114, 255, 189, 0.2);
  background: rgba(114, 255, 189, 0.07);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-chip[data-tone="warm"] {
  color: rgba(255, 237, 198, 0.98);
  border-color: rgba(255, 198, 98, 0.2);
  background: rgba(255, 198, 98, 0.08);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-chip[data-tone="accent"] {
  color: rgba(213, 234, 255, 0.98);
  border-color: rgba(100, 181, 255, 0.22);
  background: rgba(100, 181, 255, 0.08);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-inspector-card {
  display: grid;
  gap: 18px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-inspector-card h3 {
  margin: 6px 0 0;
  font-size: 1.58rem;
  letter-spacing: -0.05em;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-detail-grid article,
body[data-page="app"][data-app-mode="desktop"] .desktop-subsection {
  border-radius: 22px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    linear-gradient(180deg, rgba(14, 20, 34, 0.9) 0%, rgba(9, 14, 23, 0.94) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 28px rgba(0, 0, 0, 0.12);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-detail-grid article small {
  display: block;
  margin-bottom: 8px;
  color: var(--desktop-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.7rem;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-detail-grid article strong {
  line-height: 1.5;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-copy-block {
  margin: 0;
  line-height: 1.72;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-linked-row {
  border-radius: 18px;
  padding: 14px 15px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(8, 13, 22, 0.64);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-linked-row:hover,
body[data-page="app"][data-app-mode="desktop"] .desktop-linked-row:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(142, 214, 255, 0.18);
  background: rgba(14, 20, 34, 0.86);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-linked-row strong {
  display: block;
  margin-bottom: 5px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-linked-row small {
  color: var(--desktop-text-muted);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-inline-actions,
body[data-page="app"][data-app-mode="desktop"] .desktop-media-actions {
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-media-grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

body[data-page="app"][data-app-mode="desktop"] .desktop-media-card {
  overflow: hidden;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-media-card img,
body[data-page="app"][data-app-mode="desktop"] .desktop-media-card video,
body[data-page="app"][data-app-mode="desktop"] .desktop-media-fallback {
  width: 100%;
  aspect-ratio: 1 / 0.78;
  display: grid;
  place-items: center;
  object-fit: cover;
  background:
    radial-gradient(circle at 26% 20%, rgba(255, 255, 255, 0.12), transparent 24%),
    linear-gradient(135deg, rgba(29, 64, 104, 0.94), rgba(10, 21, 37, 0.96));
  color: rgba(205, 232, 255, 0.94);
  font-size: 1.8rem;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-media-copy,
body[data-page="app"][data-app-mode="desktop"] .desktop-media-actions {
  padding: 0 14px 14px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-media-copy {
  padding-top: 12px;
  display: grid;
  gap: 4px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-empty-state {
  min-height: 132px;
  border-radius: 24px;
  border: 1px dashed rgba(157, 204, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(9, 15, 28, 0.72) 0%, rgba(7, 12, 22, 0.84) 100%);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 20px;
  line-height: 1.7;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-empty-state.compact {
  min-height: 92px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-grid::-webkit-scrollbar,
body[data-page="app"][data-app-mode="desktop"] .desktop-list::-webkit-scrollbar,
body[data-page="app"][data-app-mode="desktop"] .desktop-inspector::-webkit-scrollbar {
  width: 11px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-grid::-webkit-scrollbar-track,
body[data-page="app"][data-app-mode="desktop"] .desktop-list::-webkit-scrollbar-track,
body[data-page="app"][data-app-mode="desktop"] .desktop-inspector::-webkit-scrollbar-track {
  background: rgba(7, 12, 21, 0.66);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-grid::-webkit-scrollbar-thumb,
body[data-page="app"][data-app-mode="desktop"] .desktop-list::-webkit-scrollbar-thumb,
body[data-page="app"][data-app-mode="desktop"] .desktop-inspector::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 2px solid rgba(7, 12, 21, 0.52);
  background: linear-gradient(180deg, rgba(110, 198, 255, 0.82), rgba(87, 126, 255, 0.72));
}

@keyframes desktopRise {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes desktopPulse {
  0%,
  100% {
    transform: translateY(-50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(-50%) scale(1.16);
    opacity: 0.78;
  }
}

@media (max-width: 1460px) {
  body[data-page="app"][data-app-mode="desktop"] .desktop-command-head {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1320px) {
  body[data-page="app"][data-app-mode="desktop"] .desktop-topbar {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-topbar-nav,
  body[data-page="app"][data-app-mode="desktop"] .desktop-topbar-actions {
    justify-self: stretch;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-topbar-nav {
    justify-content: flex-start;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-topbar-actions {
    justify-content: flex-start;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-workspace-grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-body {
    grid-template-columns: 1fr;
    height: auto;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-list-panel,
  body[data-page="app"][data-app-mode="desktop"] .desktop-inspector-panel {
    min-height: 420px;
  }
}

@media (max-width: 900px) {
  body[data-page="app"][data-app-mode="desktop"] .desktop-shell {
    padding: 14px;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-command-deck,
  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-stage,
  body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-shell {
    border-radius: 26px;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-grid,
  body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-grid,
  body[data-page="app"][data-app-mode="desktop"] .desktop-detail-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-search {
    min-width: 0;
    width: 100%;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-tools,
  body[data-page="app"][data-app-mode="desktop"] .desktop-inspector-toolbar {
    justify-content: flex-start;
  }
}

/* Desktop v2: real OS-like surface instead of dashboard */
body[data-page="app"][data-app-mode="desktop"] {
  background:
    radial-gradient(circle at 18% 18%, rgba(126, 196, 255, 0.18), transparent 22%),
    radial-gradient(circle at 78% 12%, rgba(110, 255, 220, 0.08), transparent 18%),
    radial-gradient(circle at 60% 75%, rgba(92, 114, 255, 0.12), transparent 28%),
    linear-gradient(140deg, #050912 0%, #08101d 30%, #081320 56%, #04070f 100%);
}

body[data-page="app"][data-app-mode="desktop"]::after {
  background:
    radial-gradient(circle at 32% 18%, rgba(126, 199, 255, 0.09), transparent 18%),
    radial-gradient(circle at 68% 38%, rgba(255, 255, 255, 0.025), transparent 20%);
  filter: blur(62px);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-shell {
  gap: 14px;
  padding: 14px 18px 24px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-topbar {
  position: sticky;
  top: 8px;
  z-index: 20;
  min-height: 42px;
  padding: 8px 14px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(18, 24, 38, 0.62) 0%, rgba(9, 14, 24, 0.7) 100%);
  backdrop-filter: blur(24px) saturate(140%);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-topbar::before {
  display: none;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-topbar h1 {
  font-size: 1.02rem;
  letter-spacing: -0.02em;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-topbar-brand-shell {
  gap: 10px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-window-controls {
  padding: 6px 10px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-topbar-mark {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  font-size: 0.88rem;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-topbar-nav {
  justify-self: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-topbar .btn.ghost {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 11px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  font-size: 0.92rem;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-topbar .btn.ghost:hover,
body[data-page="app"][data-app-mode="desktop"] .desktop-topbar .btn.ghost:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.05);
  box-shadow: none;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-live-pill {
  padding: 8px 12px 8px 28px;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-main {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px 24px;
  min-height: calc(100dvh - 96px);
  align-items: start;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-command-deck {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  width: min(520px, 100%);
  padding: 14px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(16, 22, 35, 0.58) 0%, rgba(9, 14, 23, 0.72) 100%);
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-command-deck::before {
  display: none;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-command-head {
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-hero-copy {
  gap: 6px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-hero-copy h2 {
  max-width: none;
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  letter-spacing: -0.04em;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-hero-copy p {
  font-size: 0.95rem;
  line-height: 1.55;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-command-state {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-command-chip {
  padding: 8px 11px;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-card {
  min-height: 92px;
  padding: 14px 14px 16px;
  border-radius: 18px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-card small {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-card strong {
  font-size: clamp(1.08rem, 1.5vw, 1.45rem);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-card span {
  font-size: 0.75rem;
  line-height: 1.4;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-stage {
  grid-column: 1;
  grid-row: 1 / span 2;
  padding: 12px 0 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  overflow: visible;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-stage::before {
  display: none;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-stage-head {
  padding: 0 8px 10px;
  align-items: flex-end;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-stage h3 {
  font-size: 1.15rem;
  margin-top: 2px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-grid {
  overflow: visible;
  grid-template-columns: repeat(2, minmax(116px, 1fr));
  gap: 24px 12px;
  padding: 4px 2px 0;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card {
  min-height: 170px;
  padding: 14px 6px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: none;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card:hover,
body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card:focus-visible,
body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card.is-active {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transform: translateY(-3px) scale(1.01);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card::before,
body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 16px;
  border-radius: 20px 20px 16px 16px;
  transform-origin: bottom center;
  transition:
    transform 260ms ease,
    opacity 260ms ease,
    box-shadow 260ms ease;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card::before {
  width: 94px;
  height: 66px;
  transform: translateX(-50%) translateY(7px);
  background: linear-gradient(180deg, rgba(80, 88, 104, 0.9), rgba(46, 52, 64, 0.88));
  opacity: 0.92;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card::after {
  width: 100px;
  height: 70px;
  transform: translateX(-50%) translateY(2px);
  background: linear-gradient(180deg, rgba(164, 171, 185, 0.88), rgba(112, 118, 131, 0.92));
  opacity: 0.88;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card:hover::before,
body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card:focus-visible::before,
body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card.is-active::before {
  transform: translateX(-50%) translateY(2px) rotateX(-22deg);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card:hover::after,
body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card:focus-visible::after,
body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card.is-active::after {
  transform: translateX(-50%) translateY(-2px) rotateX(-34deg);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-icon {
  order: 1;
  position: relative;
  width: 112px;
  height: 78px;
  margin-top: 28px;
  border-radius: 20px 20px 18px 18px;
  background:
    radial-gradient(circle at 26% 18%, rgba(255, 255, 255, 0.24), transparent 26%),
    linear-gradient(180deg, #f0b84c 0%, #cb8820 62%, #a46210 100%);
  box-shadow:
    inset 0 18px 28px rgba(255, 214, 115, 0.28),
    inset 0 -18px 34px rgba(140, 77, 7, 0.26),
    0 20px 36px rgba(0, 0, 0, 0.18);
  color: rgba(80, 42, 0, 0.85);
  font-size: 1.05rem;
  font-weight: 800;
  transition:
    transform 280ms ease,
    box-shadow 280ms ease,
    filter 280ms ease;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-icon::before,
body[data-page="app"][data-app-mode="desktop"] .desktop-folder-icon::after {
  content: "";
  position: absolute;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-icon::before {
  left: 0;
  bottom: calc(100% - 8px);
  width: 42px;
  height: 14px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(180deg, #f0b84c 0%, #cb8820 100%);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-icon::after {
  right: 8px;
  top: 8px;
  width: 30px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  filter: blur(12px);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card:hover .desktop-folder-icon,
body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card:focus-visible .desktop-folder-icon,
body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card.is-active .desktop-folder-icon {
  transform: rotateX(-38deg) translateY(2px);
  box-shadow:
    inset 0 22px 34px rgba(255, 216, 116, 0.34),
    inset 0 -20px 40px rgba(143, 84, 12, 0.34),
    0 22px 44px rgba(0, 0, 0, 0.26);
  filter: saturate(1.04);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card strong {
  order: 2;
  margin-top: 10px;
  font-size: 0.98rem;
  text-align: center;
  line-height: 1.25;
  color: rgba(244, 248, 255, 0.98);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.34);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card small {
  order: 3;
  text-align: center;
  font-size: 0.76rem;
  color: rgba(214, 224, 242, 0.72);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card .desktop-folder-detail {
  display: none;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-workspace-grid {
  grid-column: 2;
  grid-row: 2;
  min-height: 0;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-shell {
  position: relative;
  min-height: calc(100dvh - 250px);
  padding: 0;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(18, 24, 37, 0.72) 0%, rgba(8, 13, 23, 0.82) 100%);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-shell::before {
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 12%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02), transparent 32%);
  opacity: 1;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-head {
  position: relative;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
}

body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-head::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 18px;
  width: 42px;
  height: 12px;
  background:
    radial-gradient(circle, #ff6b6b 0 4px, transparent 5px),
    radial-gradient(circle, #ffd166 0 4px, transparent 5px),
    radial-gradient(circle, #8ef0b6 0 4px, transparent 5px);
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: 0 0, 15px 0, 30px 0;
  opacity: 0.9;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-head > div:first-child {
  padding-left: 58px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-head h3 {
  font-size: 1.28rem;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-head p {
  font-size: 0.9rem;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-body {
  height: calc(100dvh - 340px);
  min-height: 520px;
  gap: 0;
  grid-template-columns: minmax(420px, 0.96fr) minmax(360px, 0.84fr);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-list-panel,
body[data-page="app"][data-app-mode="desktop"] .desktop-inspector-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-list-panel {
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-list,
body[data-page="app"][data-app-mode="desktop"] .desktop-inspector {
  padding: 18px 18px 20px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-item-card,
body[data-page="app"][data-app-mode="desktop"] .desktop-media-card,
body[data-page="app"][data-app-mode="desktop"] .desktop-linked-row.is-static {
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.015) 100%);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-item-card {
  padding: 15px 16px 15px 18px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-item-card:hover,
body[data-page="app"][data-app-mode="desktop"] .desktop-item-card:focus-visible,
body[data-page="app"][data-app-mode="desktop"] .desktop-item-card.is-active {
  transform: translateY(-1px);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-inspector-toolbar {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-footer-status {
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.02);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-detail-grid {
  gap: 10px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-detail-grid article,
body[data-page="app"][data-app-mode="desktop"] .desktop-subsection {
  border-radius: 18px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-linked-row {
  border-radius: 16px;
}

@media (max-width: 1380px) {
  body[data-page="app"][data-app-mode="desktop"] .desktop-main {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-grid {
    grid-template-columns: repeat(2, minmax(98px, 1fr));
  }
}

@media (max-width: 1100px) {
  body[data-page="app"][data-app-mode="desktop"] .desktop-main {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    min-height: auto;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-command-deck,
  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-stage,
  body[data-page="app"][data-app-mode="desktop"] .desktop-workspace-grid {
    grid-column: auto;
    grid-row: auto;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-stage {
    padding-top: 4px;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-grid {
    grid-template-columns: repeat(3, minmax(96px, 1fr));
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-shell {
    min-height: 0;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-body {
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-list-panel {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
}

@media (max-width: 720px) {
  body[data-page="app"][data-app-mode="desktop"] .desktop-topbar {
    position: static;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-command-head {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-command-state {
    justify-content: flex-start;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-grid,
  body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-grid,
  body[data-page="app"][data-app-mode="desktop"] .desktop-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card {
    min-height: 154px;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-icon {
    width: 98px;
    height: 70px;
  }
}

/* Desktop v3: cinematic SaaS operating system */
body[data-page="app"][data-app-mode="desktop"] {
  background:
    radial-gradient(circle at 18% 22%, rgba(127, 191, 255, 0.18), transparent 20%),
    radial-gradient(circle at 82% 14%, rgba(110, 255, 223, 0.07), transparent 18%),
    radial-gradient(circle at 60% 72%, rgba(88, 102, 255, 0.14), transparent 28%),
    linear-gradient(135deg, #04070f 0%, #07101c 28%, #091321 55%, #050914 100%);
}

body[data-page="app"][data-app-mode="desktop"]::before {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.06), transparent 20%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 96px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.014), rgba(255, 255, 255, 0.014) 1px, transparent 1px, transparent 96px);
  opacity: 0.34;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-shell {
  gap: 12px;
  padding: 14px 18px 20px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-ambient-layer-a {
  width: 42vw;
  height: 42vw;
  inset: 8vh auto auto -6vw;
  opacity: 0.72;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-ambient-layer-b {
  width: 34vw;
  height: 34vw;
  inset: auto 0vw 4vh auto;
  opacity: 0.8;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-topbar {
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(17, 24, 38, 0.66) 0%, rgba(9, 14, 24, 0.72) 100%);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-main {
  position: relative;
  display: block;
  min-height: calc(100dvh - 92px);
  overflow: hidden;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-stage {
  position: absolute;
  left: 0;
  top: 34px;
  bottom: 8px;
  width: 308px;
  z-index: 1;
  padding: 0 0 0 6px;
  opacity: 0.86;
  filter: saturate(0.96) brightness(0.94);
  transform: translateZ(0);
  animation: desktopFloatIn 620ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-stage-head {
  padding: 0 10px 16px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-stage-tools,
body[data-page="app"][data-app-mode="desktop"] #desktop-folder-meta {
  color: rgba(191, 203, 225, 0.48);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-grid {
  grid-template-columns: repeat(2, minmax(112px, 1fr));
  gap: 32px 18px;
  padding: 0 4px 0 0;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card {
  min-height: 168px;
  gap: 8px;
  opacity: 0.92;
  transition:
    transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 240ms ease,
    filter 240ms ease;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card:hover,
body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card:focus-visible,
body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card.is-active {
  opacity: 1;
  transform: translateY(-5px) scale(1.018);
  filter: saturate(1.04);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card::before {
  width: 96px;
  height: 68px;
  top: 16px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(103, 110, 122, 0.92), rgba(47, 54, 67, 0.88));
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card::after {
  width: 102px;
  height: 72px;
  top: 14px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(186, 191, 201, 0.88), rgba(120, 126, 136, 0.92));
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-icon {
  width: 118px;
  height: 82px;
  margin-top: 26px;
  border-radius: 22px 22px 18px 18px;
  background:
    radial-gradient(circle at 26% 18%, rgba(255, 255, 255, 0.28), transparent 26%),
    linear-gradient(180deg, #f4c560 0%, #d89325 58%, #af6910 100%);
  box-shadow:
    inset 0 20px 30px rgba(255, 223, 132, 0.3),
    inset 0 -22px 34px rgba(150, 86, 8, 0.25),
    0 18px 28px rgba(0, 0, 0, 0.16);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-icon::before {
  width: 48px;
  height: 16px;
  bottom: calc(100% - 8px);
  border-radius: 18px 18px 0 0;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card strong {
  margin-top: 8px;
  font-size: 1rem;
  line-height: 1.18;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card small {
  font-size: 0.74rem;
  max-width: 12ch;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-workspace-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  width: min(1380px, calc(100% - 28px));
  margin: 30px auto 0;
  padding-left: clamp(160px, 16vw, 220px);
  transform: translateX(-28px);
  align-items: start;
  animation: desktopWindowIn 620ms cubic-bezier(0.18, 0.84, 0.26, 1) both;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-shell {
  min-height: calc(100dvh - 182px);
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(20, 28, 43, 0.82) 0%, rgba(8, 13, 24, 0.88) 100%);
  box-shadow:
    0 36px 100px rgba(0, 0, 0, 0.34),
    0 18px 46px rgba(6, 12, 23, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(28px) saturate(148%);
  -webkit-backdrop-filter: blur(28px) saturate(148%);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-shell::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 12%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025), transparent 30%),
    radial-gradient(circle at 14% 8%, rgba(132, 214, 255, 0.1), transparent 18%);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-head {
  padding: 16px 18px 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0));
}

body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-head::before {
  left: 18px;
  top: 20px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-head > div:first-child {
  padding-left: 62px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-head h3 {
  margin-top: 4px;
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  letter-spacing: -0.05em;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-head p {
  font-size: 0.94rem;
  color: rgba(192, 205, 225, 0.74);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-tools {
  align-items: flex-end;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-search {
  min-width: 320px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-search input {
  min-height: 54px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(5, 10, 18, 0.74) 0%, rgba(10, 15, 26, 0.9) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 14px 28px rgba(2, 5, 10, 0.16);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-grouping {
  padding: 6px;
  background: rgba(6, 11, 20, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-body {
  height: calc(100dvh - 300px);
  min-height: 540px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-list-panel,
body[data-page="app"][data-app-mode="desktop"] .desktop-inspector-panel {
  position: relative;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-list-panel::before,
body[data-page="app"][data-app-mode="desktop"] .desktop-inspector-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 10%);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-list {
  padding: 20px 18px 22px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-inspector {
  padding: 20px 18px 22px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-item-card,
body[data-page="app"][data-app-mode="desktop"] .desktop-media-card,
body[data-page="app"][data-app-mode="desktop"] .desktop-linked-row.is-static {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.012) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 16px 28px rgba(0, 0, 0, 0.12);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-item-card:hover,
body[data-page="app"][data-app-mode="desktop"] .desktop-item-card:focus-visible,
body[data-page="app"][data-app-mode="desktop"] .desktop-item-card.is-active {
  transform: translateY(-2px) scale(1.004);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 22px 38px rgba(0, 0, 0, 0.18);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-inspector-toolbar {
  padding: 15px 18px;
  background: rgba(255, 255, 255, 0.02);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-footer-status {
  padding: 13px 18px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-command-deck {
  position: sticky;
  top: 74px;
  width: auto;
  margin-top: 34px;
  padding: 18px 16px 16px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(20, 29, 46, 0.66) 0%, rgba(10, 15, 25, 0.78) 100%);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(26px) saturate(145%);
  -webkit-backdrop-filter: blur(26px) saturate(145%);
  animation: desktopSidecarIn 720ms cubic-bezier(0.2, 0.85, 0.24, 1) both;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-command-deck::before {
  display: block;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 24%, transparent 70%, rgba(124, 206, 255, 0.06));
}

body[data-page="app"][data-app-mode="desktop"] .desktop-command-head {
  grid-template-columns: 1fr;
  gap: 12px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-command-state {
  justify-content: flex-start;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-hero-copy h2 {
  font-size: 1.42rem;
  letter-spacing: -0.04em;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-hero-copy p {
  font-size: 0.9rem;
  color: rgba(188, 202, 223, 0.78);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-card {
  min-height: 94px;
  border-radius: 18px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-card::after {
  inset: auto 14px 0;
}

@keyframes desktopWindowIn {
  from {
    opacity: 0;
    transform: translateX(-18px) translateY(18px) scale(0.985);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateX(-28px) translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes desktopSidecarIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes desktopFloatIn {
  from {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(6px);
  }
  to {
    opacity: 0.86;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (max-width: 1480px) {
  body[data-page="app"][data-app-mode="desktop"] .desktop-workspace-grid {
    grid-template-columns: minmax(0, 1fr) 292px;
    padding-left: clamp(120px, 13vw, 190px);
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-stage {
    width: 276px;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-grid {
    gap: 28px 12px;
  }
}

@media (max-width: 1220px) {
  body[data-page="app"][data-app-mode="desktop"] .desktop-main {
    overflow: visible;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-stage {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    width: auto;
    padding: 0;
    opacity: 1;
    filter: none;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-workspace-grid {
    width: 100%;
    margin-top: 18px;
    padding-left: 0;
    transform: none;
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-command-deck {
    position: relative;
    top: auto;
    margin-top: 0;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-grid {
    grid-template-columns: repeat(4, minmax(108px, 1fr));
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-shell {
    min-height: 0;
  }
}

@media (max-width: 860px) {
  body[data-page="app"][data-app-mode="desktop"] .desktop-topbar {
    position: static;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-grid,
  body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-grid,
  body[data-page="app"][data-app-mode="desktop"] .desktop-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-body {
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-list-panel {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-search {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 640px) {
  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-grid,
  body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-grid,
  body[data-page="app"][data-app-mode="desktop"] .desktop-detail-grid {
    grid-template-columns: 1fr;
  }
}

body[data-page="app"][data-app-mode="desktop"] .desktop-shell {
  gap: 10px;
  padding: 14px 16px 18px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-main {
  min-height: calc(100dvh - 88px);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-topbar {
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(15, 20, 31, 0.72), rgba(10, 14, 23, 0.82));
}

body[data-page="app"][data-app-mode="desktop"] .desktop-topbar-nav {
  gap: 8px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-topbar .btn.ghost {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 12px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-stage {
  width: 300px;
  top: 22px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-stage-head {
  padding-bottom: 12px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-stage-head h3 {
  font-size: 1rem;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-grid {
  grid-template-columns: repeat(2, minmax(118px, 1fr));
  gap: 26px 14px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card {
  min-height: 154px;
  align-content: start;
  gap: 6px;
  padding-top: 2px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card::before,
body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card::after {
  left: 50%;
  transform: translateX(-50%);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card::before {
  width: 92px;
  height: 66px;
  top: 17px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(151, 156, 164, 0.92), rgba(92, 98, 109, 0.86));
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card::after {
  width: 98px;
  height: 70px;
  top: 15px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(210, 214, 220, 0.92), rgba(138, 144, 153, 0.88));
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-icon {
  width: 116px;
  height: 82px;
  margin-top: 24px;
  border-radius: 24px 24px 18px 18px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 248, 214, 0.44), transparent 26%),
    linear-gradient(180deg, #f1c663 0%, #df9d2f 58%, #b56f12 100%);
  box-shadow:
    inset 0 18px 28px rgba(255, 228, 161, 0.28),
    inset 0 -16px 24px rgba(141, 82, 10, 0.22),
    0 12px 24px rgba(0, 0, 0, 0.16);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-icon::before {
  width: 46px;
  height: 14px;
  bottom: calc(100% - 7px);
  border-radius: 16px 16px 0 0;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card strong,
body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card small,
body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card .desktop-folder-detail {
  position: relative;
  z-index: 2;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card strong {
  margin-top: 8px;
  font-size: 0.98rem;
  text-align: center;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card small {
  max-width: 14ch;
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.25;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card .desktop-folder-detail {
  display: none;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card:hover,
body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card:focus-visible,
body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card.is-active {
  transform: translateY(-3px) scale(1.012);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-workspace-grid {
  grid-template-columns: minmax(0, 1fr) 286px;
  gap: 18px;
  width: min(1340px, calc(100% - 24px));
  margin-top: 20px;
  padding-left: clamp(164px, 16vw, 228px);
  transform: translateX(-18px);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-shell {
  min-height: calc(100dvh - 170px);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(18, 25, 38, 0.86), rgba(10, 14, 22, 0.9));
  box-shadow:
    0 28px 68px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(24px) saturate(136%);
  -webkit-backdrop-filter: blur(24px) saturate(136%);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-head {
  padding: 14px 16px 12px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-head > div:first-child {
  padding-left: 58px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-head h3 {
  font-size: clamp(1.34rem, 1.9vw, 1.7rem);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-head p {
  font-size: 0.88rem;
  max-width: 62ch;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-search {
  min-width: 284px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-search input {
  min-height: 48px;
  border-radius: 16px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-grouping {
  padding: 5px;
  border-radius: 14px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-grouping .btn.ghost {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 12px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-body {
  height: calc(100dvh - 266px);
  min-height: 480px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-list-panel {
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-inspector-toolbar {
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.018);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-inspector-toolbar .btn {
  min-height: 38px;
  border-radius: 12px;
  padding: 0 12px;
  font-size: 12px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-list,
body[data-page="app"][data-app-mode="desktop"] .desktop-inspector {
  padding: 16px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-item-card,
body[data-page="app"][data-app-mode="desktop"] .desktop-media-card,
body[data-page="app"][data-app-mode="desktop"] .desktop-linked-row.is-static {
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.012));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 24px rgba(0, 0, 0, 0.1);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-item-card {
  padding: 14px 15px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-item-card:hover,
body[data-page="app"][data-app-mode="desktop"] .desktop-item-card:focus-visible,
body[data-page="app"][data-app-mode="desktop"] .desktop-item-card.is-active {
  transform: translateY(-1px);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-command-deck {
  margin-top: 26px;
  padding: 14px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(19, 27, 41, 0.72), rgba(11, 15, 24, 0.78));
}

body[data-page="app"][data-app-mode="desktop"] .desktop-command-head {
  gap: 8px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-command-state {
  display: none;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-grid {
  gap: 8px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-card {
  min-height: 86px;
  border-radius: 16px;
  padding: 14px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-inline-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-inline-note {
  color: rgba(191, 204, 223, 0.72);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-copy-block.compact {
  margin-top: 2px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-chart-surface {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: linear-gradient(180deg, rgba(6, 11, 19, 0.62), rgba(12, 18, 29, 0.76));
  padding: 14px 12px 10px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-chart-bars {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  min-height: 190px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-chart-bar-group {
  display: grid;
  gap: 8px;
  justify-items: center;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-chart-bars-stack {
  min-height: 132px;
  width: 100%;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 6px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-chart-bar {
  width: min(22px, 100%);
  border-radius: 999px 999px 8px 8px;
  display: block;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-chart-bar.is-paid {
  background: linear-gradient(180deg, rgba(74, 222, 128, 0.95), rgba(21, 128, 61, 0.86));
}

body[data-page="app"][data-app-mode="desktop"] .desktop-chart-bar.is-open {
  background: linear-gradient(180deg, rgba(250, 204, 21, 0.95), rgba(202, 138, 4, 0.88));
}

body[data-page="app"][data-app-mode="desktop"] .desktop-chart-bar.is-gross {
  background: linear-gradient(180deg, rgba(74, 222, 128, 0.95), rgba(21, 128, 61, 0.86));
}

body[data-page="app"][data-app-mode="desktop"] .desktop-chart-bar.is-retained {
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.96), rgba(37, 99, 235, 0.88));
}

body[data-page="app"][data-app-mode="desktop"] .desktop-chart-bar.is-retained-negative {
  background: linear-gradient(180deg, rgba(248, 113, 113, 0.95), rgba(220, 38, 38, 0.9));
}

body[data-page="app"][data-app-mode="desktop"] .desktop-chart-bar-group strong {
  color: #f8fafc;
  font-size: 12px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-chart-bar-group small {
  color: rgba(196, 209, 228, 0.72);
  font-size: 11px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-payout-row {
  align-items: center;
  gap: 12px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-payout-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-expense-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-form-field {
  display: grid;
  gap: 7px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-form-field span {
  color: var(--desktop-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-form-field input,
body[data-page="app"][data-app-mode="desktop"] .desktop-form-field textarea {
  width: 100%;
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(180deg, rgba(7, 12, 20, 0.82), rgba(11, 16, 27, 0.92));
  color: rgba(244, 248, 255, 0.96);
  padding: 0 14px;
  box-sizing: border-box;
  outline: none;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-form-field textarea {
  min-height: 86px;
  resize: vertical;
  padding: 12px 14px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-form-field .desktop-form-hint {
  margin-top: -2px;
  color: rgba(191, 204, 223, 0.62);
  font-size: 0.72rem;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0.01em;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-form-field input[data-invalid="true"] {
  border-color: rgba(245, 113, 113, 0.72);
  box-shadow: 0 0 0 1px rgba(245, 113, 113, 0.18);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-form-field input:focus,
body[data-page="app"][data-app-mode="desktop"] .desktop-form-field textarea:focus {
  border-color: rgba(143, 215, 255, 0.22);
  box-shadow:
    0 0 0 1px rgba(143, 215, 255, 0.1),
    0 10px 24px rgba(4, 8, 16, 0.14);
  transform: translateY(-1px);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-form-field-wide,
body[data-page="app"][data-app-mode="desktop"] .desktop-form-actions {
  grid-column: 1 / -1;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-expense-row {
  align-items: center;
  gap: 12px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-payout-actions strong {
  color: #f8fafc;
  font-size: 13px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-topbar {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-topbar-brand-shell {
  justify-self: start;
  min-width: 0;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-topbar-nav {
  position: absolute;
  left: 50%;
  top: 50%;
  justify-self: auto;
  margin-inline: 0;
  transform: translate(-50%, -50%);
  z-index: 2;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-topbar-actions {
  justify-self: end;
  margin-left: auto;
}

@media (max-width: 1320px) {
  body[data-page="app"][data-app-mode="desktop"] .desktop-topbar {
    justify-items: center;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-topbar-brand-shell {
    justify-self: center;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-topbar-nav {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    justify-self: center;
    justify-content: center;
    margin-inline: auto;
    width: fit-content;
    max-width: 100%;
  }
}

body[data-page="app"][data-app-mode="desktop"] .desktop-payout-input {
  width: 110px;
  min-height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(7, 12, 20, 0.78);
  color: #f8fafc;
  padding: 0 12px;
  box-sizing: border-box;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-document-review {
  display: grid;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-document-page {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(244, 247, 251, 0.96));
  color: #142033;
  padding: 22px 22px 20px;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.12);
  display: grid;
  gap: 16px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-document-page-head {
  display: grid;
  gap: 4px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-document-page-head strong {
  font-size: 1.1rem;
  letter-spacing: -0.03em;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-document-page-head small {
  color: rgba(20, 32, 51, 0.62);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-document-page-badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(23, 64, 117, 0.08);
  color: rgba(23, 64, 117, 0.82);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-document-table-shell {
  overflow: auto;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-document-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-document-table th,
body[data-page="app"][data-app-mode="desktop"] .desktop-document-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(20, 32, 51, 0.08);
  vertical-align: top;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-document-table th {
  color: rgba(20, 32, 51, 0.6);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-document-copy {
  display: grid;
  gap: 10px;
  font-size: 13px;
  line-height: 1.6;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-document-copy p {
  margin: 0;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-document-review-empty {
  display: grid;
  gap: 8px;
  color: rgba(20, 32, 51, 0.72);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-document-review-empty.compact {
  gap: 4px;
}

@media (max-width: 1480px) {
  body[data-page="app"][data-app-mode="desktop"] .desktop-workspace-grid {
    grid-template-columns: minmax(0, 1fr) 268px;
    padding-left: clamp(136px, 14vw, 194px);
  }
}

@media (max-width: 1220px) {
  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-stage {
    width: auto;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-grid {
    grid-template-columns: repeat(3, minmax(112px, 1fr));
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-workspace-grid {
    transform: none;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-command-deck {
    margin-top: 0;
  }
}

@media (max-width: 860px) {
  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-grid,
  body[data-page="app"][data-app-mode="desktop"] .desktop-detail-grid,
  body[data-page="app"][data-app-mode="desktop"] .desktop-chart-bars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-chart-bars {
    min-height: 0;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-expense-form {
    grid-template-columns: 1fr;
  }
}

body[data-page="app"][data-app-mode="desktop"] .desktop-main {
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  overflow: visible;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-stage {
  position: relative;
  left: auto;
  top: auto;
  bottom: auto;
  width: auto;
  z-index: 1;
  padding: 4px 0 0;
  opacity: 1;
  filter: none;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-stage::before {
  display: none;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-grid {
  overflow: visible;
  padding: 0 2px 0 0;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card {
  pointer-events: auto;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-workspace-grid {
  position: relative;
  z-index: 2;
  grid-template-columns: minmax(0, 1fr) 280px;
  width: 100%;
  margin: 0;
  padding-left: 0;
  transform: none;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-shell {
  min-height: calc(100dvh - 156px);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-command-deck {
  margin-top: 0;
}

@media (max-width: 1220px) {
  body[data-page="app"][data-app-mode="desktop"] .desktop-main {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-stage {
    padding-top: 0;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-workspace-grid {
    grid-template-columns: 1fr;
  }
}

/* Workspace Admin */
body[data-page="app"][data-app-mode="main"] .main-shell[data-project-view="admin"] {
  min-height: 100vh;
}

body[data-page="app"][data-app-mode="main"] .main-admin-view {
  padding-top: 8px;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-shell {
  display: grid;
  grid-template-columns: minmax(318px, 376px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-sidebar,
body[data-page="app"][data-app-mode="main"] .workspace-admin-stage {
  min-width: 0;
  display: grid;
  gap: 18px;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-sidebar {
  position: sticky;
  top: 12px;
  align-self: start;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-sidebar-head,
body[data-page="app"][data-app-mode="main"] .workspace-admin-stage-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-sidebar-head h2,
body[data-page="app"][data-app-mode="main"] .workspace-admin-stage-head h2 {
  margin: 4px 0 0;
  font-size: 28px;
  line-height: 1.08;
  color: #f8fbff;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-kicker {
  margin: 0;
  color: #8be9dc;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-detail-subcopy {
  margin: 8px 0 0;
  max-width: 760px;
  color: #90a4bf;
  font-size: 14px;
  line-height: 1.55;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-kpi,
body[data-page="app"][data-app-mode="main"] .workspace-admin-card,
body[data-page="app"][data-app-mode="main"] .workspace-admin-user-row,
body[data-page="app"][data-app-mode="main"] .workspace-admin-summary-item,
body[data-page="app"][data-app-mode="main"] .workspace-admin-snapshot-item,
body[data-page="app"][data-app-mode="main"] .workspace-admin-audit-item,
body[data-page="app"][data-app-mode="main"] .workspace-admin-secret-board,
body[data-page="app"][data-app-mode="main"] .workspace-admin-raw {
  border-radius: 22px;
  border: 1px solid rgba(120, 154, 190, 0.18);
  background:
    radial-gradient(circle at 100% 0%, rgba(56, 189, 248, 0.12), transparent 38%),
    linear-gradient(150deg, rgba(13, 20, 33, 0.96), rgba(19, 30, 48, 0.92));
  box-shadow: 0 24px 54px -42px rgba(15, 23, 42, 0.88);
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-kpi {
  padding: 14px 16px;
  display: grid;
  gap: 7px;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-kpi span,
body[data-page="app"][data-app-mode="main"] .workspace-admin-mini {
  color: #88a0bb;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-kpi strong {
  color: #f8fbff;
  font-size: 28px;
  line-height: 1;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-card {
  padding: 18px;
  display: grid;
  gap: 16px;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-card-head h3 {
  margin: 0;
  color: #f3f8ff;
  font-size: 18px;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-create-form,
body[data-page="app"][data-app-mode="main"] .workspace-admin-detail-form {
  display: grid;
  gap: 12px;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-create-form label,
body[data-page="app"][data-app-mode="main"] .workspace-admin-detail-form label,
body[data-page="app"][data-app-mode="main"] .workspace-admin-search {
  display: grid;
  gap: 8px;
  color: #d5e2f1;
  font-size: 13px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-create-form input,
body[data-page="app"][data-app-mode="main"] .workspace-admin-create-form select,
body[data-page="app"][data-app-mode="main"] .workspace-admin-detail-form input,
body[data-page="app"][data-app-mode="main"] .workspace-admin-detail-form select,
body[data-page="app"][data-app-mode="main"] .workspace-admin-search input {
  min-height: 48px;
  width: 100%;
  padding: 0 15px;
  border-radius: 14px;
  border: 1px solid rgba(125, 153, 182, 0.26);
  background: rgba(7, 13, 23, 0.88);
  color: #f8fbff;
  font-size: 14px;
  font-weight: 700;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-create-form input::placeholder,
body[data-page="app"][data-app-mode="main"] .workspace-admin-detail-form input::placeholder,
body[data-page="app"][data-app-mode="main"] .workspace-admin-search input::placeholder {
  color: rgba(144, 164, 191, 0.78);
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-create-form input:focus,
body[data-page="app"][data-app-mode="main"] .workspace-admin-create-form select:focus,
body[data-page="app"][data-app-mode="main"] .workspace-admin-detail-form input:focus,
body[data-page="app"][data-app-mode="main"] .workspace-admin-detail-form select:focus,
body[data-page="app"][data-app-mode="main"] .workspace-admin-search input:focus {
  outline: none;
  border-color: rgba(94, 234, 212, 0.58);
  box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.12);
  background: rgba(8, 16, 28, 0.95);
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-inline-status {
  min-height: 18px;
  margin: -2px 0 0;
  color: #9dd7cd;
  font-size: 13px;
  line-height: 1.4;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-inline-status[data-state="error"] {
  color: #fca5a5;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-inline-status[data-state="saved"] {
  color: #86efac;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-secret-board {
  margin: 0;
  min-height: 132px;
  padding: 15px 16px;
  overflow: auto;
  color: #cae5ff;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-user-list,
body[data-page="app"][data-app-mode="main"] .workspace-admin-audit-list {
  display: grid;
  gap: 10px;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-user-list {
  max-height: 520px;
  overflow: auto;
  padding-right: 2px;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-user-row {
  width: 100%;
  padding: 14px 16px;
  display: grid;
  gap: 10px;
  text-align: left;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-user-row:hover {
  transform: translateY(-1px);
  border-color: rgba(94, 234, 212, 0.34);
  box-shadow: 0 22px 42px -38px rgba(45, 212, 191, 0.8);
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-user-row.is-active {
  border-color: rgba(94, 234, 212, 0.54);
  background:
    radial-gradient(circle at 100% 0%, rgba(45, 212, 191, 0.12), transparent 34%),
    linear-gradient(150deg, rgba(9, 18, 31, 0.96), rgba(19, 37, 57, 0.94));
  box-shadow: 0 26px 48px -40px rgba(45, 212, 191, 0.98);
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-user-row-main,
body[data-page="app"][data-app-mode="main"] .workspace-admin-user-row-meta,
body[data-page="app"][data-app-mode="main"] .workspace-admin-user-row-foot,
body[data-page="app"][data-app-mode="main"] .workspace-admin-detail-chips,
body[data-page="app"][data-app-mode="main"] .workspace-admin-action-row,
body[data-page="app"][data-app-mode="main"] .workspace-admin-action-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-user-row-main {
  justify-content: space-between;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-user-row-main strong {
  color: #f8fbff;
  font-size: 15px;
  line-height: 1.3;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-user-row-main span,
body[data-page="app"][data-app-mode="main"] .workspace-admin-user-row-foot span {
  color: #93abc3;
  font-size: 12px;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(125, 153, 182, 0.24);
  background: rgba(20, 30, 45, 0.8);
  color: #d9e8f8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-pill-active,
body[data-page="app"][data-app-mode="main"] .workspace-admin-pill-online {
  border-color: rgba(74, 222, 128, 0.38);
  background: rgba(21, 128, 61, 0.2);
  color: #bbf7d0;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-pill-disabled {
  border-color: rgba(248, 113, 113, 0.34);
  background: rgba(127, 29, 29, 0.24);
  color: #fecaca;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-pill-pending_activation {
  border-color: rgba(125, 211, 252, 0.34);
  background: rgba(14, 116, 144, 0.24);
  color: #bae6fd;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-pill-rank {
  border-color: rgba(129, 140, 248, 0.28);
  background: rgba(67, 56, 202, 0.2);
  color: #c7d2fe;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-pill-primary {
  border-color: rgba(251, 191, 36, 0.34);
  background: rgba(133, 77, 14, 0.24);
  color: #fde68a;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-live-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.62);
  box-shadow: 0 0 0 0 rgba(148, 163, 184, 0);
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-live-dot.is-live {
  background: #34d399;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.48);
  animation: livePulse 1.4s ease-out infinite;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-stage {
  gap: 16px;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-stage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-stage-grid-bottom .workspace-admin-card:first-child {
  min-width: 0;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-summary-grid,
body[data-page="app"][data-app-mode="main"] .workspace-admin-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-summary-item,
body[data-page="app"][data-app-mode="main"] .workspace-admin-snapshot-item {
  padding: 14px 15px;
  display: grid;
  gap: 7px;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-summary-item span,
body[data-page="app"][data-app-mode="main"] .workspace-admin-snapshot-item span {
  color: #91a7c1;
  font-size: 12px;
  line-height: 1.4;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-summary-item strong,
body[data-page="app"][data-app-mode="main"] .workspace-admin-snapshot-item strong {
  color: #f8fbff;
  font-size: 15px;
  line-height: 1.35;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-action-grid {
  align-items: stretch;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-action-grid .btn,
body[data-page="app"][data-app-mode="main"] .workspace-admin-action-row .btn {
  flex: 1 1 180px;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-empty {
  padding: 18px;
  border-radius: 18px;
  border: 1px dashed rgba(125, 153, 182, 0.26);
  background: rgba(10, 15, 25, 0.5);
  color: #8ca2bb;
  font-size: 13px;
  line-height: 1.6;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-raw {
  padding: 0;
  overflow: hidden;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-raw summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 16px;
  color: #dce9f8;
  font-size: 13px;
  font-weight: 700;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-raw summary::-webkit-details-marker {
  display: none;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-raw pre {
  margin: 0;
  padding: 0 16px 16px;
  max-height: 380px;
  overflow: auto;
  color: #b9d6ef;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-audit-item {
  padding: 14px 15px;
  display: grid;
  gap: 5px;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-audit-item strong {
  color: #f5f8fd;
  font-size: 14px;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-audit-item span {
  color: #9eb3c8;
  font-size: 13px;
  line-height: 1.5;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-audit-item small {
  color: #7f94ad;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-create .btn.primary,
body[data-page="app"][data-app-mode="main"] .workspace-admin-detail-form .btn.primary {
  min-height: 48px;
}

body[data-page="app"][data-app-mode="main"] .workspace-admin-stage-head .workspace-admin-detail-chips {
  justify-content: flex-end;
}

.account-lock-body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 0%, rgba(45, 212, 191, 0.12), transparent 36%),
    radial-gradient(circle at 90% 4%, rgba(56, 189, 248, 0.12), transparent 34%),
    linear-gradient(180deg, #0c1320 0%, #070c14 100%);
  color: #e2e8f0;
}

.account-lock-shell {
  min-height: 100vh;
  padding: 32px 18px;
  display: grid;
  place-items: center;
}

.account-lock-card {
  width: min(620px, 100%);
  padding: 34px 30px;
  border-radius: 30px;
  border: 1px solid rgba(125, 153, 182, 0.24);
  background:
    radial-gradient(circle at 100% 0%, rgba(45, 212, 191, 0.12), transparent 36%),
    linear-gradient(155deg, rgba(12, 19, 32, 0.96), rgba(17, 28, 45, 0.92));
  box-shadow: 0 34px 70px -46px rgba(8, 15, 28, 0.95);
  display: grid;
  gap: 18px;
}

.account-lock-eyebrow {
  margin: 0;
  color: #8be9dc;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.account-lock-card h1 {
  margin: 0;
  color: #f8fbff;
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1.04;
}

.account-lock-copy,
.account-lock-note {
  margin: 0;
  color: #9db2c8;
  font-size: 15px;
  line-height: 1.7;
}

.account-lock-meta,
.account-lock-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.account-lock-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(125, 153, 182, 0.26);
  background: rgba(15, 23, 42, 0.72);
  color: #d7e4f2;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.account-lock-actions .btn {
  flex: 1 1 220px;
  min-height: 50px;
}

@media (max-width: 1260px) {
  body[data-page="app"][data-app-mode="main"] .workspace-admin-shell {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="main"] .workspace-admin-sidebar {
    position: static;
  }
}

@media (max-width: 1040px) {
  body[data-page="app"][data-app-mode="main"] .workspace-admin-stage-grid,
  body[data-page="app"][data-app-mode="main"] .workspace-admin-summary-grid,
  body[data-page="app"][data-app-mode="main"] .workspace-admin-snapshot-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="main"] .workspace-admin-stage-head {
    display: grid;
  }

  body[data-page="app"][data-app-mode="main"] .workspace-admin-stage-head .workspace-admin-detail-chips {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  body[data-page="app"][data-app-mode="main"] .workspace-admin-kpis {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="main"] .workspace-admin-card,
  .account-lock-card {
    padding: 16px;
    border-radius: 20px;
  }

  body[data-page="app"][data-app-mode="main"] .workspace-admin-sidebar-head h2,
  body[data-page="app"][data-app-mode="main"] .workspace-admin-stage-head h2 {
    font-size: 23px;
  }
}

body[data-page="worker"] #worker-panel-active-order {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="worker"] .worker-active-order-layout {
  display: grid;
  grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

body[data-page="worker"] .worker-active-order-sidebar,
body[data-page="worker"] .worker-active-order-stage,
body[data-page="worker"] .worker-active-order-shell,
body[data-page="worker"] .worker-active-order-body {
  min-width: 0;
}

body[data-page="worker"] .worker-active-order-card,
body[data-page="worker"] .worker-active-order-shell,
body[data-page="app"][data-app-mode="workers"] .team-active-order-card,
body[data-page="app"][data-app-mode="workers"] .team-active-orders-shell {
  border: 1px solid rgba(70, 122, 168, 0.16);
  background:
    radial-gradient(circle at top right, rgba(82, 150, 223, 0.12), transparent 40%),
    rgba(244, 248, 252, 0.88);
  border-radius: 28px;
  box-shadow: 0 28px 60px rgba(31, 55, 83, 0.12);
  padding: 24px;
}

body[data-page="worker"][data-theme="dark"] .worker-active-order-card,
body[data-page="worker"][data-theme="dark"] .worker-active-order-shell,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-active-order-card,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-active-orders-shell {
  background:
    radial-gradient(circle at top right, rgba(82, 150, 223, 0.16), transparent 42%),
    rgba(12, 20, 34, 0.9);
  border-color: rgba(118, 170, 220, 0.14);
  box-shadow: 0 26px 72px rgba(2, 10, 24, 0.44);
}

body[data-page="worker"] .worker-active-order-card-head,
body[data-page="worker"] .worker-active-order-section-head,
body[data-page="app"][data-app-mode="workers"] .team-active-order-card-head,
body[data-page="app"][data-app-mode="workers"] .team-active-orders-head,
body[data-page="app"][data-app-mode="workers"] .team-active-order-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

body[data-page="worker"] .worker-active-order-card-head > div,
body[data-page="worker"] .worker-active-order-hero-copy,
body[data-page="worker"] .worker-active-order-section-head > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

body[data-page="worker"] .worker-active-order-card-head strong,
body[data-page="worker"] .worker-active-order-section-head strong {
  font-size: clamp(1.18rem, 1.8vw, 1.5rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

body[data-page="worker"] .worker-active-order-meta,
body[data-page="worker"] .worker-active-order-card-head span,
body[data-page="worker"] .worker-active-order-section-head span,
body[data-page="app"][data-app-mode="workers"] .team-active-order-card-head p,
body[data-page="app"][data-app-mode="workers"] .team-active-orders-head span,
body[data-page="app"][data-app-mode="workers"] .team-active-order-section-head span {
  color: rgba(57, 78, 102, 0.78);
}

body[data-page="worker"][data-theme="dark"] .worker-active-order-meta,
body[data-page="worker"][data-theme="dark"] .worker-active-order-card-head span,
body[data-page="worker"][data-theme="dark"] .worker-active-order-section-head span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-active-order-card-head p,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-active-orders-head span,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-active-order-section-head span {
  color: rgba(201, 217, 236, 0.72);
}

body[data-page="worker"] .worker-active-order-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid rgba(91, 140, 184, 0.14);
  background: rgba(255, 255, 255, 0.62);
  font-weight: 700;
  line-height: 1.1;
}

body[data-page="worker"][data-theme="dark"] .worker-active-order-meta {
  background: rgba(15, 26, 40, 0.84);
  border-color: rgba(116, 167, 215, 0.16);
}

body[data-page="worker"] .worker-active-order-list,
body[data-page="worker"] .worker-active-order-progress-list,
body[data-page="worker"] .worker-active-order-line-list,
body[data-page="app"][data-app-mode="workers"] .team-active-order-item-list,
body[data-page="app"][data-app-mode="workers"] .team-active-order-day-list,
body[data-page="app"][data-app-mode="workers"] .team-active-orders-board {
  display: grid;
  gap: 12px;
}

body[data-page="worker"] .worker-active-order-list-item,
body[data-page="worker"] .worker-active-order-progress-item,
body[data-page="worker"] .worker-active-order-line-card,
body[data-page="worker"] .worker-active-order-time-row,
body[data-page="app"][data-app-mode="workers"] .team-active-order-item,
body[data-page="app"][data-app-mode="workers"] .team-active-order-day {
  border: 1px solid rgba(89, 132, 170, 0.16);
  background: rgba(255, 255, 255, 0.68);
  border-radius: 22px;
  padding: 14px 16px;
}

body[data-page="worker"][data-theme="dark"] .worker-active-order-list-item,
body[data-page="worker"][data-theme="dark"] .worker-active-order-progress-item,
body[data-page="worker"][data-theme="dark"] .worker-active-order-line-card,
body[data-page="worker"][data-theme="dark"] .worker-active-order-time-row,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-active-order-item,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-active-order-day {
  background: rgba(16, 28, 44, 0.84);
  border-color: rgba(119, 163, 205, 0.16);
}

body[data-page="worker"] .worker-active-order-list-item {
  text-align: left;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

body[data-page="worker"] .worker-active-order-list-item p,
body[data-page="worker"] .worker-active-order-list-item small {
  display: block;
  margin: 0;
}

body[data-page="worker"] .worker-active-order-list-item p {
  color: rgba(44, 63, 85, 0.78);
  font-weight: 600;
}

body[data-page="worker"] .worker-active-order-list-item small {
  margin-top: 6px;
  color: rgba(80, 102, 128, 0.78);
}

body[data-page="worker"][data-theme="dark"] .worker-active-order-list-item p {
  color: rgba(229, 238, 248, 0.88);
}

body[data-page="worker"][data-theme="dark"] .worker-active-order-list-item small {
  color: rgba(174, 197, 222, 0.72);
}

body[data-page="worker"] .worker-active-order-list-item.is-active,
body[data-page="worker"] .worker-active-order-list-item:hover {
  transform: translateY(-2px);
  border-color: rgba(70, 146, 215, 0.46);
  box-shadow: 0 18px 36px rgba(43, 86, 126, 0.16);
}

body[data-page="worker"] .worker-active-order-hero {
  margin-bottom: 20px;
  padding: 28px 28px 24px;
  border-radius: 30px;
  background:
    radial-gradient(circle at top left, rgba(73, 152, 229, 0.2), transparent 36%),
    linear-gradient(135deg, rgba(16, 53, 87, 0.96), rgba(12, 23, 38, 0.96));
  color: #f3f8ff;
  box-shadow: 0 28px 60px rgba(7, 20, 37, 0.28);
}

body[data-page="worker"] .worker-active-order-hero-copy h3 {
  margin: 0;
  font-size: clamp(2rem, 3.2vw, 2.95rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

body[data-page="worker"] .worker-active-order-hero-copy > p {
  margin: 0;
  max-width: 52ch;
  font-size: 1.14rem;
  line-height: 1.5;
  color: rgba(233, 244, 255, 0.86);
}

body[data-page="worker"] .worker-active-order-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body[data-page="worker"] .worker-active-order-hero-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(232, 243, 252, 0.82);
}

body[data-page="worker"] .worker-active-order-kicker-row,
body[data-page="worker"] .worker-active-order-list-top,
body[data-page="worker"] .worker-active-order-progress-top,
body[data-page="app"][data-app-mode="workers"] .team-active-order-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body[data-page="worker"] .worker-active-order-hero-facts,
body[data-page="worker"] .worker-active-order-facts,
body[data-page="worker"] .worker-active-order-line-fields,
body[data-page="worker"] .worker-active-order-grid,
body[data-page="app"][data-app-mode="workers"] .team-active-order-metrics,
body[data-page="app"][data-app-mode="workers"] .team-active-order-grid,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-metrics,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-pickers {
  display: grid;
  gap: 14px;
}

body[data-page="worker"] .worker-active-order-hero-facts,
body[data-page="worker"] .worker-active-order-facts,
body[data-page="app"][data-app-mode="workers"] .team-active-order-metrics,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 18px;
}

body[data-page="worker"] .worker-active-order-grid {
  grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.96fr);
  align-items: start;
}

body[data-page="worker"] .worker-active-order-grid > *,
body[data-page="worker"] .worker-active-order-day-form,
body[data-page="worker"] .worker-active-order-table-wrap {
  min-width: 0;
}

body[data-page="worker"] .worker-active-order-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

body[data-page="worker"] .worker-active-order-hero-facts article,
body[data-page="worker"] .worker-active-order-facts article,
body[data-page="app"][data-app-mode="workers"] .team-active-order-metrics article,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-metrics article {
  border-radius: 20px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.08);
}

body[data-page="worker"] .worker-active-order-hero-facts article,
body[data-page="worker"] .worker-active-order-facts article {
  display: grid;
  gap: 8px;
  align-content: start;
}

body[data-page="worker"] .worker-active-order-facts article {
  padding: 18px 16px;
  border: 1px solid rgba(87, 132, 173, 0.14);
  background: rgba(255, 255, 255, 0.68);
}

body[data-page="worker"][data-theme="dark"] .worker-active-order-facts article {
  border-color: rgba(111, 162, 210, 0.14);
  background: rgba(13, 24, 39, 0.84);
}

body[data-page="worker"] .worker-active-order-hero-facts article strong,
body[data-page="worker"] .worker-active-order-facts article strong {
  display: block;
  line-height: 1.08;
}

body[data-page="worker"] .worker-active-order-hero-facts article strong {
  font-size: clamp(1.35rem, 2vw, 1.9rem);
}

body[data-page="worker"] .worker-active-order-hero-facts article span,
body[data-page="worker"] .worker-active-order-facts article small {
  display: block;
  line-height: 1.42;
}

body[data-page="worker"] .worker-active-order-hero-facts article span {
  color: rgba(234, 244, 255, 0.82);
}

body[data-page="worker"] .worker-active-order-facts article small {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(72, 94, 120, 0.72);
}

body[data-page="worker"] .worker-active-order-facts article strong {
  font-size: clamp(1rem, 1.45vw, 1.18rem);
  line-height: 1.38;
  overflow-wrap: anywhere;
  color: #122133;
}

body[data-page="worker"][data-theme="dark"] .worker-active-order-facts article small {
  color: rgba(181, 203, 226, 0.68);
}

body[data-page="worker"][data-theme="dark"] .worker-active-order-facts article strong {
  color: rgba(242, 248, 255, 0.96);
}

body[data-page="worker"] .worker-active-order-progress-bar {
  overflow: hidden;
  height: 9px;
  border-radius: 999px;
  background: rgba(86, 120, 153, 0.16);
  margin: 10px 0 8px;
}

body[data-page="worker"] .worker-active-order-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4ec1ff, #9bf0ff);
}

body[data-page="worker"] .worker-active-order-progress-item {
  display: grid;
  gap: 12px;
}

body[data-page="worker"] .worker-active-order-progress-top strong,
body[data-page="worker"] .worker-active-order-progress-top span {
  display: block;
}

body[data-page="worker"] .worker-active-order-progress-top span {
  text-align: right;
  color: rgba(56, 78, 103, 0.82);
}

body[data-page="worker"][data-theme="dark"] .worker-active-order-progress-top span {
  color: rgba(203, 219, 238, 0.76);
}

body[data-page="worker"] .worker-active-order-section,
body[data-page="app"][data-app-mode="workers"] .team-active-order-section {
  border: 1px solid rgba(89, 132, 170, 0.14);
  border-radius: 24px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.56);
}

body[data-page="worker"] .worker-active-order-section {
  display: grid;
  gap: 16px;
  align-content: start;
}

body[data-page="worker"][data-theme="dark"] .worker-active-order-section,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-active-order-section {
  background: rgba(10, 18, 30, 0.72);
  border-color: rgba(114, 155, 194, 0.14);
}

body[data-page="app"][data-app-mode="workers"] .team-active-order-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-page="worker"] .worker-active-order-section-wide {
  grid-column: 1 / -1;
}

body[data-page="worker"] .worker-active-order-line-fields,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-page="worker"] .worker-active-order-line-notes,
body[data-page="worker"] .worker-active-order-day-note,
body[data-page="app"][data-app-mode="desktop"] .desktop-form-field-wide {
  grid-column: 1 / -1;
}

body[data-page="worker"] .worker-active-order-line-fields label,
body[data-page="worker"] .worker-active-order-day-note,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-form label {
  display: grid;
  gap: 8px;
}

body[data-page="worker"] .worker-active-order-line-fields input,
body[data-page="worker"] .worker-active-order-table-input input,
body[data-page="worker"] .worker-active-order-day-note textarea,
body[data-page="worker"] .worker-active-order-time-row input,
body[data-page="worker"] .worker-active-order-time-row select,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-form input,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-form textarea,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-form select {
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(90, 132, 170, 0.2);
  background: rgba(255, 255, 255, 0.8);
  padding: 12px 14px;
}

body[data-page="worker"][data-theme="dark"] .worker-active-order-line-fields input,
body[data-page="worker"][data-theme="dark"] .worker-active-order-table-input input,
body[data-page="worker"][data-theme="dark"] .worker-active-order-day-note textarea,
body[data-page="worker"][data-theme="dark"] .worker-active-order-time-row input,
body[data-page="worker"][data-theme="dark"] .worker-active-order-time-row select,
body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-active-order-form input,
body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-active-order-form textarea,
body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-active-order-form select {
  background: rgba(11, 20, 34, 0.92);
  border-color: rgba(112, 151, 188, 0.18);
  color: inherit;
}

body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-form-field .desktop-form-hint {
  color: rgba(193, 214, 235, 0.62);
}

body[data-page="worker"] .worker-active-order-line-tools,
body[data-page="worker"] .worker-active-order-timer-row,
body[data-page="worker"] .worker-active-order-form-actions,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-form .desktop-inline-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

body[data-page="worker"] .worker-active-order-section-head .worker-panel-head-actions {
  margin-left: auto;
}

body[data-page="worker"] .worker-active-order-timer-row {
  justify-content: flex-start;
}

body[data-page="worker"] .worker-active-order-live-chip {
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(58, 87, 113, 0.14);
  margin-left: auto;
  max-width: 100%;
}

body[data-page="worker"] .worker-active-order-live-chip.is-live {
  background: rgba(72, 198, 255, 0.18);
  color: #7be7ff;
}

body[data-page="worker"] .worker-active-order-photo-strip {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

body[data-page="worker"] .worker-active-order-photo {
  width: 102px;
  display: grid;
  gap: 8px;
}

body[data-page="worker"] .worker-active-order-photo img,
body[data-page="worker"] .worker-active-order-photo video,
body[data-page="worker"] .worker-active-order-photo-fallback {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 18px;
  object-fit: cover;
  background: rgba(80, 112, 146, 0.16);
}

body[data-page="worker"] .worker-active-order-time-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

body[data-page="worker"] .worker-active-order-time-row {
  display: grid;
  grid-template-columns: 140px 1fr 1fr auto;
  align-items: center;
  gap: 10px;
}

body[data-page="app"][data-app-mode="workers"] .team-active-order-item,
body[data-page="app"][data-app-mode="workers"] .team-active-order-day {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-form {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-pickers {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-picker {
  border: 1px solid rgba(89, 132, 170, 0.14);
  border-radius: 22px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.54);
}

body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-active-order-picker {
  background: rgba(10, 18, 30, 0.72);
  border-color: rgba(114, 155, 194, 0.14);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-picker-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-picker-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.68);
}

body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-picker-row {
  background: rgba(14, 24, 38, 0.84);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(300px, 0.92fr);
  align-items: end;
  gap: 20px;
  margin-bottom: 18px;
  padding: 24px;
  border-radius: 28px;
  border: 1px solid rgba(79, 136, 190, 0.16);
  background:
    radial-gradient(circle at top left, rgba(84, 182, 255, 0.16), transparent 36%),
    linear-gradient(145deg, rgba(246, 250, 255, 0.96), rgba(228, 238, 248, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-active-order-hero-panel {
  border-color: rgba(105, 161, 214, 0.2);
  background:
    radial-gradient(circle at top left, rgba(79, 195, 255, 0.2), transparent 34%),
    radial-gradient(circle at bottom right, rgba(31, 92, 148, 0.24), transparent 40%),
    linear-gradient(145deg, rgba(10, 18, 31, 0.98), rgba(14, 24, 41, 0.96));
  box-shadow: 0 30px 80px rgba(2, 10, 24, 0.4), inset 0 1px 0 rgba(193, 225, 255, 0.08);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-hero-copy {
  display: grid;
  gap: 14px;
  align-content: end;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-hero-copy .desktop-copy-block {
  max-width: 58ch;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-signal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-signal-grid article,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-journal-card {
  border-radius: 22px;
  padding: 16px 18px;
  border: 1px solid rgba(92, 137, 176, 0.16);
  background: rgba(255, 255, 255, 0.66);
}

body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-active-order-signal-grid article,
body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-active-order-journal-card {
  border-color: rgba(108, 157, 207, 0.16);
  background: rgba(8, 16, 28, 0.82);
  box-shadow: inset 0 1px 0 rgba(173, 219, 255, 0.04);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-signal-grid article strong {
  display: block;
  font-size: 1.18rem;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-signal-grid article span {
  display: block;
  margin-top: 6px;
  color: rgba(61, 83, 108, 0.78);
}

body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-active-order-signal-grid article span {
  color: rgba(193, 215, 239, 0.72);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-shell,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-overview {
  display: grid;
  gap: 18px;
  padding: 22px;
  border-radius: 28px;
  border: 1px solid rgba(92, 137, 176, 0.16);
  background:
    radial-gradient(circle at top left, rgba(119, 193, 245, 0.12), transparent 36%),
    linear-gradient(145deg, rgba(244, 249, 255, 0.92), rgba(228, 238, 249, 0.86));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
}

body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-active-order-plan-shell,
body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-active-order-plan-overview {
  border-color: rgba(104, 162, 214, 0.18);
  background:
    radial-gradient(circle at top left, rgba(80, 192, 255, 0.16), transparent 34%),
    radial-gradient(circle at bottom right, rgba(33, 92, 148, 0.18), transparent 40%),
    linear-gradient(145deg, rgba(7, 15, 28, 0.96), rgba(11, 22, 38, 0.94));
  box-shadow: 0 24px 60px rgba(2, 9, 21, 0.24), inset 0 1px 0 rgba(176, 220, 255, 0.05);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-shell-head,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-overview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-shell-head h4,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-overview-head h4 {
  margin: 2px 0 0;
  font-size: 1.16rem;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-subsection.desktop-subsection-plain {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-band,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-grid,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-band article,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-facts article {
  border-radius: 20px;
  padding: 16px 18px;
  border: 1px solid rgba(92, 137, 176, 0.14);
  background: rgba(255, 255, 255, 0.62);
}

body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-active-order-plan-band article,
body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-active-order-plan-facts article {
  border-color: rgba(107, 155, 203, 0.14);
  background: rgba(8, 17, 30, 0.82);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-band article small,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-facts article small {
  display: block;
  margin-bottom: 8px;
  color: rgba(73, 95, 120, 0.78);
}

body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-active-order-plan-band article small,
body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-active-order-plan-facts article small {
  color: rgba(195, 216, 237, 0.68);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-band article strong,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-facts article strong {
  display: block;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-page="app"][data-app-mode="desktop"] .desktop-form-field-mega {
  grid-column: 1 / -1;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-ledger-wrap,
body[data-page="worker"] .worker-active-order-table-wrap {
  margin-top: 18px;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 22px;
  border: 1px solid rgba(92, 137, 176, 0.14);
  background: rgba(255, 255, 255, 0.52);
}

body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-active-order-ledger-wrap,
body[data-page="worker"][data-theme="dark"] .worker-active-order-table-wrap {
  border-color: rgba(108, 157, 207, 0.14);
  background: rgba(7, 15, 27, 0.84);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-ledger,
body[data-page="worker"] .worker-active-order-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-ledger th,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-ledger td,
body[data-page="worker"] .worker-active-order-table th,
body[data-page="worker"] .worker-active-order-table td {
  padding: 12px 10px;
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid rgba(91, 129, 164, 0.12);
  overflow-wrap: anywhere;
  word-break: break-word;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-ledger th,
body[data-page="worker"] .worker-active-order-table th {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(68, 91, 118, 0.82);
  background: rgba(238, 246, 255, 0.72);
}

body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-active-order-ledger th,
body[data-page="worker"][data-theme="dark"] .worker-active-order-table th {
  color: rgba(188, 212, 236, 0.76);
  background: rgba(17, 28, 45, 0.94);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-ledger tbody tr:last-child td,
body[data-page="worker"] .worker-active-order-table tbody tr:last-child td {
  border-bottom: 0;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-ledger tbody tr:hover,
body[data-page="worker"] .worker-active-order-table tbody tr:hover {
  background: rgba(111, 183, 235, 0.08);
}

body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-active-order-ledger tbody tr:hover,
body[data-page="worker"][data-theme="dark"] .worker-active-order-table tbody tr:hover {
  background: rgba(55, 117, 168, 0.12);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-ledger td strong,
body[data-page="worker"] .worker-active-order-table-cell-copy strong {
  display: block;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-ledger th:nth-child(1),
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-ledger td:nth-child(1) {
  width: 28%;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-ledger th:nth-child(2),
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-ledger td:nth-child(2),
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-ledger th:nth-child(3),
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-ledger td:nth-child(3),
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-ledger th:nth-child(4),
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-ledger td:nth-child(4) {
  width: 13%;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-ledger th:nth-child(5),
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-ledger td:nth-child(5) {
  width: 33%;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-ledger td small,
body[data-page="worker"] .worker-active-order-table-cell-copy small,
body[data-page="worker"] .worker-active-order-table-input small {
  display: block;
  margin-top: 6px;
  color: rgba(73, 95, 120, 0.76);
}

body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-active-order-ledger td small,
body[data-page="worker"][data-theme="dark"] .worker-active-order-table-cell-copy small,
body[data-page="worker"][data-theme="dark"] .worker-active-order-table-input small {
  color: rgba(194, 214, 236, 0.68);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-inline-note,
body[data-page="worker"] .worker-active-order-inline-note {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px dashed rgba(94, 144, 188, 0.28);
  background: rgba(233, 244, 255, 0.58);
  color: rgba(57, 79, 105, 0.88);
}

body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-active-order-inline-note,
body[data-page="worker"][data-theme="dark"] .worker-active-order-inline-note {
  border-color: rgba(99, 166, 219, 0.24);
  background: rgba(10, 24, 38, 0.72);
  color: rgba(214, 231, 247, 0.82);
}

body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-subsection-invoice {
  color: rgba(245, 250, 255, 0.96);
}

body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-subsection-invoice .desktop-subsection-head strong,
body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-subsection-invoice .desktop-subsection-head span,
body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-subsection-invoice .desktop-inline-actions .btn,
body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-subsection-invoice strong {
  color: rgba(245, 250, 255, 0.98);
}

body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-subsection-invoice .desktop-subsection-head span {
  color: rgba(232, 242, 252, 0.92);
}

body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-active-order-inline-note-bright {
  border-color: rgba(79, 163, 224, 0.28);
  background: linear-gradient(145deg, rgba(7, 21, 35, 0.96), rgba(11, 29, 48, 0.9));
  color: rgba(246, 250, 255, 0.96);
  text-shadow: 0 0 18px rgba(121, 195, 255, 0.08);
}

body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-inline-actions-invoice {
  align-items: stretch;
}

body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-active-order-invoice-select {
  color: rgba(248, 252, 255, 0.98);
  -webkit-text-fill-color: rgba(248, 252, 255, 0.98);
  font-weight: 700;
  background: linear-gradient(145deg, rgba(8, 18, 32, 0.98), rgba(10, 24, 42, 0.96));
  box-shadow: inset 0 1px 0 rgba(203, 235, 255, 0.08), 0 0 0 1px rgba(58, 140, 220, 0.18);
}

body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-active-order-invoice-select option {
  color: #f7fbff;
  background: #091422;
}

body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-active-order-link-save.btn {
  border-color: rgba(61, 214, 141, 0.44);
  background: linear-gradient(135deg, #14b85f 0%, #1edb7d 52%, #57f0a6 100%);
  color: #faffff;
  box-shadow: 0 24px 38px -26px rgba(30, 219, 125, 0.82);
}

body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-active-order-link-save.btn:hover,
body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-active-order-link-save.btn:focus-visible {
  border-color: rgba(103, 241, 170, 0.52);
  background: linear-gradient(135deg, #1ac86a 0%, #2ae28a 48%, #74f3b7 100%);
  box-shadow: 0 28px 42px -24px rgba(42, 226, 138, 0.92);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-journal-list {
  display: grid;
  gap: 12px;
}

body[data-page="worker"] .worker-active-order-table-input {
  display: grid;
  gap: 8px;
  min-width: 0;
}

body[data-page="worker"] .worker-active-order-table-input span {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(67, 89, 115, 0.82);
}

body[data-page="worker"][data-theme="dark"] .worker-active-order-table-input span {
  color: rgba(197, 219, 240, 0.74);
}

body[data-page="worker"] .worker-active-order-photo-cell {
  display: grid;
  gap: 10px;
  min-width: 0;
}

body[data-page="worker"] .worker-active-order-photo-cell > span {
  color: rgba(72, 94, 119, 0.8);
}

body[data-page="worker"] .worker-active-order-photo-cell .btn {
  width: 100%;
}

body[data-page="worker"][data-theme="dark"] .worker-active-order-photo-cell > span {
  color: rgba(201, 220, 241, 0.72);
}

body[data-page="worker"] .worker-active-order-table th:nth-child(1),
body[data-page="worker"] .worker-active-order-table td:nth-child(1) {
  width: 24%;
}

body[data-page="worker"] .worker-active-order-table th:nth-child(2),
body[data-page="worker"] .worker-active-order-table td:nth-child(2) {
  width: 12%;
}

body[data-page="worker"] .worker-active-order-table th:nth-child(3),
body[data-page="worker"] .worker-active-order-table td:nth-child(3) {
  width: 22%;
}

body[data-page="worker"] .worker-active-order-table th:nth-child(4),
body[data-page="worker"] .worker-active-order-table td:nth-child(4) {
  width: 24%;
}

body[data-page="worker"] .worker-active-order-table th:nth-child(5),
body[data-page="worker"] .worker-active-order-table td:nth-child(5) {
  width: 18%;
}

@media (max-width: 980px) {
  body[data-page="worker"] .worker-active-order-layout,
  body[data-page="worker"] .worker-active-order-grid,
  body[data-page="app"][data-app-mode="workers"] .team-active-order-grid,
  body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-pickers,
  body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-form,
  body[data-page="worker"] .worker-active-order-line-fields,
  body[data-page="worker"] .worker-active-order-hero-facts,
  body[data-page="worker"] .worker-active-order-facts,
  body[data-page="app"][data-app-mode="workers"] .team-active-order-metrics,
  body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-metrics,
  body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-band,
  body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-grid,
  body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-facts {
    grid-template-columns: 1fr;
  }

  body[data-page="worker"] .worker-active-order-time-row {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-hero-panel {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-signal-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1280px) {
  body[data-page="worker"] .worker-active-order-hero-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1221px) {
  body[data-page="app"][data-app-mode="desktop"] {
    height: 100dvh;
    overflow: hidden;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-shell {
    height: 100dvh;
    min-height: 100dvh;
    padding-bottom: 14px;
    overflow: hidden;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-main {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-stage {
    top: 18px;
    bottom: 0;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-grid {
    overflow: auto;
    padding-right: 8px;
    scrollbar-gutter: stable;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-workspace-grid {
    height: calc(100% - 18px);
    margin-top: 18px;
    align-items: stretch;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-body {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-command-deck {
    position: relative;
    top: auto;
    margin-top: 0;
    max-height: 100%;
    overflow: auto;
    scrollbar-gutter: stable;
  }
}

body[data-page="app"][data-app-mode="desktop"] .desktop-inspector {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-inspector-card,
body[data-page="app"][data-app-mode="desktop"] .desktop-inspector-card > *,
body[data-page="app"][data-app-mode="desktop"] .desktop-detail-grid,
body[data-page="app"][data-app-mode="desktop"] .desktop-detail-grid article,
body[data-page="app"][data-app-mode="desktop"] .desktop-subsection,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-form,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-form > *,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-shell,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-overview,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-band,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-grid,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-pickers,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-picker,
body[data-page="app"][data-app-mode="desktop"] .desktop-picker-row,
body[data-page="app"][data-app-mode="desktop"] .desktop-picker-copy,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-ledger-wrap {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-detail-grid article strong,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-band article strong,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-facts article strong,
body[data-page="app"][data-app-mode="desktop"] .desktop-picker-copy span,
body[data-page="app"][data-app-mode="desktop"] .desktop-picker-copy small,
body[data-page="app"][data-app-mode="desktop"] .desktop-copy-block.compact {
  overflow-wrap: anywhere;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-form {
  grid-template-columns: 1fr;
  gap: 16px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-form-compact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-hero-panel {
  grid-template-columns: 1fr;
  align-items: stretch;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-hero-copy .desktop-copy-block {
  max-width: none;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-signal-grid article span,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-metrics article span {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  line-height: 1.35;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-signal-grid article,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-metrics article {
  align-content: start;
  min-height: 96px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-form-compact-grid .desktop-form-field {
  min-width: 0;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-shell,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-overview,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-picker {
  overflow: hidden;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-band,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-pickers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-picker {
  padding: 16px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-picker-list {
  gap: 8px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-picker-row {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  gap: 12px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-picker-row input {
  margin-top: 3px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-picker-copy {
  display: grid;
  gap: 4px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-picker-copy span {
  display: block;
  font-weight: 700;
  color: inherit;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-picker-copy small {
  display: block;
  margin: 0;
  color: rgba(72, 95, 122, 0.78);
}

body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-picker-copy small {
  color: rgba(193, 214, 235, 0.68);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-form .desktop-inline-actions {
  justify-content: flex-start;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-performance-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 12px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-performance-band article,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-performance-card,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-performance-service {
  border: 1px solid rgba(92, 137, 176, 0.14);
  background: rgba(255, 255, 255, 0.62);
  border-radius: 22px;
}

body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-active-order-performance-band article,
body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-active-order-performance-card,
body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-active-order-performance-service {
  border-color: rgba(108, 157, 207, 0.14);
  background: rgba(8, 17, 30, 0.82);
  box-shadow: inset 0 1px 0 rgba(176, 220, 255, 0.04);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-performance-band article {
  padding: 16px 18px;
  min-width: 0;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-performance-band article small,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-performance-card-head span,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-performance-service span,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-performance-empty {
  color: rgba(72, 95, 122, 0.78);
}

body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-active-order-performance-band article small,
body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-active-order-performance-card-head span,
body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-active-order-performance-service span,
body[data-page="app"][data-app-mode="desktop"][data-theme="dark"] .desktop-active-order-performance-empty {
  color: rgba(193, 214, 235, 0.7);
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-performance-band article strong {
  display: block;
  margin-top: 8px;
  font-size: 1.16rem;
  overflow-wrap: anywhere;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-performance-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-performance-card {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-performance-card.is-idle {
  opacity: 0.84;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-performance-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-performance-copy,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-performance-value {
  display: grid;
  gap: 6px;
  min-width: 0;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-performance-copy strong,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-performance-value strong {
  display: block;
  overflow-wrap: anywhere;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-performance-value {
  justify-items: end;
  text-align: right;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-performance-value strong {
  font-size: 1.18rem;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-performance-chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-performance-services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-performance-service {
  padding: 12px 14px;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-performance-service strong,
body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-performance-service span {
  display: block;
  overflow-wrap: anywhere;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-performance-service span {
  margin-top: 6px;
}

@media (max-width: 1280px) {
  body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-form-compact-grid,
  body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-performance-band,
  body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-performance-services,
  body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-band,
  body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-grid,
  body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-plan-facts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1500px) and (min-width: 1281px) {
  body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-form-compact-grid,
  body[data-page="app"][data-app-mode="desktop"] .desktop-active-order-performance-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body[data-page="worker"] .worker-absence-request-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(59, 130, 246, 0.16);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(245, 249, 255, 0.92));
}

body[data-page="worker"][data-theme="dark"] .worker-absence-request-card {
  border-color: rgba(96, 165, 250, 0.16);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(10, 18, 34, 0.96), rgba(11, 18, 30, 0.92));
}

body[data-page="worker"] .worker-absence-request-head,
body[data-page="worker"] .worker-calendar-absence-head,
body[data-page="worker"] .worker-direct-request-head,
body[data-page="app"][data-app-mode="workers"] .team-chat-request-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body[data-page="worker"] .worker-absence-request-head > div,
body[data-page="worker"] .worker-direct-request-head > div,
body[data-page="app"][data-app-mode="workers"] .team-chat-request-head > div {
  display: grid;
  gap: 5px;
}

body[data-page="worker"] .worker-absence-request-head span,
body[data-page="worker"] .worker-calendar-absence-card p,
body[data-page="worker"] .worker-calendar-absence-head span,
body[data-page="worker"] .worker-direct-request-range,
body[data-page="worker"] .worker-direct-request-note,
body[data-page="worker"] .worker-direct-request-decision,
body[data-page="worker"] .worker-direct-request-decision-note,
body[data-page="app"][data-app-mode="workers"] .team-chat-request-range,
body[data-page="app"][data-app-mode="workers"] .team-chat-request-note,
body[data-page="app"][data-app-mode="workers"] .team-chat-request-decision,
body[data-page="app"][data-app-mode="workers"] .team-chat-request-decision-note {
  color: #61758d;
}

body[data-page="worker"][data-theme="dark"] .worker-absence-request-head span,
body[data-page="worker"][data-theme="dark"] .worker-calendar-absence-card p,
body[data-page="worker"][data-theme="dark"] .worker-calendar-absence-head span,
body[data-page="worker"][data-theme="dark"] .worker-direct-request-range,
body[data-page="worker"][data-theme="dark"] .worker-direct-request-note,
body[data-page="worker"][data-theme="dark"] .worker-direct-request-decision,
body[data-page="worker"][data-theme="dark"] .worker-direct-request-decision-note,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-request-range,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-request-note,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-request-decision,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-request-decision-note {
  color: #94a3b8;
}

body[data-page="worker"] .worker-absence-request-pill,
body[data-page="worker"] .worker-direct-request-status,
body[data-page="app"][data-app-mode="workers"] .team-chat-request-status {
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(59, 130, 246, 0.16);
  background: rgba(59, 130, 246, 0.08);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

body[data-page="worker"] .worker-direct-request-status.is-approved,
body[data-page="app"][data-app-mode="workers"] .team-chat-request-status.is-approved {
  border-color: rgba(16, 185, 129, 0.24);
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

body[data-page="worker"] .worker-direct-request-status.is-declined,
body[data-page="app"][data-app-mode="workers"] .team-chat-request-status.is-declined {
  border-color: rgba(239, 68, 68, 0.24);
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

body[data-page="worker"] .worker-absence-request-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body[data-page="worker"] .worker-absence-request-form label {
  display: grid;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}

body[data-page="worker"] .worker-absence-request-note,
body[data-page="worker"] .worker-absence-request-submit {
  grid-column: 1 / -1;
}

body[data-page="worker"] .worker-absence-request-form input,
body[data-page="worker"] .worker-absence-request-form select,
body[data-page="worker"] .worker-absence-request-form textarea {
  width: 100%;
  min-width: 0;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.9);
  padding: 12px 14px;
  color: inherit;
  font: inherit;
}

body[data-page="worker"] .worker-absence-request-form textarea {
  min-height: 92px;
  resize: vertical;
}

body[data-page="worker"][data-theme="dark"] .worker-absence-request-form input,
body[data-page="worker"][data-theme="dark"] .worker-absence-request-form select,
body[data-page="worker"][data-theme="dark"] .worker-absence-request-form textarea {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.76);
}

body[data-page="worker"] .worker-calendar-cell.has-absence.is-vacation {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.16), rgba(255, 255, 255, 0.96));
  border-color: rgba(59, 130, 246, 0.2);
}

body[data-page="worker"] .worker-calendar-cell.has-absence.is-sick {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.14), rgba(255, 255, 255, 0.96));
  border-color: rgba(239, 68, 68, 0.2);
}

body[data-page="worker"][data-theme="dark"] .worker-calendar-cell.has-absence.is-vacation {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.2), rgba(10, 18, 34, 0.96));
  border-color: rgba(96, 165, 250, 0.28);
}

body[data-page="worker"][data-theme="dark"] .worker-calendar-cell.has-absence.is-sick {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.16), rgba(10, 18, 34, 0.96));
  border-color: rgba(248, 113, 113, 0.22);
}

body[data-page="worker"] .worker-calendar-absence-card,
body[data-page="worker"] .worker-direct-request-card,
body[data-page="app"][data-app-mode="workers"] .team-chat-request-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(248, 250, 252, 0.92);
}

body[data-page="worker"][data-theme="dark"] .worker-calendar-absence-card,
body[data-page="worker"][data-theme="dark"] .worker-direct-request-card,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-request-card {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.78);
}

body[data-page="worker"] .worker-calendar-absence-card.is-vacation,
body[data-page="worker"] .worker-direct-request-card.is-vacation,
body[data-page="app"][data-app-mode="workers"] .team-chat-request-card.is-vacation {
  border-color: rgba(59, 130, 246, 0.2);
  background: rgba(59, 130, 246, 0.08);
}

body[data-page="worker"] .worker-calendar-absence-card.is-sick,
body[data-page="worker"] .worker-direct-request-card.is-sick,
body[data-page="app"][data-app-mode="workers"] .team-chat-request-card.is-sick {
  border-color: rgba(239, 68, 68, 0.2);
  background: rgba(239, 68, 68, 0.08);
}

body[data-page="worker"][data-theme="dark"] .worker-calendar-absence-card.is-vacation,
body[data-page="worker"][data-theme="dark"] .worker-direct-request-card.is-vacation,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-request-card.is-vacation {
  background: rgba(59, 130, 246, 0.14);
}

body[data-page="worker"][data-theme="dark"] .worker-calendar-absence-card.is-sick,
body[data-page="worker"][data-theme="dark"] .worker-direct-request-card.is-sick,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-request-card.is-sick {
  background: rgba(239, 68, 68, 0.14);
}

body[data-page="worker"] .worker-direct-request-kicker,
body[data-page="app"][data-app-mode="workers"] .team-chat-request-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7c90a8;
}

body[data-page="worker"][data-theme="dark"] .worker-direct-request-kicker,
body[data-page="app"][data-app-mode="workers"][data-theme="dark"] .team-chat-request-kicker {
  color: #9fb0c6;
}

body[data-page="app"][data-app-mode="workers"] .team-chat-request-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 980px) {
  body[data-page="worker"] .worker-absence-request-form {
    grid-template-columns: 1fr;
  }
}

/* Mobile Hardening */
body[data-page] :is(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
  overflow-wrap: anywhere;
}

body[data-page] :is(p, li, strong, small, label, dt, dd, th, td, button, a) {
  overflow-wrap: anywhere;
  hyphens: auto;
}

body[data-page] :is(button, a, input, select, textarea) {
  min-width: 0;
}

body[data-page="app"][data-app-mode="desktop"] .desktop-main > *,
body[data-page="app"][data-app-mode="desktop"] .desktop-workspace-grid > *,
body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-body > *,
body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card,
body[data-page="app"][data-app-mode="desktop"] .desktop-item-card,
body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-card {
  min-width: 0;
}

@media (max-width: 1220px) {
  body[data-page="app"][data-app-mode="desktop"] .desktop-main {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-stage,
  body[data-page="app"][data-app-mode="desktop"] .desktop-workspace-grid,
  body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-shell,
  body[data-page="app"][data-app-mode="desktop"] .desktop-command-deck {
    width: 100%;
    min-width: 0;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-stage {
    order: 1;
    padding-top: 0;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-workspace-grid {
    order: 2;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-command-deck {
    order: 3;
  }
}

@media (max-width: 820px) {
  body[data-page="app"][data-app-mode="desktop"] .desktop-shell {
    padding: 12px;
    gap: 14px;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-main {
    min-height: auto;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-topbar {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    border-radius: 20px;
    padding: 12px;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-topbar-brand-shell,
  body[data-page="app"][data-app-mode="desktop"] .desktop-topbar-nav {
    width: 100%;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-topbar-brand-shell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
    gap: 12px;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-topbar-brand {
    min-width: 0;
    gap: 10px;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-window-controls {
    padding: 8px 10px;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-topbar-mark {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    flex: 0 0 auto;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-topbar h1 {
    font-size: clamp(1.38rem, 7vw, 1.9rem);
    line-height: 1;
    text-wrap: nowrap;
    overflow-wrap: normal;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-topbar .main-eyebrow {
    letter-spacing: 0.18em;
    font-size: 0.62rem;
    white-space: nowrap;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-topbar-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    justify-self: stretch;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-topbar .btn.ghost {
    width: 100%;
    justify-content: center;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-stage-head,
  body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-head,
  body[data-page="app"][data-app-mode="desktop"] .desktop-inspector-toolbar,
  body[data-page="app"][data-app-mode="desktop"] .desktop-command-head {
    flex-direction: column;
    align-items: stretch;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-stage-tools,
  body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-tools {
    width: 100%;
    justify-content: flex-start;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-head > div:first-child {
    padding-left: 0;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-search,
  body[data-page="app"][data-app-mode="desktop"] .desktop-search input {
    width: 100%;
    min-width: 0;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card {
    min-height: 140px;
    padding: 0 2px 6px;
    gap: 4px;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card::before {
    width: 74px;
    height: 52px;
    top: 14px;
    border-radius: 14px;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card::after {
    width: 80px;
    height: 56px;
    top: 12px;
    border-radius: 16px;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-icon {
    width: 94px;
    height: 68px;
    margin-top: 18px;
    border-radius: 20px 20px 16px 16px;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-icon::before {
    width: 38px;
    height: 12px;
    bottom: calc(100% - 7px);
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card strong {
    margin-top: 6px;
    font-size: 0.94rem;
    line-height: 1.18;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card small {
    max-width: none;
    font-size: 0.75rem;
    line-height: 1.35;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-explorer-body {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-list-panel {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-inspector-toolbar .btn {
    width: 100%;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-list,
  body[data-page="app"][data-app-mode="desktop"] .desktop-inspector {
    padding: 14px;
  }
}

@media (max-width: 560px) {
  body[data-page="app"][data-app-mode="desktop"] .desktop-topbar-nav {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-grid,
  body[data-page="app"][data-app-mode="desktop"] .desktop-kpi-grid,
  body[data-page="app"][data-app-mode="desktop"] .desktop-detail-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="desktop"] .desktop-folder-card {
    min-height: 132px;
  }
}

@media (max-width: 720px) {
  body[data-page="app"][data-app-mode="hub"] .start-nav {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body[data-page="app"][data-app-mode="hub"] .start-nav-links {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  body[data-page="app"][data-app-mode="hub"] .start-nav-tools,
  body[data-page="app"][data-app-mode="hub"] .start-head,
  body[data-page="app"][data-app-mode="hub"] .start-head-actions {
    width: 100%;
  }

  body[data-page="app"][data-app-mode="hub"] .start-head-actions {
    flex-direction: column;
    align-items: stretch;
  }

  body[data-page="app"][data-app-mode="hub"] .start-calendar-form {
    grid-template-columns: 1fr;
  }

  body[data-page="app"][data-app-mode="hub"] .start-calendar-form .start-calendar-title-input {
    grid-column: auto;
  }
}