/* ================================================================
   MINDSTORM — 2026 visual system
   Reference palette: white / cool gray / mineral teal / near-black
   This file is intentionally loaded last and only changes presentation.
   ================================================================ */

:root {
  color-scheme: light;
  --ms-ink: #151d1e;
  --ms-ink-soft: #193945;
  --ms-teal-900: #274647;
  --ms-teal-800: #36595a;
  --ms-teal-700: #4c6667;
  --ms-teal-600: #607879;
  --ms-teal-500: #829393;
  --ms-teal-300: #b8c2c2;
  --ms-teal-200: #d3dcda;
  --ms-teal-100: #e5ece9;
  --ms-teal-50: #f0f4f2;
  --ms-white: #ffffff;
  --ms-canvas: #f4f5f3;
  --ms-surface-soft: #eef0ed;
  --ms-border: #d9ddda;
  --ms-border-strong: #b8c0bc;
  --ms-muted: #687373;
  --ms-muted-light: #929c9c;
  --ms-danger: #a94c46;
  --ms-danger-soft: #f7e9e7;
  --ms-success: #2f756a;
  --ms-shadow-sm: 0 1px 2px rgba(21, 29, 30, 0.05), 0 6px 18px rgba(21, 29, 30, 0.04);
  --ms-shadow-md: 0 18px 50px rgba(21, 29, 30, 0.12);
  --ms-radius-sm: 8px;
  --ms-radius-md: 12px;
  --ms-radius-lg: 18px;

  /* Existing component aliases */
  --bg: var(--ms-ink);
  --panel: #1c2627;
  --panel-2: #263435;
  --panel-3: #365052;
  --line: #405354;
  --line-2: #607879;
  --text: #f8faf9;
  --muted: #b8c2c2;
  --muted-2: #829393;
  --bg-light: var(--ms-canvas);
  --panel-light: var(--ms-white);
  --sidebar-bg: var(--ms-ink);
  --sidebar-border: #314142;
  --text-dark: var(--ms-ink);
  --text-muted: var(--ms-muted);
  --text-label: #374647;
  --text-placeholder: var(--ms-muted-light);
  --brand-gradient: linear-gradient(145deg, var(--ms-teal-500), var(--ms-teal-800) 56%, var(--ms-ink-soft));
  --brand-indigo: var(--ms-teal-800);
  --brand-purple: var(--ms-teal-700);
  --brand-violet: var(--ms-teal-600);
  --brand-rose: var(--ms-teal-500);
  --brand-yellow: var(--ms-teal-200);
  --brand-blue: var(--ms-teal-700);
  --accent: var(--ms-teal-800);
  --accent-h: var(--ms-teal-900);
  --success: var(--ms-success);
  --focus: var(--ms-teal-700);
  --warn: #8a6849;
  --brand: var(--ms-teal-800);
  --brand-h: var(--ms-teal-900);

  /* ===== 2026 令牌重定义 — color-* → teal 映射 ===== */
  --color-primary:            var(--ms-teal-800);
  --color-primary-hover:      var(--ms-teal-900);
  --color-primary-soft:       var(--ms-teal-100);
  --color-primary-softer:     var(--ms-teal-50);
  --color-primary-border:     var(--ms-teal-200);
  --color-primary-light:      var(--ms-teal-600);

  --color-surface-white:      var(--ms-white);
  --color-surface-page:       var(--ms-canvas);
  --color-surface-secondary:  var(--ms-canvas);
  --color-surface-tertiary:   var(--ms-surface-soft);
  --color-surface-login:      var(--ms-canvas);
  --color-surface-purple:     var(--ms-teal-50);
  --color-surface-purple-soft: var(--ms-teal-50);
  --color-surface-darkest:    var(--ms-ink);
  --color-surface-panel:      #1c2627;
  --color-surface-panel-2:    #263435;
  --color-surface-panel-3:    #365052;
  --color-surface-dark:       var(--ms-ink);
  --color-surface-banner:     var(--ms-teal-900);
  --color-surface-banner-hover: var(--ms-teal-800);
  --color-surface-btn-hover:  var(--ms-teal-900);

  --color-text-primary:       var(--ms-ink);
  --color-text-heading:       var(--ms-ink);
  --color-text-label:         #374647;
  --color-text-muted:         var(--ms-muted);
  --color-text-placeholder:   var(--ms-muted-light);
  --color-text-inverse:       #f8faf9;

  --color-border:             var(--ms-border);
  --color-border-strong:      var(--ms-border-strong);
  --color-border-light:       var(--ms-teal-50);
  --color-border-subtle:      var(--ms-teal-50);

  --color-line:               #405354;
  --color-line-2:             #607879;
  --color-muted-zinc:         var(--ms-teal-300);
  --color-muted-zinc-2:       var(--ms-teal-500);

  --color-success:            var(--ms-success);
  --color-danger:             var(--ms-danger);
  --color-danger-alt:         var(--ms-danger);
  --color-danger-soft:        var(--ms-danger-soft);
  --color-danger-hover:       var(--ms-danger-soft);
  --color-danger-border:      #d4a8a4;
  --color-danger-disabled:    #d4a8a4;

  --color-brand-purple:       var(--ms-teal-700);
  --color-brand-violet:       var(--ms-teal-600);
  --color-brand-rose:         var(--ms-teal-500);
  --color-brand-yellow:       var(--ms-teal-200);
  --color-brand-blue:         var(--ms-teal-700);
}

* {
  scrollbar-color: var(--ms-teal-300) transparent;
}

html,
body {
  background: var(--ms-canvas);
}

body {
  color: var(--ms-ink);
  letter-spacing: -0.005em;
}

::selection {
  color: var(--ms-ink);
  background: var(--ms-teal-200);
}

:where(button, a, input, textarea, select, [contenteditable="true"]):focus-visible {
  outline: 2px solid var(--ms-teal-700);
  outline-offset: 2px;
}

:where(button, input, textarea, select) {
  accent-color: var(--ms-teal-800);
}

/* ---- Shared light surfaces ---- */
.main-content {
  background: var(--ms-canvas) !important;
  color: var(--ms-ink);
}

.home-header,
.projects-header,
.history-header,
.canvas-header {
  background: rgba(244, 245, 243, 0.92) !important;
  border-color: var(--ms-border) !important;
  backdrop-filter: blur(18px) saturate(120%);
}

:is(.home-breadcrumb, .projects-breadcrumb, .history-breadcrumb, .canvas-breadcrumb)
  :is(a, span, .home-breadcrumb-item) {
  color: var(--ms-muted);
}

:is(.home-breadcrumb, .projects-breadcrumb, .history-breadcrumb, .canvas-breadcrumb)
  :is(.active, a:hover) {
  color: var(--ms-ink) !important;
}

/* ================================================================
   SIDEBAR
   ================================================================ */
.sidebar,
.sidebar.sidebar-light,
.sidebar:not(.sidebar-light) {
  background:
    linear-gradient(180deg, rgba(76, 102, 103, 0.12), transparent 28%),
    var(--ms-ink) !important;
  border-right-color: #2d3b3c !important;
  color: #f7f9f8;
}

.sidebar-brand {
  padding: 22px 18px 18px;
}

.sidebar-logo,
.login-brand-logo {
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

.login-brand-content {
  z-index: 10 !important;
}

.sidebar-logo-img,
.login-brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 0 1.5px rgba(255,255,255,0.9));
}

.sidebar-brand-name,
.sidebar-light .sidebar-brand-name {
  font-family: "PingFang SC", "Heiti SC", "Microsoft YaHei", sans-serif !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sidebar-nav {
  padding: 10px 12px;
  gap: 5px;
}

.sidebar-item,
.sidebar-light .sidebar-item {
  min-height: 42px;
  font-family: "PingFang SC", "Heiti SC", "Microsoft YaHei", sans-serif !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  border: 1px solid transparent;
  border-radius: 10px;
}

.sidebar-item:hover,
.sidebar-light .sidebar-item:hover {
  color: #ffffff !important;
  background: rgba(184, 194, 194, 0.09) !important;
  border-color: rgba(184, 194, 194, 0.09);
}

.sidebar-item.active,
.sidebar-light .sidebar-item.active {
  color: #ffffff !important;
  background: rgba(184, 194, 194, 0.13) !important;
  border-color: rgba(184, 194, 194, 0.12);
}

.sidebar-dot {
  background: #657575 !important;
}

.sidebar-item.active .sidebar-dot,
.sidebar-light .sidebar-item.active .sidebar-dot {
  background: #a9c5bf !important;
  box-shadow: 0 0 0 4px rgba(169, 197, 191, 0.1) !important;
}

.sidebar-section,
.sidebar-light .sidebar-section {
  font-family: "PingFang SC", "Heiti SC", "Microsoft YaHei", sans-serif !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: 0.12em;
}

.sidebar-section.sidebar-divider {
  border-color: #2d3b3c !important;
}

.sidebar-new-project {
  background: #edf2f0 !important;
  color: var(--ms-ink) !important;
  border: 1px solid #ffffff !important;
  box-shadow: none !important;
}

.sidebar-new-project:hover {
  background: #ffffff !important;
  transform: translateY(-1px);
}

.sidebar-create-panel,
.sidebar-user,
.sidebar-light .sidebar-user,
.sidebar:not(.sidebar-light) .sidebar-user,
.sidebar-quota,
.sidebar-light .sidebar-quota,
.sidebar:not(.sidebar-light) .sidebar-quota {
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: rgba(184, 194, 194, 0.13) !important;
}

.sidebar-create-option:hover,
.sidebar-user:hover,
.sidebar-light .sidebar-user:hover,
.sidebar:not(.sidebar-light) .sidebar-user:hover,
.sidebar-quota:hover {
  background: rgba(255, 255, 255, 0.09) !important;
}

.sidebar-create-label,
.sidebar-user-name,
.sidebar-light .sidebar-user-name,
.sidebar:not(.sidebar-light) .sidebar-user-name,
.sidebar-quota-value,
.sidebar:not(.sidebar-light) .sidebar-quota-value {
  color: #ffffff !important;
  font-family: "PingFang SC", "Heiti SC", "Microsoft YaHei", sans-serif !important;
  font-weight: 700 !important;
}

.sidebar-create-desc,
.sidebar-user-role,
.sidebar-light .sidebar-user-role,
.sidebar-quota-label,
.sidebar:not(.sidebar-light) .sidebar-quota-label {
  color: #ffffff !important;
  font-family: "PingFang SC", "Heiti SC", "Microsoft YaHei", sans-serif !important;
  font-weight: 700 !important;
}

.sidebar-avatar,
.sidebar-light .sidebar-avatar {
  color: #eef4f1 !important;
  background: var(--ms-teal-700) !important;
}

.sidebar-quota-upgrade {
  color: #b9d2cd !important;
}

.sidebar-quota-bar {
  background: #2c3c3d !important;
}

.sidebar-quota-bar-fill {
  background: linear-gradient(90deg, var(--ms-teal-500), #a9c5bf) !important;
}

.sidebar-edge-toggle {
  color: var(--ms-muted) !important;
  background: var(--ms-white) !important;
  border-color: var(--ms-border) !important;
  box-shadow: var(--ms-shadow-sm) !important;
}

.sidebar-edge-toggle:hover {
  color: var(--ms-ink) !important;
  border-color: var(--ms-border-strong) !important;
}

.sidebar-logout-btn {
  color: #91a09f !important;
}

.sidebar-logout-btn:hover {
  color: #f1b0aa !important;
  background: rgba(169, 76, 70, 0.14) !important;
}

.sidebar-version {
  color: #657575 !important;
}

/* ================================================================
   HOME
   ================================================================ */
.home-center-group {
  background:
    radial-gradient(circle at 50% 28%, rgba(184, 194, 194, 0.22), transparent 30%),
    var(--ms-canvas);
}

.home-hero-badge {
  color: var(--ms-teal-800) !important;
  background: var(--ms-teal-100) !important;
  border: 1px solid var(--ms-teal-200);
}

.home-hero-title {
  color: var(--ms-ink) !important;
  font-weight: 600 !important;
  letter-spacing: -0.045em !important;
}

.home-hero-subtitle,
.home-history-subtitle {
  color: var(--ms-muted) !important;
}

.home-bottom-bar {
  background: transparent !important;
}

.home-bottom-bar-inner {
  background: rgba(244, 245, 243, 0.82);
  border: 1px solid rgba(217, 221, 218, 0.75);
  border-radius: 22px;
  box-shadow: 0 28px 70px rgba(21, 29, 30, 0.12);
  backdrop-filter: blur(22px) saturate(125%);
}

.home-prompt-box,
.home-bottom-bar .home-prompt-box {
  background: var(--ms-white) !important;
  border-color: var(--ms-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--ms-shadow-sm) !important;
}

.home-prompt-box:focus-within {
  border-color: var(--ms-teal-500) !important;
  box-shadow: 0 0 0 3px rgba(96, 120, 121, 0.12), var(--ms-shadow-sm) !important;
}

.home-prompt-editor,
.home-mention-search {
  color: var(--ms-ink) !important;
}

.home-prompt-editor:empty::before {
  color: var(--ms-muted-light) !important;
}

.home-mode-area,
.home-prompt-actions {
  border-color: var(--ms-surface-soft) !important;
}

.home-add-ref,
.home-gen-opt,
.home-format-chip,
.home-format-trigger,
.home-format-select,
.home-task-action-btn,
.ref-upload-btn,
.ref-library-upload-btn {
  color: #425152 !important;
  background: var(--ms-white) !important;
  border-color: var(--ms-border) !important;
  box-shadow: none !important;
}

:is(.home-add-ref, .home-gen-opt, .home-format-chip, .home-format-trigger, .home-task-action-btn, .ref-upload-btn, .ref-library-upload-btn):hover {
  color: var(--ms-ink) !important;
  background: var(--ms-teal-50) !important;
  border-color: var(--ms-teal-300) !important;
}

.home-gen-opt.active,
.home-format-chip.active {
  color: var(--ms-ink-soft) !important;
  background: var(--ms-teal-100) !important;
  border-color: var(--ms-teal-600) !important;
}

.home-start-btn,
.home-agent-accept-btn,
.home-task-action-btn.primary,
.ref-picker-confirm {
  color: #ffffff !important;
  background: var(--ms-ink) !important;
  border-color: var(--ms-ink) !important;
}

:is(.home-start-btn, .home-agent-accept-btn, .home-task-action-btn.primary, .ref-picker-confirm):hover {
  background: var(--ms-teal-900) !important;
  transform: translateY(-1px);
  box-shadow: 0 9px 20px rgba(21, 29, 30, 0.18) !important;
}

.home-format-trigger .home-format-trigger-val,
.home-format-slider-label {
  color: var(--ms-teal-800) !important;
}

.home-format-slider::-webkit-slider-runnable-track,
.home-format-slider::-moz-range-track {
  background: var(--ms-teal-200) !important;
}

.home-format-slider::-webkit-slider-thumb,
.home-format-slider::-moz-range-thumb {
  background: var(--ms-teal-800) !important;
}

.home-format-popover,
.home-mention-panel {
  color: var(--ms-ink) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: var(--ms-border) !important;
  border-radius: var(--ms-radius-md) !important;
  box-shadow: var(--ms-shadow-md) !important;
}

.home-format-popover[hidden].open {
  display: flex !important;
}

.home-mention-item:hover,
.home-mention-item.mention-focus,
.home-ref-preview-item:hover {
  border-color: var(--ms-teal-600) !important;
  box-shadow: 0 0 0 2px rgba(96, 120, 121, 0.12) !important;
}

.home-ref-preview-item.is-mention::after {
  background: var(--ms-teal-800) !important;
}

.home-mention-chip {
  color: #3e4b4c !important;
  background: var(--ms-teal-50) !important;
  border-color: var(--ms-teal-200) !important;
}

.home-mention-chip:hover {
  border-color: var(--ms-teal-500) !important;
  box-shadow: 0 1px 5px rgba(76, 102, 103, 0.12) !important;
}

.home-history-item-icon.chat,
.home-history-item-icon.image,
.home-history-item-icon.video {
  background: var(--ms-teal-100) !important;
}

.series-chip-tooltip .tip-value,
.series-tooltip .tip-value {
  color: var(--ms-teal-800) !important;
}

.home-agent-message.user {
  background: var(--ms-ink-soft) !important;
}

.home-agent-message.agent,
.home-agent-result,
.home-task-prompt-preview {
  color: var(--ms-ink) !important;
  background: var(--ms-teal-50) !important;
}

.home-task-card {
  background: var(--ms-white) !important;
  border-color: var(--ms-border) !important;
  border-radius: var(--ms-radius-lg) !important;
  box-shadow: var(--ms-shadow-sm) !important;
}

.home-task-status {
  color: var(--ms-ink) !important;
}

.home-task-spinner {
  border-color: var(--ms-teal-200) !important;
  border-top-color: var(--ms-teal-800) !important;
}

.home-bar-toggle {
  color: var(--ms-muted) !important;
  background: var(--ms-white) !important;
  border-color: var(--ms-border) !important;
  box-shadow: var(--ms-shadow-sm) !important;
}

.ref-picker-overlay,
.profile-modal-overlay,
.credits-modal-overlay,
.upgrade-modal-overlay {
  background: rgba(21, 29, 30, 0.58) !important;
  backdrop-filter: blur(8px);
}

.ref-picker-panel {
  background: var(--ms-white) !important;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg) !important;
  box-shadow: var(--ms-shadow-md) !important;
}

.ref-picker-header,
.ref-picker-tabs,
.ref-picker-footer {
  border-color: var(--ms-border) !important;
}

.ref-picker-header h2 {
  color: var(--ms-ink) !important;
}

.ref-picker-tab.active {
  color: var(--ms-teal-800) !important;
  border-bottom-color: var(--ms-teal-800) !important;
}

.ref-upload-zone {
  color: var(--ms-muted-light) !important;
  border-color: var(--ms-teal-300) !important;
  background: var(--ms-teal-50);
}

.ref-upload-zone.drag-over {
  color: var(--ms-teal-800) !important;
  border-color: var(--ms-teal-700) !important;
  background: var(--ms-teal-100) !important;
}

.ref-library-item.selected {
  border-color: var(--ms-teal-700) !important;
  box-shadow: 0 0 0 2px rgba(76, 102, 103, 0.14) !important;
}

.ref-library-item .ref-library-check {
  background: var(--ms-teal-800) !important;
}

/* ================================================================
   PROJECTS + HISTORY
   ================================================================ */
.projects-new-btn,
.projects-empty-btn,
.history-tab.active,
.history-action-btn.primary {
  color: #ffffff !important;
  background: var(--ms-ink) !important;
  border-color: var(--ms-ink) !important;
  box-shadow: none !important;
}

:is(.projects-new-btn, .projects-empty-btn, .history-action-btn.primary):hover {
  background: var(--ms-teal-900) !important;
  transform: translateY(-1px);
}

.projects-count {
  color: var(--ms-muted) !important;
}

.project-card,
.history-card {
  background: var(--ms-white) !important;
  border-color: var(--ms-border) !important;
  border-radius: var(--ms-radius-md) !important;
  box-shadow: var(--ms-shadow-sm) !important;
}

.project-card:hover,
.history-card:hover {
  border-color: var(--ms-teal-300) !important;
  box-shadow: 0 12px 32px rgba(21, 29, 30, 0.08) !important;
  transform: translateY(-2px);
}

.project-card-preview {
  position: relative;
  background: linear-gradient(145deg, #c4cfcc, #708989 52%, #193945) !important;
}

.project-card:nth-child(3n + 2) .project-card-preview {
  background: linear-gradient(145deg, #e4e8e5, #93a4a2 50%, #36595a) !important;
}

.project-card:nth-child(3n + 3) .project-card-preview {
  background: linear-gradient(145deg, #b8c2c2, #607879 48%, #151d1e) !important;
}

.project-card-name,
.history-card-prompt {
  color: var(--ms-ink) !important;
}

.project-card-name-input {
  color: var(--ms-ink) !important;
  border-color: var(--ms-teal-700) !important;
  box-shadow: 0 0 0 3px rgba(76, 102, 103, 0.1);
}

.project-card-meta,
.history-card-time {
  color: var(--ms-muted) !important;
}

.project-card-progress {
  background: var(--ms-teal-100) !important;
}

.project-card-progress > * {
  background: var(--ms-teal-700) !important;
}

.project-card-btn,
.history-tab,
.history-action-btn {
  color: var(--ms-muted) !important;
  background: transparent !important;
  border-color: var(--ms-border) !important;
}

.project-card-btn.rename:hover {
  color: var(--ms-teal-800) !important;
  background: var(--ms-teal-100) !important;
  border-color: var(--ms-teal-300) !important;
}

.project-card-btn.confirm {
  color: #ffffff !important;
  background: var(--ms-teal-800) !important;
  border-color: var(--ms-teal-800) !important;
}

:is(.project-card-btn, .history-tab, .history-action-btn):hover {
  color: var(--ms-ink) !important;
  background: var(--ms-teal-50) !important;
  border-color: var(--ms-teal-300) !important;
}

.history-tab.active {
  color: #ffffff !important;
  background: var(--ms-ink) !important;
  border-color: var(--ms-ink) !important;
}

.history-card.selected {
  border-color: var(--ms-teal-700) !important;
  box-shadow: 0 0 0 3px rgba(76, 102, 103, 0.12) !important;
}

.history-card.selected .history-card-check,
.history-card-download:hover {
  color: #ffffff !important;
  background: var(--ms-teal-800) !important;
  border-color: var(--ms-teal-800) !important;
}

.history-card-media {
  background: var(--ms-teal-50) !important;
}

.history-card-type {
  background: rgba(21, 29, 30, 0.78) !important;
}

.history-group-divider::after {
  background: var(--ms-border) !important;
}

.history-group-label {
  color: var(--ms-muted) !important;
  background: var(--ms-canvas) !important;
}

.profile-modal-field input {
  color: var(--ms-ink) !important;
  background: var(--ms-white) !important;
  border-color: var(--ms-border) !important;
}

.profile-modal-field input:focus {
  border-color: var(--ms-teal-700) !important;
  box-shadow: 0 0 0 3px rgba(76, 102, 103, 0.11) !important;
}

.profile-modal-banner {
  color: #f7f9f8 !important;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.04), transparent 60%),
    var(--ms-ink-soft) !important;
  border: 1px solid #34545a !important;
  border-radius: var(--ms-radius-lg) !important;
  box-shadow: var(--ms-shadow-sm) !important;
}

.profile-modal-banner :is(h3, p) {
  color: inherit !important;
}

.profile-modal-banner button {
  color: var(--ms-ink) !important;
  background: #eef3f1 !important;
  border-color: #ffffff !important;
}

/* ================================================================
   MODALS
   ================================================================ */
.profile-modal,
.credits-modal,
.upgrade-modal {
  color: var(--ms-ink) !important;
  background: var(--ms-white) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--ms-radius-lg) !important;
  box-shadow: var(--ms-shadow-md) !important;
}

:is(.profile-modal-header, .profile-modal-footer, .credits-modal-header, .credits-modal-footer, .upgrade-modal-header) {
  border-color: var(--ms-border) !important;
}

:is(.profile-modal-header, .credits-modal-header, .upgrade-modal-header) h2,
.profile-modal-username,
.profile-modal-field label,
.credits-item-prompt,
.upgrade-tier-name,
.upgrade-tier-price {
  color: var(--ms-ink) !important;
}

:is(.profile-modal-close, .credits-modal-close, .upgrade-modal-close, .profile-modal-cancel) {
  color: var(--ms-muted) !important;
  background: var(--ms-teal-50) !important;
  border-color: var(--ms-border) !important;
}

.profile-modal-save,
.profile-modal-billing-btn,
.upgrade-tier-btn.primary,
.upgrade-tier-btn.featured-btn {
  color: #ffffff !important;
  background: var(--ms-ink) !important;
  border-color: var(--ms-ink) !important;
}

.profile-modal-avatar,
.credits-item-icon {
  color: #ffffff !important;
  background: var(--ms-teal-700) !important;
}

.profile-modal-avatar:hover {
  box-shadow: 0 0 0 3px rgba(76, 102, 103, 0.16) !important;
}

.profile-modal-stat-bar {
  background: var(--ms-teal-100) !important;
}

.profile-modal-stat-bar-fill {
  background: var(--ms-teal-700) !important;
}

.credits-item,
.profile-modal-billing-item,
.upgrade-tier,
.upgrade-topup-card {
  background: var(--ms-canvas) !important;
  border-color: var(--ms-border) !important;
}

.credits-item:hover,
.upgrade-tier:hover,
.upgrade-topup-card:hover {
  background: var(--ms-teal-50) !important;
  border-color: var(--ms-teal-300) !important;
}

.credits-item-cost,
.credits-modal-total-value,
.upgrade-tier-credits {
  color: var(--ms-teal-800) !important;
  background: var(--ms-teal-100) !important;
}

.upgrade-tier.featured {
  border-color: var(--ms-teal-700) !important;
  box-shadow: 0 0 0 2px rgba(76, 102, 103, 0.1) !important;
}

.upgrade-tier-badge {
  background: var(--ms-teal-800) !important;
}

.upgrade-tier-features li::before {
  color: var(--ms-success) !important;
  background: var(--ms-teal-700) !important;
}

.upgrade-topup-card .credits {
  color: var(--ms-teal-800) !important;
}

.upgrade-topup-card .rate,
.upgrade-tier-price-unit,
.upgrade-tier-features li {
  color: var(--ms-muted) !important;
}

/* ================================================================
   LOGIN
   ================================================================ */
.login-brand-panel {
  background:
    radial-gradient(circle at 50% 44%, rgba(96, 120, 121, 0.3), transparent 24%),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    var(--ms-ink) !important;
  background-size: auto, 38px 38px, 38px 38px, auto !important;
}

.login-brand-name {
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}

.login-ring {
  border-color: rgba(184, 194, 194, 0.14) !important;
}

.login-ring.ring-sm {
  border-color: rgba(184, 194, 194, 0.28) !important;
}

.login-graphic-text,
.login-brand-subtitle {
  color: #ffffff !important;
}

.login-form-panel {
  background: var(--ms-canvas) !important;
}

.login-tabs {
  background: var(--ms-surface-soft) !important;
  border: 1px solid var(--ms-border);
}

.login-tab {
  color: var(--ms-muted) !important;
}

.login-tab.active {
  color: var(--ms-ink) !important;
  background: var(--ms-white) !important;
}

.login-form-heading,
.login-field span {
  color: var(--ms-ink) !important;
}

.login-form-desc {
  color: var(--ms-muted) !important;
}

.login-input,
.login-sms-input {
  color: var(--ms-ink) !important;
  background: var(--ms-white) !important;
  border-color: var(--ms-border) !important;
}

.login-input:focus,
.login-sms-input:focus {
  border-color: var(--ms-teal-700) !important;
  box-shadow: 0 0 0 3px rgba(76, 102, 103, 0.11) !important;
}

.login-forgot {
  color: var(--ms-teal-800) !important;
}

.login-btn {
  color: #ffffff !important;
  background: var(--ms-ink) !important;
  border: 1px solid var(--ms-ink) !important;
  box-shadow: none !important;
}

.login-btn:hover {
  background: var(--ms-teal-900) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(21, 29, 30, 0.18) !important;
}

.login-sms-btn {
  color: var(--ms-ink-soft) !important;
  background: var(--ms-teal-100) !important;
  border-color: var(--ms-teal-300) !important;
}

.login-sms-btn:hover {
  color: var(--ms-ink) !important;
  background: var(--ms-teal-200) !important;
  border-color: var(--ms-teal-600) !important;
}

.login-error {
  color: var(--ms-danger) !important;
  background: var(--ms-danger-soft) !important;
  border-color: #e8c4c0 !important;
}

/* ================================================================
   CANVAS
   ================================================================ */
.canvas-container {
  background: #e9ece9 !important;
}

.canvas-grid {
  opacity: 0.52;
  background-image: radial-gradient(circle, #97a4a1 1px, transparent 1px) !important;
}

.canvas-header-action-btn,
.canvas-bottom-toolbar,
.canvas-zoom-utility,
.canvas-tab-bar,
.canvas-right-panel,
.slide-panel,
.context-menu,
.fullscreen-panel,
.rp-pop {
  color: var(--ms-ink) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: var(--ms-border) !important;
  box-shadow: var(--ms-shadow-md) !important;
  backdrop-filter: blur(18px) saturate(120%);
}

.canvas-bottom-toolbar,
.canvas-zoom-utility {
  border-radius: 14px !important;
}

.toolbar-icon-btn,
.zoom-util-btn,
.right-panel-close,
.slide-panel-close,
.fullscreen-close,
.block-btn {
  color: var(--ms-muted) !important;
}

:is(.toolbar-icon-btn, .zoom-util-btn, .right-panel-close, .slide-panel-close, .fullscreen-close, .block-btn):hover {
  color: var(--ms-ink) !important;
  background: var(--ms-teal-50) !important;
}

.toolbar-icon-btn.active {
  color: #ffffff !important;
  background: var(--ms-ink) !important;
}

.toolbar-icon-divider,
.zoom-util-divider,
.context-menu-divider {
  background: var(--ms-border) !important;
}

.canvas-right-panel,
.slide-panel {
  border-left-color: var(--ms-border) !important;
}

.right-panel-header,
.slide-panel-header,
.fullscreen-header,
.agent-chat-input-area {
  border-color: var(--ms-border) !important;
}

.right-panel-label,
.right-panel-form-group label,
.classic-form label > span:first-child {
  color: var(--ms-muted) !important;
}

.right-panel-select,
.rp-dropdown-trigger,
.right-panel-prompt,
.right-panel-chip,
.right-panel-preset-chip,
.right-panel-frame-picker,
.right-panel-media-lib-btn,
.right-panel-reference-box .file-picker,
.classic-form textarea,
.classic-form input[type="url"],
.agent-chat-input {
  color: var(--ms-ink) !important;
  background: var(--ms-white) !important;
  border-color: var(--ms-border) !important;
}

:is(.right-panel-select, .rp-dropdown-trigger, .right-panel-prompt, .classic-form textarea, .classic-form input[type="url"], .agent-chat-input):focus,
.rp-dropdown-trigger.open {
  border-color: var(--ms-teal-700) !important;
  box-shadow: 0 0 0 3px rgba(76, 102, 103, 0.1) !important;
}

.rp-dropdown-trigger .rp-dropdown-val,
.rp-duration-label {
  color: var(--ms-teal-800) !important;
}

.rp-pop-chip.active,
.right-panel-chip.active,
.right-panel-preset-chip.active {
  color: var(--ms-ink-soft) !important;
  background: var(--ms-teal-100) !important;
  border-color: var(--ms-teal-700) !important;
}

.right-panel-submit-btn,
.classic-submit-btn,
.agent-chat-send {
  color: #ffffff !important;
  background: var(--ms-ink) !important;
  border-color: var(--ms-ink) !important;
}

:is(.right-panel-submit-btn, .classic-submit-btn, .agent-chat-send):hover {
  background: var(--ms-teal-900) !important;
}

.right-panel-upload,
.slide-panel-body .media-upload-zone {
  background: var(--ms-teal-50) !important;
  border-color: var(--ms-teal-300) !important;
}

.right-panel-upload-gradient {
  background: linear-gradient(145deg, #d4ddda, #819696, #36595a) !important;
}

.right-panel-upload-text,
.drop-hint,
.agent-chat-model-tag {
  color: var(--ms-teal-800) !important;
}

.agent-chat-model-tag {
  background: var(--ms-teal-100) !important;
  border-color: var(--ms-teal-300) !important;
}

.rp-duration-slider::-webkit-slider-runnable-track,
.rp-duration-slider::-moz-range-track {
  background: var(--ms-teal-200) !important;
}

.rp-duration-slider::-webkit-slider-thumb,
.rp-duration-slider::-moz-range-thumb {
  background: var(--ms-teal-800) !important;
}

.rp-mention-item:hover,
.rp-mention-item.mention-focus,
.right-panel-frame-picker:hover,
.right-panel-media-lib-btn:hover,
.right-panel-reference-box .file-picker:hover,
.right-panel-chip:hover,
.right-panel-preset-chip:hover {
  color: var(--ms-ink-soft) !important;
  border-color: var(--ms-teal-600) !important;
  background: var(--ms-teal-50) !important;
  box-shadow: 0 0 0 2px rgba(76, 102, 103, 0.1) !important;
}

.rp-mention-item .rp-mention-badge,
.right-panel-reference-preview .reference-item.is-mention::after {
  background: var(--ms-teal-800) !important;
}

.battery-block {
  background: var(--ms-white) !important;
  border-color: var(--ms-border-strong) !important;
  box-shadow: 0 12px 30px rgba(21, 29, 30, 0.12) !important;
}

.battery-block:hover {
  border-color: var(--ms-teal-500) !important;
}

.battery-block.selected {
  border-color: var(--ms-teal-800) !important;
  box-shadow: 0 0 0 3px rgba(76, 102, 103, 0.14), 0 18px 38px rgba(21, 29, 30, 0.14) !important;
}

.block-header,
.block-footer {
  background: var(--ms-white) !important;
  border-color: var(--ms-border) !important;
}

.block-title,
.canvas-empty-state h2,
.agent-chat-empty p {
  color: var(--ms-ink) !important;
}

.block-canvas {
  background: linear-gradient(145deg, #829393, #4c6667 50%, #193945) !important;
}

.block-port {
  background: var(--ms-white) !important;
  border-color: var(--ms-teal-700) !important;
}

.block-port.connected {
  background: var(--ms-teal-700) !important;
}

.block-port:hover,
.block-port.reference:hover {
  border-color: var(--ms-teal-800) !important;
  background: var(--ms-teal-100) !important;
  box-shadow: 0 0 10px rgba(76, 102, 103, 0.18) !important;
}

.block-resize-handle:hover {
  border-color: var(--ms-teal-700) !important;
  background: rgba(76, 102, 103, 0.08) !important;
}

.block-status-badge.idle {
  color: var(--ms-muted) !important;
  background: var(--ms-surface-soft) !important;
}

.block-status-badge.submitting,
.block-status-badge.running {
  color: var(--ms-ink-soft) !important;
  background: var(--ms-teal-100) !important;
}

.block-status-badge.success {
  color: var(--ms-success) !important;
  background: #e2efeb !important;
}

.canvas-connections-layer path {
  stroke: var(--ms-teal-700) !important;
}

.selection-box {
  background: rgba(76, 102, 103, 0.12) !important;
  border-color: var(--ms-teal-700) !important;
}

.agent-chat-message.user {
  color: #ffffff !important;
  background: var(--ms-ink-soft) !important;
}

.agent-chat-message.agent,
.agent-chat-empty-icon {
  color: var(--ms-ink) !important;
  background: var(--ms-teal-50) !important;
}

.context-menu-item:hover {
  background: var(--ms-teal-50) !important;
}

/* ---- Legacy studio page ---- */
.top-bar,
.panel,
.task-card,
.media-item {
  border-color: var(--line) !important;
}

.primary-btn,
.submit-btn,
.btn-primary {
  color: #ffffff !important;
  background: var(--ms-teal-800) !important;
}

/* ---- Responsive polish ---- */
@media (max-width: 760px) {
  .login-brand-panel {
    background-size: auto, 28px 28px, 28px 28px, auto !important;
  }

  .home-bottom-bar-inner {
    border-radius: 16px;
  }

  .projects-header,
  .history-header,
  .home-header,
  .canvas-header {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

@media (max-width: 1000px) {
  .history-header {
    height: auto !important;
    min-height: 104px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    flex-wrap: wrap;
    align-content: center;
    gap: 8px 12px;
  }

  .history-breadcrumb {
    width: 100%;
  }

  .history-tabs,
  .history-header-right {
    flex: 0 0 auto;
  }
}

/* ================================================================
   STORM / FLUID EDITION — ambient motion without changing behavior
   ================================================================ */

/* ---- Login: pure fluid storm artwork, no brand copy ---- */
.login-split {
  background: #edf1ef;
}

.login-brand-panel {
  flex: 1.08 !important;
  min-width: 0;
  isolation: isolate;
  background: #10191b !important;
}

.login-brand-panel::before,
.login-brand-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.login-brand-panel::before {
  z-index: 4;
  opacity: 0.28;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(220, 235, 231, 0.08) 49%, transparent 55%),
    repeating-linear-gradient(118deg, transparent 0 18px, rgba(211, 226, 222, 0.055) 19px, transparent 21px);
  mix-blend-mode: screen;
  animation: storm-rain-drift 8s linear infinite;
}

.login-brand-panel::after {
  z-index: 8;
  box-shadow: inset -80px 0 120px rgba(8, 15, 17, 0.32), inset 0 -80px 110px rgba(8, 15, 17, 0.42);
}

.storm-fluid-scene {
  position: absolute;
  inset: -10%;
  overflow: hidden;
  transform: translateZ(0);
  background:
    radial-gradient(ellipse at 18% 20%, rgba(197, 214, 209, 0.16), transparent 26%),
    radial-gradient(ellipse at 78% 68%, rgba(86, 121, 120, 0.3), transparent 35%),
    linear-gradient(145deg, #0e1719 4%, #17282b 45%, #203f41 72%, #111b1d 100%);
}

.storm-haze,
.storm-current {
  position: absolute;
  will-change: transform, border-radius;
  pointer-events: none;
}

.storm-haze {
  width: 82%;
  height: 58%;
  border-radius: 48% 52% 62% 38% / 62% 34% 66% 38%;
  filter: blur(44px);
  opacity: 0.68;
}

.storm-haze-a {
  top: -12%;
  left: -20%;
  background: linear-gradient(135deg, rgba(218, 227, 224, 0.42), rgba(104, 132, 131, 0.18) 48%, transparent 74%);
  animation: storm-cloud-a 15s cubic-bezier(.68, -.2, .25, 1.2) infinite alternate;
}

.storm-haze-b {
  right: -22%;
  bottom: -4%;
  background: radial-gradient(ellipse, rgba(104, 139, 136, 0.45), rgba(43, 78, 79, 0.2) 55%, transparent 72%);
  animation: storm-cloud-b 19s cubic-bezier(.22, .9, .31, 1.08) infinite alternate;
}

.storm-current {
  width: 92%;
  height: 44%;
  left: 1%;
  border: 1px solid rgba(204, 221, 216, 0.19);
  border-left-color: transparent;
  border-bottom-color: rgba(111, 148, 145, 0.14);
  box-shadow: inset 0 0 55px rgba(189, 211, 204, 0.055), 0 0 45px rgba(110, 145, 143, 0.06);
}

.storm-current-a {
  top: 18%;
  border-radius: 72% 28% 66% 34% / 42% 66% 34% 58%;
  transform: rotate(-11deg);
  animation: storm-fluid-a 12s cubic-bezier(.77, 0, .18, 1) infinite alternate;
}

.storm-current-b {
  top: 42%;
  left: -8%;
  width: 112%;
  border-radius: 31% 69% 38% 62% / 63% 30% 70% 37%;
  border-color: rgba(181, 204, 198, 0.11);
  transform: rotate(8deg);
  animation: storm-fluid-b 17s cubic-bezier(.16, .92, .31, 1.05) infinite alternate;
}

.storm-vortex {
  position: absolute;
  width: min(58vw, 680px);
  aspect-ratio: 1.55;
  left: 48%;
  top: 48%;
  transform: translate(-50%, -50%) rotate(-9deg);
  opacity: 0.82;
  animation: storm-vortex-drift 13s cubic-bezier(.65, -.18, .24, 1.15) infinite alternate;
}

.storm-vortex i {
  position: absolute;
  inset: calc(var(--ring, 0) * 9%);
  border: 1px solid rgba(203, 219, 214, calc(.23 - var(--ring, 0) * .035));
  border-left-color: transparent;
  border-bottom-color: rgba(87, 128, 127, 0.08);
  border-radius: 58% 42% 64% 36% / 46% 63% 37% 54%;
  animation: storm-ring 10s cubic-bezier(.73, -.25, .24, 1.2) infinite alternate;
}

.storm-vortex i:nth-child(1) { --ring: 0; }
.storm-vortex i:nth-child(2) { --ring: 1; animation-delay: -2.4s; }
.storm-vortex i:nth-child(3) { --ring: 2; animation-delay: -4.8s; }
.storm-vortex i:nth-child(4) { --ring: 3; animation-delay: -7.2s; }

.storm-lightning {
  position: absolute;
  z-index: 5;
  top: 4%;
  left: 59%;
  width: 11%;
  height: 58%;
  opacity: 0;
  filter: drop-shadow(0 0 14px rgba(214, 237, 230, 0.8));
  background: linear-gradient(180deg, rgba(235, 247, 243, 0.9), rgba(132, 174, 169, 0.08));
  clip-path: polygon(44% 0, 72% 0, 54% 41%, 82% 41%, 19% 100%, 39% 54%, 18% 54%);
  animation: storm-flash 9s steps(1, end) infinite;
}

.storm-rain {
  position: absolute;
  z-index: 6;
  inset: 0;
  transform: skewX(-15deg);
  opacity: 0.44;
}

.storm-rain i {
  position: absolute;
  top: -22%;
  left: calc(var(--rain, 1) * 8%);
  width: 1px;
  height: calc(7% + var(--rain, 1) * .55%);
  background: linear-gradient(180deg, transparent, rgba(214, 230, 225, 0.62));
  animation: storm-rain-fall calc(1.5s + var(--rain, 1) * .07s) cubic-bezier(.44, .04, .68, .46) infinite;
  animation-delay: calc(var(--rain, 1) * -.19s);
}

.storm-rain i:nth-child(1) { --rain: 1; }
.storm-rain i:nth-child(2) { --rain: 2; }
.storm-rain i:nth-child(3) { --rain: 3; }
.storm-rain i:nth-child(4) { --rain: 4; }
.storm-rain i:nth-child(5) { --rain: 5; }
.storm-rain i:nth-child(6) { --rain: 6; }
.storm-rain i:nth-child(7) { --rain: 7; }
.storm-rain i:nth-child(8) { --rain: 8; }
.storm-rain i:nth-child(9) { --rain: 9; }
.storm-rain i:nth-child(10) { --rain: 10; }
.storm-rain i:nth-child(11) { --rain: 11; }
.storm-rain i:nth-child(12) { --rain: 12; }

.storm-grain {
  position: absolute;
  z-index: 7;
  inset: 0;
  opacity: 0.2;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.login-form-panel {
  flex: .92 !important;
  position: relative;
  overflow-y: auto;
  background:
    radial-gradient(circle at 84% 7%, rgba(111, 148, 145, 0.13), transparent 25%),
    radial-gradient(circle at 12% 88%, rgba(184, 202, 197, 0.18), transparent 28%),
    #f4f6f4 !important;
}

.login-form-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.55), transparent 38%);
}

.login-form-inner {
  position: relative;
  z-index: 1;
  max-width: 410px !important;
  margin: 28px;
  padding: 36px !important;
  border: 1px solid rgba(199, 208, 204, 0.78);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.73);
  box-shadow: 0 30px 80px rgba(21, 42, 43, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(24px) saturate(125%);
}

.login-tabs {
  margin-bottom: 34px !important;
  padding: 3px !important;
  border-radius: 999px !important;
  border-color: rgba(193, 204, 199, 0.72) !important;
  background: rgba(228, 234, 231, 0.7) !important;
}

.login-tab {
  padding: 9px 12px !important;
  border-radius: 999px !important;
  transition: color .25s ease, background .35s cubic-bezier(.16, 1, .3, 1), transform .35s cubic-bezier(.16, 1, .3, 1) !important;
}

.login-tab.active {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(29, 59, 59, 0.08) !important;
}

.login-form-heading {
  font-size: clamp(30px, 3vw, 38px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.055em !important;
}

.login-form-desc {
  margin-bottom: 30px !important;
  font-weight: 400 !important;
}

.login-field {
  gap: 8px !important;
  margin-bottom: 18px !important;
}

.login-field span {
  font-size: 11px !important;
  letter-spacing: .055em;
}

.login-input,
.login-sms-input {
  height: 48px !important;
  padding-inline: 15px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  transition: border-color .2s ease, box-shadow .25s ease, transform .3s cubic-bezier(.16, 1, .3, 1) !important;
}

.login-input:focus,
.login-sms-input:focus {
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(76, 102, 103, 0.1), 0 10px 24px rgba(28, 57, 57, 0.07) !important;
}

.login-btn {
  height: 50px !important;
  border-radius: 12px !important;
  letter-spacing: .01em;
  position: relative;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease, background .2s ease !important;
}

.login-btn::after {
  content: "";
  position: absolute;
  inset: -80% -25%;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.18) 48%, transparent 60%);
  transform: translateX(-60%) rotate(8deg);
  transition: transform .75s cubic-bezier(.16, 1, .3, 1);
}

.login-btn:hover::after { transform: translateX(60%) rotate(8deg); }

.login-sms-btn {
  height: 48px !important;
  border-radius: 12px !important;
  color: var(--ms-teal-800) !important;
  border-color: var(--ms-border) !important;
  background: rgba(255,255,255,.76) !important;
}

.login-sms-btn:hover {
  color: var(--ms-ink) !important;
  border-color: var(--ms-teal-500) !important;
  background: var(--ms-teal-50) !important;
}

/* ---- Home: calm surface with storm movement at the edges ---- */
.home-center-group {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 18%, rgba(184, 200, 195, 0.2), transparent 30%),
    linear-gradient(180deg, #f5f7f5 0%, var(--ms-canvas) 54%, #f1f4f2 100%) !important;
}

.home-center-group::before,
.home-center-group::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  will-change: transform, border-radius;
}

.home-center-group::before {
  width: 64%;
  height: 46%;
  top: -24%;
  right: -13%;
  border-radius: 42% 58% 63% 37% / 57% 42% 58% 43%;
  background: linear-gradient(150deg, rgba(97, 128, 126, 0.18), rgba(220, 228, 224, 0.08) 56%, transparent 72%);
  filter: blur(32px);
  animation: home-storm-cloud 18s cubic-bezier(.68, -.15, .25, 1.1) infinite alternate;
}

.home-center-group::after {
  inset: -5%;
  opacity: .2;
  background: repeating-linear-gradient(113deg, transparent 0 42px, rgba(62, 92, 92, .12) 43px, transparent 44px 82px);
  mask-image: linear-gradient(90deg, transparent 4%, #000 34%, transparent 84%);
  animation: home-rain-shift 14s linear infinite;
}

.home-hero {
  position: relative;
  animation: storm-rise .9s cubic-bezier(.16, 1, .3, 1) both;
}

.home-hero::before {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  left: 50%;
  top: 32%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(97, 128, 126, 0.13);
  border-left-color: transparent;
  border-radius: 53% 47% 67% 33% / 41% 62% 38% 59%;
  animation: hero-fluid-ring 11s cubic-bezier(.65, -.12, .28, 1.08) infinite alternate;
  pointer-events: none;
}

.home-hero-badge {
  position: relative;
  padding: 6px 12px 6px 10px !important;
  height: auto !important;
  border-radius: 999px !important;
  letter-spacing: .025em;
  background: rgba(229, 236, 233, .72) !important;
  backdrop-filter: blur(12px);
}

.home-hero-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ms-teal-700);
  box-shadow: 0 0 0 4px rgba(76, 102, 103, .09);
  animation: storm-pulse 3.6s cubic-bezier(.45, 0, .12, 1) infinite;
}

.home-hero-title {
  font-size: clamp(40px, 5vw, 58px) !important;
  font-weight: 590 !important;
  letter-spacing: -.06em !important;
}

.home-hero-subtitle {
  max-width: 580px;
  font-size: 16px !important;
  font-weight: 400 !important;
}

.home-bottom-bar-inner {
  border-color: rgba(193, 205, 200, .72) !important;
  background: rgba(246, 248, 246, .72) !important;
  box-shadow: 0 24px 70px rgba(24, 48, 48, .1), inset 0 1px 0 rgba(255,255,255,.85) !important;
}

.home-prompt-box,
.home-bottom-bar .home-prompt-box {
  position: relative;
  overflow: visible;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .92) !important;
}

.home-prompt-box::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(77, 112, 109, .48), transparent);
  transform: scaleX(.32);
  opacity: 0;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
}

.home-prompt-box:focus-within::before {
  transform: scaleX(1);
  opacity: 1;
}

/* Minimal home control icons, drawn in CSS to stay crisp */
.home-add-ref,
.home-gen-opt,
.home-start-btn,
.home-task-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px !important;
}

.home-add-ref::before,
.home-gen-opt::before,
.home-start-btn::after,
.home-task-action-btn::before {
  content: "";
  width: 13px;
  height: 13px;
  display: inline-block;
  flex: 0 0 auto;
  box-sizing: border-box;
}

.home-add-ref::before {
  width: 11px;
  height: 15px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 6px;
  transform: rotate(42deg) scale(.78);
}

.home-gen-opt[data-type="agent"]::before {
  background:
    linear-gradient(currentColor, currentColor) center/1.5px 100% no-repeat,
    linear-gradient(90deg, currentColor, currentColor) center/100% 1.5px no-repeat;
  transform: rotate(45deg) scale(.72);
}

.home-gen-opt[data-type="image"]::before {
  border: 1.4px solid currentColor;
  border-radius: 3px;
  background: linear-gradient(145deg, transparent 50%, currentColor 52% 58%, transparent 60%) bottom/100% 62% no-repeat;
}

.home-gen-opt[data-type="video"]::before {
  border: 1.4px solid currentColor;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent 32%, currentColor 34% 66%, transparent 68%) center/6px 7px no-repeat;
  clip-path: polygon(0 0, 100% 0, 100% 26%, 86% 26%, 86% 74%, 100% 74%, 100% 100%, 0 100%);
}

.home-start-btn::after {
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}

.home-start-btn:hover::after { transform: translateX(3px) rotate(45deg); }

/* Task cards: compact status rail and non-linear entrance */
.home-task-area { gap: 14px !important; }

.home-task-card {
  position: relative;
  overflow: hidden;
  padding: 14px !important;
  border-radius: 20px !important;
  border-color: rgba(197, 207, 202, .78) !important;
  background: rgba(255, 255, 255, .9) !important;
  box-shadow: 0 18px 55px rgba(26, 50, 50, .075), inset 0 1px 0 #fff !important;
  animation: task-card-arrive .72s cubic-bezier(.16, 1, .3, 1) both;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease, border-color .3s ease !important;
}

.home-task-card:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 150, 146, .72) !important;
  box-shadow: 0 24px 65px rgba(26, 50, 50, .11), inset 0 1px 0 #fff !important;
}

.home-task-card::after {
  content: "";
  position: absolute;
  width: 190px;
  height: 80px;
  right: -70px;
  top: -40px;
  border: 1px solid rgba(85, 119, 116, .1);
  border-radius: 55% 45% 66% 34% / 42% 65% 35% 58%;
  transform: rotate(-12deg);
  pointer-events: none;
}

.home-task-card-header {
  position: relative;
  min-height: 42px;
  margin: -14px -14px 14px !important;
  padding: 10px 14px !important;
  gap: 10px !important;
  border-bottom: 1px solid rgba(207, 216, 212, .72);
  background: linear-gradient(110deg, rgba(233, 239, 236, .88), rgba(248, 250, 249, .72) 62%, rgba(213, 224, 220, .46));
  overflow: hidden;
}

.home-task-card-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  opacity: .7;
  background: linear-gradient(90deg, transparent, var(--ms-teal-500), transparent);
  transform: translateX(-70%) scaleX(.5);
  animation: task-status-sweep 3.8s cubic-bezier(.61, 0, .3, 1) infinite;
}

.home-task-card-header.success {
  background: linear-gradient(110deg, rgba(226, 239, 235, .92), rgba(249, 251, 250, .78));
}

.home-task-card-header.failed {
  background: linear-gradient(110deg, rgba(247, 233, 231, .92), rgba(251, 249, 248, .82));
}

.home-task-card-header:is(.success, .failed)::after { display: none; }

.home-task-spinner {
  position: relative;
  width: 18px !important;
  height: 18px !important;
  border: 0 !important;
  border-radius: 50%;
  background: conic-gradient(from 20deg, transparent 0 24%, var(--ms-teal-700) 26% 64%, rgba(76, 102, 103, .18) 66% 100%);
  animation: task-fluid-spin 1.4s cubic-bezier(.62, .04, .28, .98) infinite !important;
}

.home-task-spinner::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #f4f8f6;
}

.home-task-card-header.success .home-task-spinner,
.home-task-card-header.failed .home-task-spinner {
  animation: none !important;
  background: var(--ms-success) !important;
}

.home-task-card-header.failed .home-task-spinner { background: var(--ms-danger) !important; }

.home-task-card-header.success .home-task-spinner::before {
  inset: 4px 5px 6px 5px;
  border-radius: 0;
  border-right: 1.7px solid white;
  border-bottom: 1.7px solid white;
  background: transparent;
  transform: rotate(45deg);
}

.home-task-card-header.failed .home-task-spinner::before {
  inset: 4px;
  background:
    linear-gradient(45deg, transparent 44%, white 45% 55%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, white 45% 55%, transparent 56%);
}

.home-task-status {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
}

.home-task-elapsed {
  padding: 4px 8px;
  border: 1px solid rgba(195, 207, 201, .72);
  border-radius: 999px;
  background: rgba(255,255,255,.58);
  color: var(--ms-muted) !important;
  font-variant-numeric: tabular-nums;
}

.home-task-delete-btn {
  position: relative;
  width: 26px !important;
  height: 26px !important;
  margin-left: 0 !important;
  border-radius: 50% !important;
  color: var(--ms-muted) !important;
  font-size: 0 !important;
}

.home-task-delete-btn::before,
.home-task-delete-btn::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 1px;
  background: currentColor;
  transform: rotate(45deg);
}

.home-task-delete-btn::after { transform: rotate(-45deg); }

.home-task-delete-btn:hover {
  color: var(--ms-danger) !important;
  background: rgba(169, 76, 70, .08) !important;
}

.home-task-prompt-preview {
  padding: 12px 14px !important;
  border: 1px solid rgba(217, 224, 220, .75);
  border-radius: 12px !important;
  background: rgba(241, 245, 243, .76) !important;
}

.home-task-time {
  margin: 9px 2px 0 !important;
  color: var(--ms-muted-light) !important;
}

.home-task-actions {
  align-items: center;
  margin-top: 13px !important;
}

.home-task-action-btn {
  min-height: 34px;
  border-radius: 999px !important;
  padding-inline: 14px !important;
}

.home-task-action-btn.task-reedit-btn::before {
  width: 11px;
  height: 11px;
  border: 1.4px solid currentColor;
  border-radius: 2px;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 34% 100%, 0 100%);
}

.home-task-action-btn.primary::before {
  border: 1.4px solid currentColor;
  border-left-color: transparent;
  border-radius: 50%;
}

.home-task-result {
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(229, 236, 233, .62), rgba(246, 248, 247, .76));
}

/* ---- Non-linear ambient keyframes ---- */
@keyframes storm-cloud-a {
  0% { transform: translate3d(-5%, -4%, 0) rotate(-8deg) scale(1); border-radius: 48% 52% 62% 38% / 62% 34% 66% 38%; }
  57% { transform: translate3d(10%, 12%, 0) rotate(5deg) scale(1.14); border-radius: 67% 33% 42% 58% / 38% 63% 37% 62%; }
  100% { transform: translate3d(4%, 20%, 0) rotate(-2deg) scale(.96); border-radius: 35% 65% 58% 42% / 59% 43% 57% 41%; }
}

@keyframes storm-cloud-b {
  0% { transform: translate3d(7%, 5%, 0) rotate(6deg) scale(.92); }
  48% { transform: translate3d(-14%, -9%, 0) rotate(-7deg) scale(1.12); }
  100% { transform: translate3d(-3%, -18%, 0) rotate(3deg) scale(1.02); }
}

@keyframes storm-fluid-a {
  0% { transform: translate3d(-8%, 0, 0) rotate(-11deg) scaleX(.94); border-radius: 72% 28% 66% 34% / 42% 66% 34% 58%; }
  52% { transform: translate3d(7%, 8%, 0) rotate(-3deg) scaleX(1.08); border-radius: 38% 62% 31% 69% / 67% 33% 64% 36%; }
  100% { transform: translate3d(1%, 17%, 0) rotate(7deg) scaleX(.98); border-radius: 61% 39% 72% 28% / 34% 58% 42% 66%; }
}

@keyframes storm-fluid-b {
  0% { transform: translate3d(7%, 12%, 0) rotate(8deg); }
  63% { transform: translate3d(-9%, -7%, 0) rotate(-5deg) scaleY(1.15); }
  100% { transform: translate3d(3%, -15%, 0) rotate(2deg) scaleX(1.08); }
}

@keyframes storm-vortex-drift {
  0% { transform: translate(-54%, -45%) rotate(-13deg) scale(.93); }
  62% { transform: translate(-46%, -54%) rotate(4deg) scale(1.05); }
  100% { transform: translate(-50%, -48%) rotate(-2deg) scale(.98); }
}

@keyframes storm-ring {
  0% { transform: rotate(-5deg) scale(.96); }
  45% { transform: rotate(7deg) scale(1.04, .93); }
  100% { transform: rotate(-1deg) scale(.98, 1.06); }
}

@keyframes storm-flash {
  0%, 8%, 10%, 12%, 53%, 55%, 100% { opacity: 0; }
  9%, 54% { opacity: .74; }
  9.5%, 54.5% { opacity: .12; }
}

@keyframes storm-rain-fall {
  0% { transform: translate3d(-40px, -15vh, 0); opacity: 0; }
  16% { opacity: .7; }
  78% { opacity: .35; }
  100% { transform: translate3d(52px, 130vh, 0); opacity: 0; }
}

@keyframes storm-rain-drift { to { background-position: 0 0, 310px 540px; } }
@keyframes home-rain-shift { to { transform: translate3d(190px, 110px, 0); } }

@keyframes home-storm-cloud {
  0% { transform: translate3d(0, 0, 0) rotate(-8deg); border-radius: 42% 58% 63% 37% / 57% 42% 58% 43%; }
  58% { transform: translate3d(-12%, 18%, 0) rotate(5deg) scale(1.12); border-radius: 66% 34% 39% 61% / 33% 62% 38% 67%; }
  100% { transform: translate3d(-4%, 7%, 0) rotate(-1deg) scale(.97); }
}

@keyframes hero-fluid-ring {
  0% { transform: translate(-50%, -50%) rotate(-8deg) scale(.94); }
  48% { transform: translate(-48%, -53%) rotate(11deg) scale(1.06, .95); border-radius: 37% 63% 42% 58% / 68% 35% 65% 32%; }
  100% { transform: translate(-52%, -47%) rotate(2deg) scale(.98, 1.04); }
}

@keyframes storm-rise {
  from { opacity: 0; transform: translateY(24px) scale(.985); filter: blur(7px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes storm-pulse {
  0%, 100% { transform: scale(.82); box-shadow: 0 0 0 0 rgba(76, 102, 103, .16); }
  42% { transform: scale(1); box-shadow: 0 0 0 6px rgba(76, 102, 103, 0); }
  58% { transform: scale(.9); }
}

@keyframes task-card-arrive {
  from { opacity: 0; transform: translateY(22px) scale(.985); filter: blur(5px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes task-fluid-spin {
  0% { transform: rotate(0deg) scale(.9); }
  45% { transform: rotate(160deg) scale(1.04); }
  100% { transform: rotate(360deg) scale(.9); }
}

@keyframes task-status-sweep {
  0% { transform: translateX(-80%) scaleX(.35); opacity: 0; }
  16% { opacity: .7; }
  62% { transform: translateX(55%) scaleX(.85); opacity: .55; }
  100% { transform: translateX(130%) scaleX(.2); opacity: 0; }
}

@media (max-width: 900px) {
  .login-body { overflow: auto !important; }
  .login-brand-panel {
    min-height: 210px !important;
    flex-basis: 210px !important;
  }
  .storm-fluid-scene { inset: -28% -8%; }
  .storm-vortex { width: 78vw; max-width: 620px; }
  .login-form-inner {
    width: calc(100% - 32px);
    margin: 16px;
    padding: 30px 24px !important;
    box-sizing: border-box;
  }
}

@media (max-width: 600px) {
  .login-brand-panel {
    min-height: 150px !important;
    flex-basis: 150px !important;
  }
  .login-form-inner { border-radius: 20px; }
  .home-center-group::after { opacity: .12; }
  .home-hero::before { width: 190px; height: 190px; }
  .home-task-card { border-radius: 16px !important; }
  .home-task-card-header { flex-wrap: wrap; }
  .home-task-status { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}