/* OpenClaw Pro Unified Skin — owner customization
   Goal: one coherent premium control surface, not scattered one-off styling. */
:root{
  --oc-pro-bg-0:#05070d;
  --oc-pro-bg-1:#08111f;
  --oc-pro-bg-2:#0c1729;
  --oc-pro-surface:rgba(12,18,32,.74);
  --oc-pro-surface-strong:rgba(16,24,42,.88);
  --oc-pro-surface-soft:rgba(22,32,54,.56);
  --oc-pro-line:rgba(148,163,184,.18);
  --oc-pro-line-strong:rgba(148,163,184,.28);
  --oc-pro-cyan:#38d7ff;
  --oc-pro-blue:#5b8cff;
  --oc-pro-violet:#75c494;
  --oc-pro-rose:#fb7185;
  --oc-pro-green:#34d399;
  --oc-pro-amber:#fbbf24;
  --oc-pro-text:#eaf2ff;
  --oc-pro-muted:#92a4bd;
  --oc-pro-shadow:0 24px 70px rgba(0,0,0,.42),0 1px 0 rgba(255,255,255,.06) inset;
  --oc-pro-shadow-soft:0 14px 38px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.05) inset;
  --oc-pro-glow:0 0 0 1px rgba(56,215,255,.12),0 0 34px rgba(91,140,255,.16);

  --bg:var(--oc-pro-bg-0);
  --bg-accent:#08111f;
  --bg-elevated:#0d1728;
  --bg-hover:#14243b;
  --bg-muted:#101b2f;
  --card:rgba(13,22,38,.78);
  --panel:rgba(6,10,18,.86);
  --panel-strong:rgba(12,20,35,.92);
  --chrome:rgba(5,8,15,.76);
  --chrome-strong:rgba(7,11,20,.9);
  --text:var(--oc-pro-text);
  --text-strong:#f7fbff;
  --chat-text:#edf5ff;
  --muted:var(--oc-pro-muted);
  --muted-foreground:var(--oc-pro-muted);
  --border:var(--oc-pro-line);
  --border-strong:var(--oc-pro-line-strong);
  --border-hover:rgba(56,215,255,.34);
  --input:rgba(9,16,29,.82);
  --ring:var(--oc-pro-cyan);
  --accent:var(--oc-pro-cyan);
  --accent-hover:#72e4ff;
  --accent-muted:#59dfff;
  --accent-subtle:rgba(56,215,255,.13);
  --accent-glow:rgba(56,215,255,.28);
  --primary:var(--oc-pro-cyan);
  --accent-2:var(--oc-pro-violet);
  --ok:var(--oc-pro-green);
  --warn:var(--oc-pro-amber);
  --danger:#fb7185;
  --destructive:#fb7185;
  --radius-sm:9px;
  --radius-md:13px;
  --radius-lg:18px;
  --radius-xl:24px;
  --shadow-sm:0 6px 18px rgba(0,0,0,.18);
  --shadow-md:var(--oc-pro-shadow-soft);
  --shadow-lg:var(--oc-pro-shadow);
  --shadow-xl:0 34px 90px rgba(0,0,0,.52);
  --shadow-glow:var(--oc-pro-glow);
}

:root[data-theme-mode="light"]{
  --oc-pro-bg-0:#edf5ff;
  --oc-pro-bg-1:#f7fbff;
  --oc-pro-bg-2:#dfeeff;
  --oc-pro-surface:rgba(255,255,255,.78);
  --oc-pro-surface-strong:rgba(255,255,255,.92);
  --oc-pro-surface-soft:rgba(255,255,255,.58);
  --oc-pro-line:rgba(51,65,85,.15);
  --oc-pro-line-strong:rgba(51,65,85,.24);
  --oc-pro-text:#101828;
  --oc-pro-muted:#64748b;
  --bg:#edf5ff;
  --bg-accent:#f7fbff;
  --bg-elevated:#fff;
  --bg-hover:#e8f2ff;
  --bg-muted:#eef6ff;
  --card:rgba(255,255,255,.78);
  --panel:rgba(247,251,255,.84);
  --panel-strong:rgba(255,255,255,.9);
  --chrome:rgba(255,255,255,.72);
  --chrome-strong:rgba(255,255,255,.9);
  --text:#1f2937;
  --text-strong:#0f172a;
  --chat-text:#111827;
  --border:rgba(51,65,85,.15);
  --border-strong:rgba(51,65,85,.24);
  --input:rgba(255,255,255,.86);
  --ring:var(--oc-pro-blue);
  --accent:var(--oc-pro-blue);
  --accent-hover:#38d7ff;
  --accent-muted:#4f9cff;
  --accent-subtle:rgba(91,140,255,.13);
  --accent-glow:rgba(91,140,255,.22);
  --primary:var(--oc-pro-blue);
  --accent-2:var(--oc-pro-violet);
  --ok:#059669;
  --warn:#d97706;
  --danger:#e11d48;
  --destructive:#e11d48;
}

html,body{
  background:
    radial-gradient(circle at 18% 10%,rgba(56,215,255,.18),transparent 28%),
    radial-gradient(circle at 78% 6%,rgba(111,189,141,.17),transparent 30%),
    radial-gradient(circle at 58% 90%,rgba(91,140,255,.14),transparent 34%),
    linear-gradient(135deg,var(--oc-pro-bg-0),var(--oc-pro-bg-1) 45%,var(--oc-pro-bg-2));
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at 50% 18%,black,transparent 72%);
}

body:after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:linear-gradient(180deg,rgba(255,255,255,.055),transparent 16%,rgba(0,0,0,.12));
  mix-blend-mode:screen;
  opacity:.42;
}

openclaw-app,.shell{position:relative;z-index:1}.shell{background:transparent}.content{background:transparent;padding:18px 20px 22px}.shell-nav{background:linear-gradient(180deg,rgba(3,7,14,.9),rgba(7,12,22,.74));border-right:1px solid rgba(148,163,184,.16);box-shadow:18px 0 50px rgba(0,0,0,.22)}
:root[data-theme-mode="light"] .shell-nav{background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(241,247,255,.72));border-right-color:rgba(51,65,85,.14)}
.sidebar{background:transparent!important}.sidebar-shell{padding:16px 12px 14px}.topbar{min-height:62px;background:linear-gradient(180deg,rgba(9,16,29,.72),rgba(9,16,29,.46));border-bottom:1px solid rgba(148,163,184,.16);backdrop-filter:blur(22px) saturate(1.35);-webkit-backdrop-filter:blur(22px) saturate(1.35);box-shadow:0 10px 34px rgba(0,0,0,.18)}
:root[data-theme-mode="light"] .topbar{background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.5));box-shadow:0 10px 30px rgba(15,23,42,.08)}

.card,.stat,.note,.list-item,.panel,.settings-panel,.sessions-card,.workboard-panel,.chat-panel,.log-stream,.data-table-wrap,.details-card,.route-card,.node-card,.agent-card,.config-card{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025)),var(--oc-pro-surface)!important;
  border:1px solid var(--oc-pro-line)!important;
  box-shadow:var(--oc-pro-shadow-soft);
  backdrop-filter:blur(18px) saturate(1.24);
  -webkit-backdrop-filter:blur(18px) saturate(1.24);
}
.card:hover,.list-item:hover,.stat:hover,.route-card:hover,.node-card:hover,.agent-card:hover{border-color:rgba(56,215,255,.28)!important;box-shadow:var(--oc-pro-shadow),var(--oc-pro-glow)}

.nav-item{border-radius:14px;min-height:42px;color:color-mix(in srgb,var(--text) 72%,var(--muted));font-weight:650;letter-spacing:-.01em}.nav-item:hover{background:linear-gradient(135deg,rgba(56,215,255,.11),rgba(111,189,141,.08));border-color:rgba(56,215,255,.22);color:var(--text-strong);transform:translateX(1px)}.nav-item.active,.nav-item--active{background:linear-gradient(135deg,rgba(56,215,255,.18),rgba(91,140,255,.12) 54%,rgba(111,189,141,.16));border-color:rgba(56,215,255,.34);box-shadow:inset 0 1px rgba(255,255,255,.16),0 12px 30px rgba(0,0,0,.22),0 0 28px rgba(56,215,255,.12);color:var(--text-strong)}.nav-item.active .nav-item__icon,.nav-item--active .nav-item__icon{color:var(--oc-pro-cyan);filter:drop-shadow(0 0 10px rgba(56,215,255,.38))}

.btn,button.btn,.button,.sidebar-menu-trigger,.nav-collapse-toggle,.theme-orb__trigger{border-radius:14px;border-color:rgba(148,163,184,.22);background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025));box-shadow:inset 0 1px rgba(255,255,255,.11),0 8px 22px rgba(0,0,0,.16);transition:transform .16s var(--ease-out),border-color .16s var(--ease-out),box-shadow .16s var(--ease-out),background .16s var(--ease-out)}.btn:hover,button.btn:hover,.button:hover,.sidebar-menu-trigger:hover,.nav-collapse-toggle:hover,.theme-orb__trigger:hover{border-color:rgba(56,215,255,.35);box-shadow:inset 0 1px rgba(255,255,255,.16),0 12px 28px rgba(0,0,0,.22),0 0 24px rgba(56,215,255,.12);transform:translateY(-1px)}.btn--primary,.btn.primary,.button.primary{background:linear-gradient(135deg,var(--oc-pro-cyan),var(--oc-pro-blue) 55%,var(--oc-pro-violet));color:#03111f;border-color:rgba(255,255,255,.22);font-weight:750;box-shadow:0 14px 36px rgba(56,215,255,.2),inset 0 1px rgba(255,255,255,.28)}

input,textarea,select,.field input,.field textarea,.field select,.chat-compose__field textarea,.input{background:rgba(5,10,20,.58)!important;border:1px solid rgba(148,163,184,.2)!important;border-radius:16px!important;box-shadow:inset 0 1px rgba(255,255,255,.07),0 10px 26px rgba(0,0,0,.12);transition:border-color .16s var(--ease-out),box-shadow .16s var(--ease-out),background .16s var(--ease-out)}input:focus,textarea:focus,select:focus,.field input:focus,.field textarea:focus,.field select:focus,.chat-compose__field textarea:focus,.input:focus{border-color:rgba(56,215,255,.52)!important;box-shadow:0 0 0 3px rgba(56,215,255,.14),0 0 32px rgba(56,215,255,.11),inset 0 1px rgba(255,255,255,.08)!important;outline:none!important}
:root[data-theme-mode="light"] input,:root[data-theme-mode="light"] textarea,:root[data-theme-mode="light"] select,:root[data-theme-mode="light"] .field input,:root[data-theme-mode="light"] .field textarea,:root[data-theme-mode="light"] .field select,:root[data-theme-mode="light"] .chat-compose__field textarea{background:rgba(255,255,255,.78)!important}

.chat-bubble{border:1px solid rgba(148,163,184,.16);background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.028));box-shadow:0 12px 34px rgba(0,0,0,.18);border-radius:20px}.chat-bubble--assistant,.chat-message--assistant .chat-bubble{background:linear-gradient(180deg,rgba(56,215,255,.075),rgba(91,140,255,.04)),rgba(10,18,32,.72);border-color:rgba(56,215,255,.18)}.chat-bubble--user,.chat-message--user .chat-bubble{background:linear-gradient(135deg,rgba(56,215,255,.18),rgba(91,140,255,.11));border-color:rgba(56,215,255,.28)}.chat-compose,.chat-input-shell{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035)),rgba(8,14,26,.78)!important;border:1px solid rgba(148,163,184,.18)!important;box-shadow:0 -18px 60px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(20px) saturate(1.25);-webkit-backdrop-filter:blur(20px) saturate(1.25)}

.pill,.badge,.status-badge{border:1px solid rgba(148,163,184,.18);background:rgba(255,255,255,.055);box-shadow:inset 0 1px rgba(255,255,255,.08);border-radius:999px}.pill--ok,.badge--ok,.status-ok{background:rgba(52,211,153,.13);border-color:rgba(52,211,153,.28);color:#8ff7c8}.pill--warn,.badge--warn,.status-warn{background:rgba(251,191,36,.13);border-color:rgba(251,191,36,.3);color:#ffe08a}.pill--danger,.badge--danger,.status-danger{background:rgba(251,113,133,.13);border-color:rgba(251,113,133,.32);color:#ffabb8}

.data-table{border-collapse:separate;border-spacing:0}.data-table th{background:rgba(255,255,255,.055);color:var(--text-strong);font-weight:750}.data-table td,.data-table th{border-color:rgba(148,163,184,.14)}.data-table tr:hover td{background:rgba(56,215,255,.045)}

.code-block,pre,code{border-color:rgba(148,163,184,.18);background:rgba(3,8,17,.68);border-radius:14px}.markdown-body a,a{color:#70ddff;text-underline-offset:.18em}.dashboard-header__breadcrumb-current,.brand-title{background:linear-gradient(135deg,#fff,#a8eaff 45%,#c8b6ff);-webkit-background-clip:text;background-clip:text;color:transparent}.brand-mark,.brand-logo{filter:drop-shadow(0 0 18px rgba(56,215,255,.25))}

@media (prefers-reduced-motion:no-preference){.card,.list-item,.stat,.nav-item,.btn{transition:transform .16s var(--ease-out),border-color .16s var(--ease-out),box-shadow .16s var(--ease-out),background .16s var(--ease-out)}.card:hover,.list-item:hover,.stat:hover{transform:translateY(-1px)}}
@media (max-width:720px){.content{padding:12px 10px 16px}.topbar{min-height:58px}.chat-bubble{border-radius:17px}}

/* v2 refinement — real rendered gate + denser premium hierarchy */
.login-gate{
  min-height:100vh;
  padding:clamp(20px,4vw,54px);
  display:grid;
  place-items:center;
  position:relative;
  isolation:isolate;
}
.login-gate:before{
  content:"";
  position:absolute;
  width:min(860px,72vw);
  aspect-ratio:1.8;
  top:8vh;
  left:50%;
  translate:-50% 0;
  border-radius:999px;
  background:radial-gradient(closest-side,rgba(56,215,255,.24),rgba(91,140,255,.12) 48%,transparent 75%);
  filter:blur(30px);
  opacity:.9;
  z-index:-1;
}
.login-gate__card{
  width:min(100%,760px)!important;
  border-radius:32px!important;
  padding:30px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.055) 34%,rgba(255,255,255,.035)),
    rgba(8,14,26,.72)!important;
  border:1px solid rgba(148,163,184,.24)!important;
  box-shadow:0 34px 110px rgba(0,0,0,.46),0 1px 0 rgba(255,255,255,.16) inset,0 0 0 1px rgba(56,215,255,.06)!important;
  backdrop-filter:blur(28px) saturate(1.32)!important;
  -webkit-backdrop-filter:blur(28px) saturate(1.32)!important;
}
:root[data-theme-mode="light"] .login-gate__card{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.74)),rgba(255,255,255,.7)!important;
  box-shadow:0 34px 90px rgba(31,41,55,.16),0 1px 0 rgba(255,255,255,.9) inset!important;
}
.login-gate__header{
  display:grid!important;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:14px 16px!important;
  margin:0 0 22px!important;
  padding:0 0 20px;
  border-bottom:1px solid rgba(148,163,184,.14);
}
.login-gate__logo{
  width:54px!important;
  height:54px!important;
  grid-row:1 / span 2;
  border-radius:18px;
  padding:8px;
  background:linear-gradient(135deg,rgba(56,215,255,.2),rgba(111,189,141,.16));
  box-shadow:0 18px 38px rgba(56,215,255,.16),inset 0 1px rgba(255,255,255,.24);
}
.login-gate__title{
  margin:0!important;
  font-size:clamp(28px,4vw,42px)!important;
  line-height:1!important;
  font-weight:860!important;
  letter-spacing:-.055em!important;
  background:linear-gradient(135deg,#ffffff 0%,#b9f2ff 42%,#a8dfbf 75%,#ffffff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
}
:root[data-theme-mode="light"] .login-gate__title{background:linear-gradient(135deg,#0f172a,#2563eb 52%,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.login-gate__sub{
  color:var(--oc-pro-muted)!important;
  font-size:14px!important;
  font-weight:650!important;
  letter-spacing:.08em!important;
  text-transform:uppercase;
}
.login-gate__form{
  display:grid!important;
  gap:13px!important;
  margin:0 0 18px!important;
}
.field{
  gap:7px!important;
  color:var(--oc-pro-muted)!important;
  font-size:12px!important;
  font-weight:750!important;
  letter-spacing:.04em;
}
.field input,.login-gate input{
  height:48px!important;
  padding:0 14px!important;
  font-size:15px!important;
}
.login-gate__secret-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 48px;
  gap:9px!important;
}
.btn.primary.login-gate__connect,.login-gate__connect{
  height:50px!important;
  margin-top:2px!important;
  border-radius:17px!important;
  font-size:15px!important;
  font-weight:820!important;
  letter-spacing:-.01em!important;
  color:#03111f!important;
  background:linear-gradient(135deg,#38d7ff,#5b8cff 54%,#75c494)!important;
  border:1px solid rgba(255,255,255,.32)!important;
  box-shadow:0 20px 46px rgba(56,215,255,.24),0 1px 0 rgba(255,255,255,.38) inset!important;
}
.btn.primary.login-gate__connect:hover,.login-gate__connect:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 24px 58px rgba(56,215,255,.32),0 1px 0 rgba(255,255,255,.45) inset!important;
}
.callout.danger.login-gate__failure{
  margin:16px 0!important;
  padding:16px 18px!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,rgba(251,113,133,.105),rgba(251,113,133,.045)),rgba(255,255,255,.035)!important;
  border:1px solid rgba(251,113,133,.24)!important;
  color:var(--text)!important;
  box-shadow:0 16px 42px rgba(127,29,29,.12),inset 0 1px rgba(255,255,255,.08)!important;
}
.login-gate__failure-title{
  color:#fb7185!important;
  font-size:14px!important;
  font-weight:840!important;
  letter-spacing:.01em!important;
  margin-bottom:5px!important;
}
.login-gate__failure-summary,.login-gate__failure-steps{
  color:color-mix(in srgb,var(--text) 82%,var(--muted))!important;
  font-size:13px!important;
  line-height:1.55!important;
}
.login-gate__failure-detail summary{
  color:var(--oc-pro-muted)!important;
  font-size:12px!important;
  cursor:pointer;
}
.login-gate__failure-raw,.login-gate__command{
  border-radius:13px!important;
  border:1px solid rgba(148,163,184,.16)!important;
  background:rgba(3,8,17,.54)!important;
  color:#b9f2ff!important;
  font-size:12px!important;
  line-height:1.55!important;
  box-shadow:inset 0 1px rgba(255,255,255,.06);
}
:root[data-theme-mode="light"] .login-gate__failure-raw,:root[data-theme-mode="light"] .login-gate__command{background:rgba(15,23,42,.055)!important;color:#1d4ed8!important}
.login-gate__help{
  margin-top:18px!important;
  padding:18px!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,rgba(56,215,255,.06),rgba(255,255,255,.025)),rgba(255,255,255,.03)!important;
  border:1px solid rgba(148,163,184,.16)!important;
}
.login-gate__help-title{
  font-size:13px!important;
  font-weight:830!important;
  color:var(--text-strong)!important;
  margin-bottom:8px!important;
}
.login-gate__steps{
  color:color-mix(in srgb,var(--text) 78%,var(--muted))!important;
  line-height:1.6!important;
  font-size:13px!important;
}
.session-link,.login-gate__failure-docs,.login-gate__doc{
  color:#38d7ff!important;
  font-weight:700!important;
}

/* richer app-shell targets for authenticated routes */
:where(.shell,.app-shell,.dashboard-shell,.chat-shell){background:transparent!important}
:where(.content,.main-content,.page-content,.chat-content){background:transparent!important}
:where(.chat-header,.session-header,.dashboard-header,.settings-header){border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.026));border:1px solid rgba(148,163,184,.16);box-shadow:var(--oc-pro-shadow-soft);padding:14px 16px}
:where(.message,.chat-message,.thread-message){border-radius:22px!important}
:where(.message:hover,.chat-message:hover){background:rgba(56,215,255,.035)!important}
:where(.toolbar,.action-bar,.controls,.chat-controls){border-radius:18px;background:rgba(255,255,255,.045);border:1px solid rgba(148,163,184,.15);box-shadow:inset 0 1px rgba(255,255,255,.07)}
:where(.empty-state,.placeholder,.welcome-card){background:linear-gradient(135deg,rgba(56,215,255,.11),rgba(111,189,141,.08));border:1px solid rgba(56,215,255,.18);border-radius:28px;box-shadow:var(--oc-pro-shadow-soft)}

@media (max-width:720px){
  .login-gate{padding:14px;place-items:start center}.login-gate__card{padding:20px!important;border-radius:24px!important}.login-gate__header{grid-template-columns:1fr;text-align:left;gap:8px!important}.login-gate__logo{grid-row:auto;width:46px!important;height:46px!important}.login-gate__title{font-size:30px!important}.login-gate__help{padding:14px!important}.callout.danger.login-gate__failure{padding:14px!important}
}

/* v3 polish — more enterprise, less playful */
.login-gate__card{
  width:min(100%,720px)!important;
  border-radius:24px!important;
  padding:28px!important;
}
.login-gate__logo{
  filter:hue-rotate(165deg) saturate(.9) brightness(1.08) drop-shadow(0 14px 28px rgba(37,99,235,.16));
  background:linear-gradient(135deg,rgba(37,99,235,.16),rgba(56,215,255,.12))!important;
}
.login-gate__title{
  font-size:clamp(26px,3.4vw,38px)!important;
  letter-spacing:-.05em!important;
}
.btn.primary.login-gate__connect,.login-gate__connect{
  background:linear-gradient(180deg,#3b82f6,#2563eb)!important;
  color:#fff!important;
  box-shadow:0 18px 38px rgba(37,99,235,.25),0 1px 0 rgba(255,255,255,.26) inset!important;
}
.btn.primary.login-gate__connect:hover,.login-gate__connect:hover{
  background:linear-gradient(180deg,#4f8df8,#1d4ed8)!important;
  box-shadow:0 22px 50px rgba(37,99,235,.3),0 1px 0 rgba(255,255,255,.32) inset!important;
}
.login-gate__failure-steps,.login-gate__steps{padding-left:1.25rem!important}.login-gate__failure-steps li,.login-gate__steps li{margin:.38rem 0!important}.login-gate__help{display:grid;gap:8px}.login-gate__command{padding:8px 10px!important}.login-gate__failure-raw{padding:10px 12px!important}
.openclaw-progress-capsule,.oc-progress-capsule,[class*="capsule"]{
  filter:saturate(.9)!important;
}

/* v4 owner correction — remove mismatched white-light surface; force unified obsidian glass even in light mode */
:root[data-theme-mode="light"]{
  --oc-pro-bg-0:#05070d;
  --oc-pro-bg-1:#08111f;
  --oc-pro-bg-2:#0c1729;
  --oc-pro-surface:rgba(12,18,32,.76);
  --oc-pro-surface-strong:rgba(16,24,42,.9);
  --oc-pro-surface-soft:rgba(22,32,54,.58);
  --oc-pro-line:rgba(148,163,184,.18);
  --oc-pro-line-strong:rgba(148,163,184,.28);
  --oc-pro-text:#eaf2ff;
  --oc-pro-muted:#92a4bd;
  --bg:#05070d;
  --bg-accent:#08111f;
  --bg-elevated:#0d1728;
  --bg-hover:#14243b;
  --bg-muted:#101b2f;
  --card:rgba(13,22,38,.78);
  --panel:rgba(6,10,18,.86);
  --panel-strong:rgba(12,20,35,.92);
  --chrome:rgba(5,8,15,.76);
  --chrome-strong:rgba(7,11,20,.9);
  --text:#eaf2ff;
  --text-strong:#f7fbff;
  --chat-text:#edf5ff;
  --muted:#92a4bd;
  --muted-foreground:#92a4bd;
  --border:rgba(148,163,184,.18);
  --border-strong:rgba(148,163,184,.28);
  --input:rgba(9,16,29,.82);
  --ring:#38d7ff;
  --accent:#38d7ff;
  --accent-hover:#72e4ff;
  --accent-muted:#59dfff;
  --accent-subtle:rgba(56,215,255,.13);
  --accent-glow:rgba(56,215,255,.28);
  --primary:#38d7ff;
  color-scheme:dark;
}
:root[data-theme-mode="light"] body,
:root[data-theme-mode="light"] html{
  background:
    radial-gradient(circle at 18% 10%,rgba(56,215,255,.18),transparent 28%),
    radial-gradient(circle at 78% 6%,rgba(111,189,141,.17),transparent 30%),
    radial-gradient(circle at 58% 90%,rgba(91,140,255,.14),transparent 34%),
    linear-gradient(135deg,#05070d,#08111f 45%,#0c1729)!important;
}
:root[data-theme-mode="light"] .login-gate__card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.115),rgba(255,255,255,.052) 36%,rgba(255,255,255,.032)),
    rgba(8,14,26,.78)!important;
  border-color:rgba(148,163,184,.22)!important;
  box-shadow:0 34px 110px rgba(0,0,0,.48),0 1px 0 rgba(255,255,255,.14) inset,0 0 0 1px rgba(56,215,255,.065)!important;
}
:root[data-theme-mode="light"] .login-gate__title{
  background:linear-gradient(135deg,#ffffff 0%,#b9f2ff 42%,#a8dfbf 75%,#ffffff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
}
:root[data-theme-mode="light"] input,
:root[data-theme-mode="light"] textarea,
:root[data-theme-mode="light"] select,
:root[data-theme-mode="light"] .field input,
:root[data-theme-mode="light"] .field textarea,
:root[data-theme-mode="light"] .field select,
:root[data-theme-mode="light"] .chat-compose__field textarea{
  background:rgba(5,10,20,.58)!important;
}
:root[data-theme-mode="light"] .login-gate__failure-raw,
:root[data-theme-mode="light"] .login-gate__command{
  background:rgba(3,8,17,.54)!important;
  color:#b9f2ff!important;
}
:root[data-theme-mode="light"] .shell-nav{
  background:linear-gradient(180deg,rgba(3,7,14,.9),rgba(7,12,22,.74))!important;
  border-right-color:rgba(148,163,184,.16)!important;
}
:root[data-theme-mode="light"] .topbar{
  background:linear-gradient(180deg,rgba(9,16,29,.72),rgba(9,16,29,.46))!important;
  box-shadow:0 10px 34px rgba(0,0,0,.18)!important;
}

/* v5 correction — calm graphite system: no white card, no sci-fi glow mismatch */
:root,
:root[data-theme-mode="light"]{
  --oc-pro-bg-0:#0b0d12;
  --oc-pro-bg-1:#10141c;
  --oc-pro-bg-2:#151a23;
  --oc-pro-surface:rgba(22,26,35,.86);
  --oc-pro-surface-strong:rgba(26,31,42,.92);
  --oc-pro-surface-soft:rgba(29,35,46,.72);
  --oc-pro-line:rgba(148,163,184,.14);
  --oc-pro-line-strong:rgba(148,163,184,.2);
  --oc-pro-cyan:#7dd3fc;
  --oc-pro-blue:#60a5fa;
  --oc-pro-violet:#9ca3af;
  --oc-pro-text:#e6edf6;
  --oc-pro-muted:#9aa8ba;
  --bg:#0b0d12;
  --bg-accent:#10141c;
  --bg-elevated:#171c25;
  --bg-hover:#202737;
  --bg-muted:#1a202b;
  --card:rgba(22,26,35,.88);
  --panel:rgba(17,21,29,.9);
  --panel-strong:rgba(22,27,37,.94);
  --chrome:rgba(13,16,23,.84);
  --chrome-strong:rgba(13,16,23,.94);
  --text:#e6edf6;
  --text-strong:#f3f7fb;
  --chat-text:#e6edf6;
  --muted:#9aa8ba;
  --muted-foreground:#9aa8ba;
  --border:rgba(148,163,184,.14);
  --border-strong:rgba(148,163,184,.22);
  --border-hover:rgba(125,211,252,.24);
  --input:rgba(13,17,24,.82);
  --ring:#60a5fa;
  --accent:#60a5fa;
  --accent-hover:#93c5fd;
  --accent-muted:#7dd3fc;
  --accent-subtle:rgba(96,165,250,.1);
  --accent-glow:rgba(96,165,250,.16);
  --primary:#60a5fa;
  color-scheme:dark;
}
html,body,
:root[data-theme-mode="light"] html,
:root[data-theme-mode="light"] body{
  background:
    radial-gradient(circle at 22% 0%,rgba(96,165,250,.08),transparent 30%),
    radial-gradient(circle at 86% 10%,rgba(125,211,252,.055),transparent 34%),
    linear-gradient(135deg,#0b0d12,#10141c 48%,#151a23)!important;
}
body:before{
  opacity:.16!important;
  background:
    linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px)!important;
  background-size:56px 56px!important;
}
body:after{display:none!important}
.login-gate:before{display:none!important}
.login-gate__card,
:root[data-theme-mode="light"] .login-gate__card{
  width:min(100%,700px)!important;
  border-radius:22px!important;
  padding:26px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.026)),rgba(22,26,35,.9)!important;
  border:1px solid rgba(148,163,184,.16)!important;
  box-shadow:0 22px 62px rgba(0,0,0,.36),0 1px 0 rgba(255,255,255,.07) inset!important;
  backdrop-filter:blur(18px) saturate(1.05)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.05)!important;
}
.login-gate__header{
  border-bottom-color:rgba(148,163,184,.12)!important;
  margin-bottom:20px!important;
  padding-bottom:18px!important;
}
.login-gate__logo{
  width:48px!important;
  height:48px!important;
  border-radius:14px!important;
  filter:saturate(.75) brightness(1.05)!important;
  background:rgba(255,255,255,.045)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.08)!important;
}
.login-gate__title,
:root[data-theme-mode="light"] .login-gate__title{
  font-size:34px!important;
  color:#f3f7fb!important;
  background:none!important;
  -webkit-background-clip:initial!important;
  background-clip:initial!important;
  letter-spacing:-.045em!important;
}
.login-gate__sub{
  color:#94a3b8!important;
  letter-spacing:.055em!important;
}
.field input,.login-gate input,
:root[data-theme-mode="light"] input,
:root[data-theme-mode="light"] textarea,
:root[data-theme-mode="light"] select,
:root[data-theme-mode="light"] .field input,
:root[data-theme-mode="light"] .field textarea,
:root[data-theme-mode="light"] .field select{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,255,250,.76)),rgba(248,255,250,.9)!important;
  border-color:rgba(63,159,106,.22)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.92),0 6px 18px rgba(53,107,72,.07)!important;
}
.btn.primary.login-gate__connect,.login-gate__connect{
  background:#2563eb!important;
  color:#fff!important;
  border-color:rgba(147,197,253,.22)!important;
  box-shadow:0 12px 30px rgba(37,99,235,.22),inset 0 1px rgba(255,255,255,.18)!important;
}
.btn.primary.login-gate__connect:hover,.login-gate__connect:hover{
  background:#1d4ed8!important;
  box-shadow:0 14px 36px rgba(37,99,235,.26),inset 0 1px rgba(255,255,255,.2)!important;
}
.callout.danger.login-gate__failure{
  background:rgba(55,31,38,.62)!important;
  border-color:rgba(248,113,113,.18)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.04)!important;
}
.login-gate__help{
  background:rgba(255,255,255,.025)!important;
  border-color:rgba(148,163,184,.13)!important;
}
.card,.stat,.note,.list-item,.panel,.settings-panel,.sessions-card,.workboard-panel,.chat-panel,.log-stream,.data-table-wrap,.details-card,.route-card,.node-card,.agent-card,.config-card{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.024)),rgba(22,26,35,.86)!important;
  border-color:rgba(148,163,184,.14)!important;
  box-shadow:0 16px 44px rgba(0,0,0,.26),0 1px 0 rgba(255,255,255,.055) inset!important;
}
.card:hover,.list-item:hover,.stat:hover,.route-card:hover,.node-card:hover,.agent-card:hover{
  border-color:rgba(125,211,252,.2)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.3),0 1px 0 rgba(255,255,255,.06) inset!important;
}

/* v6 owner direction — Green system: every surface/component derives from pale purple */
:root,
:root[data-theme-mode="light"],
:root[data-theme-mode="dark"]{
  --oc-green-0:#f2fff7;
  --oc-green-1:#e6f8ed;
  --oc-green-2:#d8f0e2;
  --oc-green-3:#c4e8d2;
  --oc-green-4:#9bd8b4;
  --oc-green-5:#6fbd8d;
  --oc-green-6:#3f9f6a;
  --oc-green-ink:#17251d;
  --oc-green-ink-2:#2b4735;
  --oc-green-muted:#5f7969;
  --oc-green-line:rgba(63,159,106,.18);
  --oc-green-line-strong:rgba(63,159,106,.28);
  --oc-green-surface:rgba(248,255,250,.78);
  --oc-green-surface-strong:rgba(248,255,250,.92);
  --oc-green-surface-soft:rgba(244,239,255,.62);
  --oc-green-shadow:0 22px 58px rgba(53,107,72,.16),0 1px 0 rgba(255,255,255,.7) inset;
  --oc-green-shadow-soft:0 14px 34px rgba(53,107,72,.11),0 1px 0 rgba(255,255,255,.62) inset;

  --bg:#f2edff;
  --bg-accent:#e6f8ed;
  --bg-elevated:#faf8ff;
  --bg-hover:#dff4e8;
  --bg-muted:#e8e0ff;
  --card:rgba(248,255,250,.82);
  --card-foreground:#17251d;
  --card-highlight:rgba(63,159,106,.08);
  --popover:rgba(248,255,250,.96);
  --popover-foreground:#17251d;
  --panel:rgba(242,237,255,.82);
  --panel-strong:rgba(248,255,250,.92);
  --panel-hover:#dff4e8;
  --chrome:rgba(242,255,247,.74);
  --chrome-strong:rgba(242,255,247,.92);
  --text:#1e3226;
  --text-strong:#16111f;
  --chat-text:#1e3226;
  --muted:#5f7969;
  --muted-strong:#5f5477;
  --muted-foreground:#5f7969;
  --border:rgba(63,159,106,.16);
  --border-strong:rgba(63,159,106,.26);
  --border-hover:rgba(63,159,106,.38);
  --input:rgba(255,255,255,.62);
  --ring:#6fbd8d;
  --accent:#45a56e;
  --accent-hover:#368d5b;
  --accent-muted:#6fbd8d;
  --accent-subtle:rgba(111,189,141,.15);
  --accent-foreground:#fff;
  --accent-glow:rgba(111,189,141,.22);
  --primary:#45a56e;
  --primary-foreground:#fff;
  --secondary:rgba(244,239,255,.76);
  --secondary-foreground:#2b4735;
  --accent-2:#c084fc;
  --accent-2-muted:rgba(192,132,252,.74);
  --accent-2-subtle:rgba(192,132,252,.14);
  --ok:#5b9279;
  --ok-muted:rgba(91,146,121,.78);
  --ok-subtle:rgba(91,146,121,.12);
  --warn:#b5813d;
  --warn-muted:rgba(181,129,61,.78);
  --warn-subtle:rgba(181,129,61,.13);
  --danger:#bf5f78;
  --destructive:#bf5f78;
  --danger-muted:rgba(191,95,120,.76);
  --danger-subtle:rgba(191,95,120,.12);
  --info:#3f9f6a;
  --focus:rgba(111,189,141,.24);
  --focus-ring:0 0 0 2px rgba(242,255,247,.95),0 0 0 4px rgba(111,189,141,.36);
  --shadow-sm:0 4px 14px rgba(53,107,72,.08);
  --shadow-md:var(--oc-green-shadow-soft);
  --shadow-lg:var(--oc-green-shadow);
  --shadow-xl:0 28px 80px rgba(53,107,72,.2);
  --shadow-glow:0 0 0 1px rgba(111,189,141,.13),0 0 32px rgba(111,189,141,.12);
  color-scheme:light;
}
html,body,
:root[data-theme-mode="light"] html,
:root[data-theme-mode="light"] body,
:root[data-theme-mode="dark"] html,
:root[data-theme-mode="dark"] body{
  color:#1e3226!important;
  background:
    radial-gradient(circle at 16% 6%,rgba(196,232,210,.72),transparent 30%),
    radial-gradient(circle at 86% 2%,rgba(214,245,225,.5),transparent 28%),
    radial-gradient(circle at 60% 100%,rgba(155,216,180,.34),transparent 36%),
    linear-gradient(135deg,#f2fff7,#e6f8ed 48%,#d8f0e2)!important;
}
body:before{
  opacity:.28!important;
  background:
    linear-gradient(rgba(63,159,106,.065) 1px,transparent 1px),
    linear-gradient(90deg,rgba(63,159,106,.052) 1px,transparent 1px)!important;
  background-size:52px 52px!important;
  mask-image:radial-gradient(circle at 50% 16%,black,transparent 78%)!important;
}
body:after{display:block!important;opacity:.24!important;background:linear-gradient(180deg,rgba(255,255,255,.75),transparent 18%,rgba(63,159,106,.055))!important;mix-blend-mode:soft-light!important}
.login-gate{background:transparent!important}.login-gate:before{display:block!important;background:radial-gradient(closest-side,rgba(155,216,180,.42),rgba(196,232,210,.2) 50%,transparent 76%)!important;filter:blur(22px)!important;opacity:.78!important}
.login-gate__card,
:root[data-theme-mode="light"] .login-gate__card,
:root[data-theme-mode="dark"] .login-gate__card{
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(248,255,250,.5)),rgba(248,255,250,.76)!important;
  border:1px solid rgba(63,159,106,.2)!important;
  box-shadow:0 24px 70px rgba(53,107,72,.16),0 1px 0 rgba(255,255,255,.82) inset!important;
  color:#1e3226!important;
  backdrop-filter:blur(20px) saturate(1.08)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.08)!important;
}
.login-gate__header{border-bottom-color:rgba(63,159,106,.14)!important}.login-gate__logo{background:linear-gradient(135deg,rgba(196,232,210,.76),rgba(248,255,250,.58))!important;border:1px solid rgba(63,159,106,.12)!important;box-shadow:0 12px 28px rgba(63,159,106,.13),inset 0 1px rgba(255,255,255,.72)!important;filter:hue-rotate(228deg) saturate(.72) brightness(1.05)!important}.login-gate__title,:root[data-theme-mode="light"] .login-gate__title,:root[data-theme-mode="dark"] .login-gate__title{color:#17251d!important;background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important}.login-gate__sub,.field{color:#5f7969!important}.field input,.login-gate input,:root[data-theme-mode="light"] input,:root[data-theme-mode="dark"] input,:root[data-theme-mode="light"] textarea,:root[data-theme-mode="dark"] textarea,:root[data-theme-mode="light"] select,:root[data-theme-mode="dark"] select,.field textarea,.field select,.chat-compose__field textarea,.input{
  background:rgba(255,255,255,.62)!important;
  color:#17251d!important;
  border-color:rgba(63,159,106,.18)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.78),0 8px 20px rgba(53,107,72,.055)!important;
}
input:focus,textarea:focus,select:focus,.field input:focus,.field textarea:focus,.field select:focus,.chat-compose__field textarea:focus,.input:focus{border-color:rgba(63,159,106,.46)!important;box-shadow:0 0 0 4px rgba(111,189,141,.18),inset 0 1px rgba(255,255,255,.82)!important}
.btn.primary.login-gate__connect,.login-gate__connect,.btn--primary,.btn.primary,.button.primary{
  background:linear-gradient(180deg,#6fbd8d,#3f9f6a)!important;
  color:#fff!important;
  border-color:rgba(63,159,106,.2)!important;
  box-shadow:0 14px 34px rgba(63,159,106,.22),inset 0 1px rgba(255,255,255,.28)!important;
}
.btn.primary.login-gate__connect:hover,.login-gate__connect:hover,.btn--primary:hover,.btn.primary:hover,.button.primary:hover{background:linear-gradient(180deg,#7ac99a,#368d5b)!important;box-shadow:0 17px 42px rgba(63,159,106,.28),inset 0 1px rgba(255,255,255,.32)!important}.btn,button.btn,.button,.sidebar-menu-trigger,.nav-collapse-toggle,.theme-orb__trigger{background:linear-gradient(180deg,rgba(255,255,255,.56),rgba(244,239,255,.38))!important;border-color:rgba(63,159,106,.16)!important;color:#2b4735!important;box-shadow:inset 0 1px rgba(255,255,255,.7),0 8px 22px rgba(53,107,72,.08)!important}.btn:hover,button.btn:hover,.button:hover,.sidebar-menu-trigger:hover,.nav-collapse-toggle:hover,.theme-orb__trigger:hover{border-color:rgba(63,159,106,.3)!important;box-shadow:inset 0 1px rgba(255,255,255,.76),0 11px 28px rgba(53,107,72,.12)!important}
.callout.danger.login-gate__failure,.login-gate__failure{background:linear-gradient(180deg,rgba(191,95,120,.09),rgba(255,255,255,.34)),rgba(248,255,250,.58)!important;border-color:rgba(191,95,120,.18)!important;color:#2b4735!important;box-shadow:inset 0 1px rgba(255,255,255,.7)!important}.login-gate__failure-title{color:#a54763!important}.login-gate__failure-summary,.login-gate__failure-steps{color:#5c506f!important}.login-gate__help{background:linear-gradient(180deg,rgba(196,232,210,.18),rgba(255,255,255,.34)),rgba(248,255,250,.48)!important;border-color:rgba(63,159,106,.14)!important;color:#2b4735!important}.login-gate__failure-raw,.login-gate__command,:root[data-theme-mode="light"] .login-gate__failure-raw,:root[data-theme-mode="dark"] .login-gate__failure-raw,:root[data-theme-mode="light"] .login-gate__command,:root[data-theme-mode="dark"] .login-gate__command{background:rgba(255,255,255,.54)!important;border-color:rgba(63,159,106,.13)!important;color:#2f7f50!important}
.shell-nav,:root[data-theme-mode="light"] .shell-nav,:root[data-theme-mode="dark"] .shell-nav{background:linear-gradient(180deg,rgba(242,255,247,.82),rgba(230,248,237,.68))!important;border-right-color:rgba(63,159,106,.14)!important;box-shadow:18px 0 44px rgba(53,107,72,.08)!important}.topbar,:root[data-theme-mode="light"] .topbar,:root[data-theme-mode="dark"] .topbar{background:linear-gradient(180deg,rgba(248,255,250,.78),rgba(242,255,247,.52))!important;border-bottom-color:rgba(63,159,106,.14)!important;box-shadow:0 10px 30px rgba(53,107,72,.08)!important}.sidebar{background:transparent!important}.nav-item{color:#5f7969!important}.nav-item:hover{background:rgba(196,232,210,.2)!important;border-color:rgba(63,159,106,.18)!important;color:#2b4735!important}.nav-item.active,.nav-item--active{background:linear-gradient(135deg,rgba(196,232,210,.38),rgba(248,255,250,.42))!important;border-color:rgba(63,159,106,.22)!important;color:#17251d!important;box-shadow:inset 0 1px rgba(255,255,255,.72),0 12px 26px rgba(53,107,72,.1)!important}.nav-item.active .nav-item__icon,.nav-item--active .nav-item__icon{color:#3f9f6a!important;filter:none!important}
.card,.stat,.note,.list-item,.panel,.settings-panel,.sessions-card,.workboard-panel,.chat-panel,.log-stream,.data-table-wrap,.details-card,.route-card,.node-card,.agent-card,.config-card,.chat-bubble,.chat-compose,.chat-input-shell{background:linear-gradient(180deg,rgba(255,255,255,.58),rgba(248,255,250,.38)),rgba(248,255,250,.62)!important;border-color:rgba(63,159,106,.16)!important;color:#1e3226!important;box-shadow:var(--oc-green-shadow-soft)!important}.card:hover,.list-item:hover,.stat:hover,.route-card:hover,.node-card:hover,.agent-card:hover{border-color:rgba(63,159,106,.26)!important;box-shadow:var(--oc-green-shadow)!important}.chat-bubble--assistant,.chat-message--assistant .chat-bubble{background:linear-gradient(180deg,rgba(196,232,210,.24),rgba(248,255,250,.44)),rgba(248,255,250,.56)!important;border-color:rgba(63,159,106,.14)!important}.chat-bubble--user,.chat-message--user .chat-bubble{background:linear-gradient(135deg,rgba(111,189,141,.2),rgba(196,232,210,.28)),rgba(248,255,250,.58)!important;border-color:rgba(63,159,106,.2)!important}.pill,.badge,.status-badge{background:rgba(248,255,250,.55)!important;border-color:rgba(63,159,106,.15)!important;color:#2b4735!important}.data-table th{background:rgba(196,232,210,.22)!important;color:#17251d!important}.data-table tr:hover td{background:rgba(196,232,210,.13)!important}.code-block,pre,code{background:rgba(255,255,255,.5)!important;border-color:rgba(63,159,106,.13)!important;color:#2f7f50!important}.markdown-body a,a{color:#2f7f50!important}.dashboard-header__breadcrumb-current,.brand-title{background:none!important;color:#17251d!important;-webkit-background-clip:initial!important;background-clip:initial!important}

/* v7 correction — background is space, not another card */
html,body,
:root[data-theme-mode="light"] html,
:root[data-theme-mode="light"] body,
:root[data-theme-mode="dark"] html,
:root[data-theme-mode="dark"] body{
  background:
    radial-gradient(circle at 22% 4%,rgba(196,232,210,.46),transparent 32%),
    radial-gradient(circle at 82% 10%,rgba(214,245,225,.28),transparent 30%),
    linear-gradient(135deg,#f2fff7 0%,#e6f8ed 48%,#d8f0e2 100%)!important;
}
body:before{
  opacity:.09!important;
  background:
    linear-gradient(rgba(63,159,106,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(63,159,106,.032) 1px,transparent 1px)!important;
  background-size:72px 72px!important;
  mask-image:linear-gradient(180deg,transparent 0%,black 18%,black 70%,transparent 100%)!important;
}
body:after{display:none!important}
.login-gate:before{
  display:block!important;
  width:min(760px,70vw)!important;
  top:10vh!important;
  background:radial-gradient(closest-side,rgba(196,232,210,.22),transparent 74%)!important;
  filter:blur(34px)!important;
  opacity:.5!important;
}
.login-gate__card,
:root[data-theme-mode="light"] .login-gate__card,
:root[data-theme-mode="dark"] .login-gate__card{
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(248,255,250,.66)),rgba(248,255,250,.72)!important;
  border-color:rgba(63,159,106,.18)!important;
  box-shadow:0 24px 64px rgba(53,107,72,.14),0 1px 0 rgba(255,255,255,.85) inset!important;
}
.card,.stat,.note,.list-item,.panel,.settings-panel,.sessions-card,.workboard-panel,.chat-panel,.log-stream,.data-table-wrap,.details-card,.route-card,.node-card,.agent-card,.config-card,.chat-bubble,.chat-compose,.chat-input-shell{
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(248,255,250,.54)),rgba(248,255,250,.62)!important;
  box-shadow:0 14px 34px rgba(53,107,72,.09),0 1px 0 rgba(255,255,255,.72) inset!important;
}

/* v8 correction — remove leftover dark input/code islands; unify all form/raw surfaces with green */
input,textarea,select,
.field input,.field textarea,.field select,
.login-gate input,.login-gate textarea,.login-gate select,
.chat-compose__field textarea,.input,
.login-gate__failure-raw,.login-gate__command,
code,pre,.code-block,
[contenteditable="true"]{
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(248,255,250,.68)),rgba(248,255,250,.74)!important;
  color:#1e3226!important;
  border-color:rgba(63,159,106,.18)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.88),0 6px 18px rgba(53,107,72,.055)!important;
  caret-color:#3f9f6a!important;
}
input::placeholder,textarea::placeholder{color:#769285!important}.login-gate__failure-raw,.login-gate__command,code,pre,.code-block{color:#2f7f50!important}.login-gate__secret-row input{background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(248,255,250,.7)),rgba(248,255,250,.78)!important}.btn.btn--icon{background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(244,239,255,.58))!important;color:#2f7f50!important;border-color:rgba(63,159,106,.16)!important}.btn.btn--icon:hover{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(230,248,237,.68))!important;border-color:rgba(63,159,106,.26)!important}input:focus,textarea:focus,select:focus,.field input:focus,.field textarea:focus,.field select:focus,.login-gate input:focus,.chat-compose__field textarea:focus,.input:focus,[contenteditable="true"]:focus{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,255,250,.76)),rgba(248,255,250,.82)!important;border-color:rgba(63,159,106,.42)!important;box-shadow:0 0 0 4px rgba(111,189,141,.16),inset 0 1px rgba(255,255,255,.92),0 8px 22px rgba(53,107,72,.075)!important;outline:none!important}

/* v9 hard override — verified target: login-gate inputs must not remain dark */
html body openclaw-app .login-gate .field input,
html body openclaw-app .login-gate .login-gate__secret-row input,
html body openclaw-app .login-gate input[type="text"],
html body openclaw-app .login-gate input[type="password"],
html body openclaw-app input,
html body openclaw-app textarea,
html body openclaw-app select{
  background-color:rgba(248,255,250,.9)!important;
  background-image:linear-gradient(180deg,rgba(255,255,255,.9),rgba(248,255,250,.74))!important;
  color:#1e3226!important;
  -webkit-text-fill-color:#1e3226!important;
  border-color:rgba(63,159,106,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 6px 18px rgba(53,107,72,.07)!important;
  caret-color:#3f9f6a!important;
  color-scheme:light!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}
html body openclaw-app .login-gate .field input:focus,
html body openclaw-app .login-gate input[type="text"]:focus,
html body openclaw-app .login-gate input[type="password"]:focus{
  background-color:rgba(255,255,255,.94)!important;
  background-image:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,255,250,.82))!important;
  border-color:rgba(63,159,106,.48)!important;
  box-shadow:0 0 0 4px rgba(111,189,141,.18),inset 0 1px 0 rgba(255,255,255,.94),0 8px 22px rgba(53,107,72,.08)!important;
}
html body openclaw-app .login-gate input::placeholder{color:#769285!important;-webkit-text-fill-color:#769285!important;opacity:1!important}

/* v10 final input fix — override old important background shorthand with a newer important background shorthand */
html body openclaw-app .login-gate .field input,
html body openclaw-app .login-gate .login-gate__secret-row input,
html body openclaw-app .login-gate input,
html body openclaw-app input,
html body openclaw-app textarea,
html body openclaw-app select{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,255,250,.76)),rgba(248,255,250,.9)!important;
  border:1px solid rgba(63,159,106,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 6px 18px rgba(53,107,72,.07)!important;
  color:#1e3226!important;
  -webkit-text-fill-color:#1e3226!important;
}
html body openclaw-app .login-gate .field input:focus,
html body openclaw-app .login-gate .login-gate__secret-row input:focus,
html body openclaw-app .login-gate input:focus{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,255,250,.84)),rgba(255,255,255,.94)!important;
  border:1px solid rgba(63,159,106,.48)!important;
  box-shadow:0 0 0 4px rgba(111,189,141,.18),inset 0 1px 0 rgba(255,255,255,.96),0 8px 22px rgba(53,107,72,.08)!important;
}

/* v12 icon replacement polish — keep geometric sigil true green, no legacy lobster color filter */
.login-gate__logo{
  filter:none!important;
  background:rgba(255,255,255,.5)!important;
  border:1px solid rgba(63,159,106,.16)!important;
  box-shadow:0 12px 28px rgba(63,159,106,.14),inset 0 1px rgba(255,255,255,.72)!important;
  object-fit:contain!important;
}

/* v13 composer layout — swap toolbar row above message input box */
.agent-chat__input{
  display:flex!important;
  flex-direction:column!important;
}
.agent-chat__input > .agent-chat__toolbar{
  order:1!important;
  margin-bottom:10px!important;
  margin-top:0!important;
}
.agent-chat__input > .agent-chat__composer-combobox{
  order:2!important;
}
.agent-chat__input > .agent-chat__attachments,
.agent-chat__input > .agent-chat__slash-menu,
.agent-chat__input > .agent-chat__voice-turns,
.agent-chat__input > .agent-chat__realtime-options,
.agent-chat__input > .agent-chat__realtime-status{
  order:0!important;
}
@media (max-width: 720px){
  .agent-chat__input > .agent-chat__toolbar{
    gap:8px!important;
    flex-wrap:wrap!important;
  }
}

/* v14 composer separation — input owns the card; toolbar floats outside with no shared wrapper */
.agent-chat__input{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  padding:0!important;
  gap:10px!important;
  display:flex!important;
  flex-direction:column!important;
}
.agent-chat__input::before,
.agent-chat__input::after{
  content:none!important;
  display:none!important;
}
.agent-chat__input > .agent-chat__toolbar{
  order:1!important;
  align-self:stretch!important;
  width:100%!important;
  margin:0 0 8px!important;
  padding:0 6px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.agent-chat__input > .agent-chat__toolbar::before,
.agent-chat__input > .agent-chat__toolbar::after{
  content:none!important;
  display:none!important;
}
.agent-chat__toolbar-left,
.agent-chat__toolbar-right{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.agent-chat__input > .agent-chat__composer-combobox{
  order:2!important;
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(248,255,250,.72)),rgba(248,255,250,.84)!important;
  border:1px solid rgba(63,159,106,.18)!important;
  border-radius:24px!important;
  padding:10px 12px!important;
  box-shadow:0 18px 42px rgba(53,107,72,.12),inset 0 1px rgba(255,255,255,.84)!important;
  backdrop-filter:blur(16px) saturate(1.08)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.08)!important;
}
.agent-chat__input > .agent-chat__composer-combobox textarea{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:8px 10px!important;
}
.agent-chat__toolbar .agent-chat__input-btn,
.agent-chat__toolbar .btn,
.agent-chat__toolbar .chat-send-btn{
  box-shadow:0 10px 24px rgba(53,107,72,.10),inset 0 1px rgba(255,255,255,.36)!important;
}
@media (max-width: 720px){
  .agent-chat__input > .agent-chat__toolbar{
    padding:0 2px!important;
  }
  .agent-chat__input > .agent-chat__composer-combobox{
    border-radius:20px!important;
    padding:8px 10px!important;
  }
}

/* v15 composer toolbar — frameless floating controls */
.agent-chat__toolbar .agent-chat__input-btn,
.agent-chat__toolbar .btn,
.agent-chat__toolbar .chat-send-btn{
  background:transparent!important;
  border-color:transparent!important;
  border-width:0!important;
  box-shadow:none!important;
  outline:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.agent-chat__toolbar .agent-chat__input-btn{
  color:#587864!important;
}
.agent-chat__toolbar .btn{
  color:#587864!important;
}
.agent-chat__toolbar .chat-send-btn{
  color:#338d5b!important;
  background:linear-gradient(135deg,rgba(63,159,106,.12),rgba(155,216,180,.08))!important;
  border-radius:999px!important;
  border:0!important;
  box-shadow:none!important;
}
.agent-chat__toolbar .agent-chat__input-btn:hover,
.agent-chat__toolbar .btn:hover,
.agent-chat__toolbar .chat-send-btn:hover{
  background:rgba(63,159,106,.10)!important;
  color:#287849!important;
  transform:translateY(-1px)!important;
  box-shadow:none!important;
}
.agent-chat__toolbar .agent-chat__input-btn:active,
.agent-chat__toolbar .btn:active,
.agent-chat__toolbar .chat-send-btn:active{
  transform:translateY(0)!important;
  background:rgba(63,159,106,.16)!important;
}
.agent-chat__toolbar .agent-chat__input-btn:focus-visible,
.agent-chat__toolbar .btn:focus-visible,
.agent-chat__toolbar .chat-send-btn:focus-visible{
  box-shadow:0 0 0 3px rgba(111,189,141,.22)!important;
  background:rgba(63,159,106,.10)!important;
}
.agent-chat__toolbar .chat-send-btn[disabled],
.agent-chat__toolbar .agent-chat__input-btn[disabled],
.agent-chat__toolbar .btn[disabled]{
  opacity:.42!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* v16 green polish — remove leftover reddish-purple/blue islands from auth and status surfaces */
.callout.danger.login-gate__failure,
.login-gate__failure{
  background:linear-gradient(180deg,rgba(63,159,106,.10),rgba(255,255,255,.42)),rgba(248,255,250,.68)!important;
  border-color:rgba(63,159,106,.20)!important;
  color:#2b4735!important;
  box-shadow:inset 0 1px rgba(255,255,255,.76)!important;
}
.login-gate__failure-title,
.callout.danger .callout__title{
  color:#2f7f50!important;
}
.login-gate__failure-summary,
.login-gate__failure-steps,
.callout.danger{
  color:#3f5f4a!important;
}
.login-gate__failure-raw,
.login-gate__command,
:root[data-theme-mode="light"] .login-gate__failure-raw,
:root[data-theme-mode="dark"] .login-gate__failure-raw,
:root[data-theme-mode="light"] .login-gate__command,
:root[data-theme-mode="dark"] .login-gate__command{
  background:rgba(248,255,250,.72)!important;
  border-color:rgba(63,159,106,.16)!important;
  color:#2f7f50!important;
}
.status-toast,
.toast,
.progress-capsule,
.openclaw-progress-capsule,
[class*="progress-capsule"],
[class*="status-capsule"]{
  border-color:rgba(63,159,106,.18)!important;
  box-shadow:0 12px 30px rgba(53,107,72,.12)!important;
}

/* v17 garden cards — subtle grass and tiny flowers on card backgrounds */
:root{
  --oc-garden-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='112' viewBox='0 0 168 112'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round' opacity='.58'%3E%3Cpath d='M12 98c4-15 8-21 13-29M21 98c0-16 4-26 10-42M31 98c2-13 7-22 14-31M61 100c2-17 6-25 14-38M72 100c-1-14 2-23 9-34M108 99c3-15 9-24 18-37M119 99c-1-16 1-25 8-41M144 98c2-13 7-21 14-30' stroke='%233f9f6a' stroke-width='2.2'/%3E%3Cpath d='M18 84c-6-5-9-10-9-15M28 78c6-6 11-9 18-10M68 82c-6-7-9-13-9-20M79 78c7-5 12-7 20-7M116 78c-7-4-11-10-12-17M127 75c7-6 13-9 21-9' stroke='%236fbd8d' stroke-width='1.8' opacity='.8'/%3E%3C/g%3E%3Cg opacity='.72'%3E%3Ccircle cx='44' cy='31' r='3.2' fill='%23ffd6e7'/%3E%3Ccircle cx='39.5' cy='35' r='3' fill='%23fff2a8'/%3E%3Ccircle cx='48.5' cy='36' r='2.8' fill='%23d8f7ff'/%3E%3Ccircle cx='44' cy='38' r='2.2' fill='%236fbd8d'/%3E%3Ccircle cx='94' cy='22' r='2.7' fill='%23fff2a8'/%3E%3Ccircle cx='90' cy='26' r='2.5' fill='%23ffd6e7'/%3E%3Ccircle cx='98' cy='27' r='2.4' fill='%23e8ddff'/%3E%3Ccircle cx='94' cy='29' r='1.8' fill='%236fbd8d'/%3E%3Ccircle cx='139' cy='39' r='2.8' fill='%23ffd6e7'/%3E%3Ccircle cx='135' cy='43' r='2.5' fill='%23fff2a8'/%3E%3Ccircle cx='143' cy='44' r='2.4' fill='%23d8f7ff'/%3E%3Ccircle cx='139' cy='46' r='1.8' fill='%236fbd8d'/%3E%3C/g%3E%3C/svg%3E");
}
.login-gate__card,
.card,
.stat,
.note,
.list-item,
.panel,
.settings-panel,
.sessions-card,
.workboard-panel,
.chat-panel,
.log-stream,
.data-table-wrap,
.details-card,
.route-card,
.node-card,
.agent-card,
.config-card,
.chat-bubble,
.chat-compose,
.chat-input-shell{
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(248,255,250,.48)),
    var(--oc-garden-pattern),
    radial-gradient(circle at 18% 10%,rgba(214,245,225,.34),transparent 38%),
    linear-gradient(180deg,rgba(255,255,255,.58),rgba(248,255,250,.38))!important;
  background-color:rgba(248,255,250,.70)!important;
  background-size:auto,168px 112px,auto,auto!important;
  background-position:0 0,0 100%,0 0,0 0!important;
  background-repeat:no-repeat,repeat,no-repeat,no-repeat!important;
}
.login-gate__card{
  background-size:auto,144px 96px,auto,auto!important;
  background-position:0 0,8px calc(100% - 8px),0 0,0 0!important;
}
/* keep actual text-entry surfaces calm and readable */
.agent-chat__composer-combobox,
.field input,
.login-gate input,
textarea,
select,
.input,
.login-gate__failure-raw,
.login-gate__command,
pre,
code,
.code-block{
  background-image:none!important;
}

/* v18 garden cards final — override earlier important background shorthand */
.login-gate__card,
.card,
.stat,
.note,
.list-item,
.panel,
.settings-panel,
.sessions-card,
.workboard-panel,
.chat-panel,
.log-stream,
.data-table-wrap,
.details-card,
.route-card,
.node-card,
.agent-card,
.config-card,
.chat-bubble,
.chat-compose,
.chat-input-shell{
  background:
    linear-gradient(180deg,rgba(255,255,255,.74),rgba(248,255,250,.50)),
    var(--oc-garden-pattern),
    radial-gradient(circle at 18% 10%,rgba(214,245,225,.34),transparent 38%),
    rgba(248,255,250,.70)!important;
  background-size:auto,168px 112px,auto,auto!important;
  background-position:0 0,0 100%,0 0,0 0!important;
  background-repeat:no-repeat,repeat,no-repeat,no-repeat!important;
}
.login-gate__card{
  background-size:auto,144px 96px,auto,auto!important;
  background-position:0 0,8px calc(100% - 8px),0 0,0 0!important;
}
.agent-chat__composer-combobox,
.field input,
.login-gate input,
textarea,
select,
.input,
.login-gate__failure-raw,
.login-gate__command,
pre,
code,
.code-block{
  background-image:none!important;
}

/* v19 garden cards specificity match for themed surfaces */
:root[data-theme-mode="light"] .login-gate__card,
:root[data-theme-mode="dark"] .login-gate__card,
:root[data-theme-mode="light"] .card,
:root[data-theme-mode="dark"] .card,
:root[data-theme-mode="light"] .panel,
:root[data-theme-mode="dark"] .panel,
:root[data-theme-mode="light"] .chat-panel,
:root[data-theme-mode="dark"] .chat-panel,
:root[data-theme-mode="light"] .chat-bubble,
:root[data-theme-mode="dark"] .chat-bubble,
:root[data-theme-mode="light"] .agent-card,
:root[data-theme-mode="dark"] .agent-card,
:root[data-theme-mode="light"] .route-card,
:root[data-theme-mode="dark"] .route-card,
:root[data-theme-mode="light"] .node-card,
:root[data-theme-mode="dark"] .node-card,
:root[data-theme-mode="light"] .config-card,
:root[data-theme-mode="dark"] .config-card,
.login-gate .login-gate__card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.74),rgba(248,255,250,.50)),
    var(--oc-garden-pattern),
    radial-gradient(circle at 18% 10%,rgba(214,245,225,.34),transparent 38%),
    rgba(248,255,250,.70)!important;
  background-size:auto,168px 112px,auto,auto!important;
  background-position:0 0,0 100%,0 0,0 0!important;
  background-repeat:no-repeat,repeat,no-repeat,no-repeat!important;
}
:root[data-theme-mode="light"] .login-gate__card,
:root[data-theme-mode="dark"] .login-gate__card,
.login-gate .login-gate__card{
  background-size:auto,144px 96px,auto,auto!important;
  background-position:0 0,8px calc(100% - 8px),0 0,0 0!important;
}


/* v20 natural garden — only the large background/login card, no tiled mechanical grass on normal cards */
:root{
  --oc-garden-natural:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='920' height='560' viewBox='0 0 920 560'%3E%0A%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M104 522 C105.0 513.2 106.5 503.2 107.8 497.0' stroke='#3f9f6a' stroke-width='1.7' opacity='0.32'/%3E%3Cpath d='M105.0 515.1 C109.6 513.1 115.1 510.3 119.9 507.0' stroke='#3f9f6a' stroke-width='1.4' opacity='0.24'/%3E%3Cpath d='M32 445 C32.6 433.1 33.5 419.5 34.3 411.0' stroke='#2f8a58' stroke-width='1.7' opacity='0.21'/%3E%3Cpath d='M32.6 423.5 C27.3 420.4 22.5 416.1 18.5 411.2' stroke='#2f8a58' stroke-width='1.4' opacity='0.16'/%3E%3Cpath d='M32.6 431.9 C34.3 428.1 36.6 422.9 38.6 416.8' stroke='#2f8a58' stroke-width='1.4' opacity='0.16'/%3E%3Cpath d='M732 463 C731.3 444.8 730.2 424.0 729.2 411.0' stroke='#2f8a58' stroke-width='1.4' opacity='0.45'/%3E%3Cpath d='M731.3 448.9 C734.4 445.2 736.8 440.0 738.9 434.0' stroke='#2f8a58' stroke-width='1.1' opacity='0.34'/%3E%3Cpath d='M731.3 445.2 C733.8 442.3 735.6 438.3 737.1 433.6' stroke='#2f8a58' stroke-width='1.1' opacity='0.34'/%3E%3Cpath d='M471 502 C472.9 483.8 476.0 463.0 478.6 450.0' stroke='#3f9f6a' stroke-width='1.2' opacity='0.28'/%3E%3Cpath d='M472.9 481.0 C473.8 477.3 476.7 472.2 479.1 466.3' stroke='#3f9f6a' stroke-width='0.9' opacity='0.21'/%3E%3Cpath d='M274 442 C272.7 434.6 270.6 426.2 268.8 421.0' stroke='#3f9f6a' stroke-width='2.0' opacity='0.31'/%3E%3Cpath d='M272.7 432.2 C279.6 429.3 285.2 425.3 290.0 420.7' stroke='#3f9f6a' stroke-width='1.8' opacity='0.24'/%3E%3Cpath d='M657 465 C655.9 461.1 654.1 456.8 652.5 454.0' stroke='#3f9f6a' stroke-width='1.4' opacity='0.39'/%3E%3Cpath d='M655.9 458.0 C651.9 455.9 646.7 453.0 642.3 449.6' stroke='#3f9f6a' stroke-width='1.1' opacity='0.29'/%3E%3Cpath d='M655.9 461.1 C660.2 457.4 663.3 452.3 666.1 446.3' stroke='#3f9f6a' stroke-width='1.1' opacity='0.29'/%3E%3Cpath d='M111 534 C113.4 522.1 117.2 508.5 120.5 500.0' stroke='#6fbd8d' stroke-width='1.0' opacity='0.24'/%3E%3Cpath d='M113.4 511.7 C106.4 509.3 101.8 505.9 97.9 502.0' stroke='#6fbd8d' stroke-width='0.8' opacity='0.18'/%3E%3Cpath d='M715 352 C715.7 341.5 716.8 329.5 717.7 322.0' stroke='#58b97f' stroke-width='1.4' opacity='0.30'/%3E%3Cpath d='M715.7 337.7 C717.1 335.8 719.3 333.3 721.1 330.4' stroke='#58b97f' stroke-width='1.1' opacity='0.23'/%3E%3Cpath d='M44 503 C45.7 496.0 48.5 488.0 50.9 483.0' stroke='#6fbd8d' stroke-width='1.2' opacity='0.45'/%3E%3Cpath d='M45.7 493.0 C46.0 490.4 47.9 486.6 49.6 482.4' stroke='#6fbd8d' stroke-width='0.9' opacity='0.34'/%3E%3Cpath d='M45.7 494.3 C48.7 492.0 53.5 488.9 57.5 485.2' stroke='#6fbd8d' stroke-width='0.9' opacity='0.34'/%3E%3Cpath d='M900 438 C898.7 427.5 896.6 415.5 894.8 408.0' stroke='#2f8a58' stroke-width='2.0' opacity='0.38'/%3E%3Cpath d='M898.7 424.6 C897.5 420.7 895.0 415.3 892.9 409.1' stroke='#2f8a58' stroke-width='1.8' opacity='0.29'/%3E%3Cpath d='M510 513 C507.8 499.7 504.4 484.5 501.4 475.0' stroke='#6fbd8d' stroke-width='1.4' opacity='0.26'/%3E%3Cpath d='M507.8 503.1 C515.4 499.3 520.8 494.1 525.5 488.1' stroke='#6fbd8d' stroke-width='1.1' opacity='0.19'/%3E%3Cpath d='M526 399 C526.6 388.1 527.7 375.8 528.6 368.0' stroke='#6fbd8d' stroke-width='1.0' opacity='0.36'/%3E%3Cpath d='M526.6 377.6 C524.3 373.9 522.7 368.8 521.2 362.9' stroke='#6fbd8d' stroke-width='0.8' opacity='0.27'/%3E%3Cpath d='M526.6 386.5 C531.9 384.7 537.9 382.2 542.9 379.4' stroke='#6fbd8d' stroke-width='0.8' opacity='0.27'/%3E%3Cpath d='M440 513 C438.9 506.0 437.2 498.0 435.7 493.0' stroke='#58b97f' stroke-width='1.2' opacity='0.21'/%3E%3Cpath d='M438.9 503.5 C442.8 501.5 445.6 498.6 448.0 495.4' stroke='#58b97f' stroke-width='0.9' opacity='0.16'/%3E%3Cpath d='M438.9 505.8 C434.3 501.1 428.6 494.6 423.7 487.0' stroke='#58b97f' stroke-width='0.9' opacity='0.16'/%3E%3Cpath d='M508 477 C510.4 473.1 514.1 468.8 517.5 466.0' stroke='#2f8a58' stroke-width='2.0' opacity='0.40'/%3E%3Cpath d='M510.4 472.2 C514.0 469.1 520.0 464.7 525.1 459.6' stroke='#2f8a58' stroke-width='1.8' opacity='0.30'/%3E%3Cpath d='M28 337 C29.2 320.2 31.2 301.0 33.0 289.0' stroke='#2f8a58' stroke-width='2.0' opacity='0.45'/%3E%3Cpath d='M29.2 315.4 C23.6 310.6 19.2 304.0 15.5 296.5' stroke='#2f8a58' stroke-width='1.8' opacity='0.34'/%3E%3Cpath d='M29.2 324.0 C29.5 321.2 31.1 317.2 32.4 312.7' stroke='#2f8a58' stroke-width='1.8' opacity='0.34'/%3E%3Cpath d='M92 482 C93.0 467.6 94.6 451.2 96.1 441.0' stroke='#3f9f6a' stroke-width='1.2' opacity='0.31'/%3E%3Cpath d='M93.0 458.3 C87.2 455.8 82.3 452.3 78.2 448.2' stroke='#3f9f6a' stroke-width='0.9' opacity='0.24'/%3E%3Cpath d='M496 474 C496.7 467.4 497.8 459.8 498.8 455.0' stroke='#58b97f' stroke-width='1.7' opacity='0.38'/%3E%3Cpath d='M496.7 468.6 C490.0 466.2 484.0 462.9 478.8 459.1' stroke='#58b97f' stroke-width='1.4' opacity='0.29'/%3E%3Cpath d='M496.7 462.9 C501.0 458.5 506.0 452.2 510.3 445.1' stroke='#58b97f' stroke-width='1.4' opacity='0.29'/%3E%3Cpath d='M260 429 C259.1 412.9 257.6 394.5 256.2 383.0' stroke='#3f9f6a' stroke-width='2.0' opacity='0.28'/%3E%3Cpath d='M259.1 403.4 C253.8 401.5 247.5 398.8 242.2 395.8' stroke='#3f9f6a' stroke-width='1.8' opacity='0.21'/%3E%3Cpath d='M259.1 404.9 C257.2 401.0 254.4 395.4 251.9 389.1' stroke='#3f9f6a' stroke-width='1.8' opacity='0.21'/%3E%3Cpath d='M667 353 C669.1 346.7 672.4 339.5 675.4 335.0' stroke='#58b97f' stroke-width='1.4' opacity='0.43'/%3E%3Cpath d='M669.1 343.9 C669.5 341.4 672.0 337.8 674.1 333.8' stroke='#58b97f' stroke-width='1.1' opacity='0.32'/%3E%3Cpath d='M741 441 C743.0 435.8 746.1 429.8 748.9 426.0' stroke='#2f8a58' stroke-width='1.0' opacity='0.45'/%3E%3Cpath d='M743.0 435.5 C745.8 432.3 750.6 427.7 754.8 422.6' stroke='#2f8a58' stroke-width='0.8' opacity='0.34'/%3E%3Cpath d='M743.0 430.9 C735.8 428.2 730.5 424.3 726.0 419.9' stroke='#2f8a58' stroke-width='0.8' opacity='0.34'/%3E%3Cpath d='M606 334 C605.6 325.6 604.9 316.0 604.3 310.0' stroke='#6fbd8d' stroke-width='1.4' opacity='0.28'/%3E%3Cpath d='M605.6 327.0 C610.9 322.2 615.8 315.4 620.0 307.7' stroke='#6fbd8d' stroke-width='1.1' opacity='0.21'/%3E%3Cpath d='M605.6 326.9 C600.2 323.5 594.4 318.7 589.5 313.2' stroke='#6fbd8d' stroke-width='1.1' opacity='0.21'/%3E%3Cpath d='M719 494 C721.4 488.1 725.4 481.2 728.8 477.0' stroke='#6fbd8d' stroke-width='1.7' opacity='0.37'/%3E%3Cpath d='M721.4 487.5 C724.0 483.4 729.0 477.8 733.2 471.3' stroke='#6fbd8d' stroke-width='1.4' opacity='0.28'/%3E%3Cpath d='M373 397 C371.8 386.5 370.0 374.5 368.3 367.0' stroke='#6fbd8d' stroke-width='2.0' opacity='0.32'/%3E%3Cpath d='M371.8 388.5 C379.0 384.4 385.0 378.7 390.2 372.1' stroke='#6fbd8d' stroke-width='1.8' opacity='0.24'/%3E%3Cpath d='M371.8 384.2 C378.6 381.1 384.3 376.6 389.1 371.6' stroke='#6fbd8d' stroke-width='1.8' opacity='0.24'/%3E%3Cpath d='M740 420 C742.2 405.6 745.7 389.2 748.8 379.0' stroke='#3f9f6a' stroke-width='1.7' opacity='0.42'/%3E%3Cpath d='M742.2 402.0 C746.2 399.0 752.3 394.8 757.6 390.0' stroke='#3f9f6a' stroke-width='1.4' opacity='0.31'/%3E%3Cpath d='M293 258 C292.4 252.8 291.5 246.8 290.7 243.0' stroke='#58b97f' stroke-width='1.0' opacity='0.27'/%3E%3Cpath d='M292.4 249.4 C297.7 247.4 302.5 244.5 306.5 241.3' stroke='#58b97f' stroke-width='0.8' opacity='0.20'/%3E%3Cpath d='M133 408 C135.1 403.4 138.5 398.2 141.5 395.0' stroke='#2f8a58' stroke-width='1.7' opacity='0.26'/%3E%3Cpath d='M135.1 402.1 C128.1 397.5 123.1 391.0 118.9 383.6' stroke='#2f8a58' stroke-width='1.4' opacity='0.19'/%3E%3Cpath d='M379 403 C377.9 387.6 376.1 370.0 374.6 359.0' stroke='#58b97f' stroke-width='1.7' opacity='0.29'/%3E%3Cpath d='M377.9 381.8 C382.3 378.9 385.6 374.7 388.5 369.9' stroke='#58b97f' stroke-width='1.4' opacity='0.22'/%3E%3Cpath d='M625 437 C623.0 427.6 619.8 416.8 617.1 410.0' stroke='#58b97f' stroke-width='2.0' opacity='0.24'/%3E%3Cpath d='M623.0 423.1 C623.5 418.6 622.1 412.3 620.9 405.2' stroke='#58b97f' stroke-width='1.8' opacity='0.18'/%3E%3Cpath d='M623.0 422.8 C622.0 417.8 619.0 410.9 616.5 402.9' stroke='#58b97f' stroke-width='1.8' opacity='0.18'/%3E%3Cpath d='M73 303 C74.0 290.1 75.6 275.2 77.0 266.0' stroke='#3f9f6a' stroke-width='1.4' opacity='0.33'/%3E%3Cpath d='M74.0 277.9 C69.3 274.8 65.6 270.4 62.4 265.5' stroke='#3f9f6a' stroke-width='1.1' opacity='0.25'/%3E%3Cpath d='M115 404 C116.5 399.4 119.0 394.2 121.1 391.0' stroke='#58b97f' stroke-width='1.2' opacity='0.23'/%3E%3Cpath d='M116.5 399.1 C109.6 394.6 104.1 388.4 99.5 381.2' stroke='#58b97f' stroke-width='0.9' opacity='0.17'/%3E%3Cpath d='M727 531 C724.5 525.0 720.6 518.2 717.1 514.0' stroke='#6fbd8d' stroke-width='1.2' opacity='0.46'/%3E%3Cpath d='M724.5 521.0 C725.4 518.7 723.9 515.4 722.5 511.6' stroke='#6fbd8d' stroke-width='0.9' opacity='0.35'/%3E%3Cpath d='M535 520 C536.8 502.5 539.7 482.5 542.2 470.0' stroke='#2f8a58' stroke-width='1.2' opacity='0.24'/%3E%3Cpath d='M536.8 489.7 C533.0 486.8 531.1 482.6 529.4 477.9' stroke='#2f8a58' stroke-width='0.9' opacity='0.18'/%3E%3Cpath d='M873 444 C872.1 433.9 870.7 422.2 869.4 415.0' stroke='#58b97f' stroke-width='1.2' opacity='0.34'/%3E%3Cpath d='M872.1 429.4 C869.3 425.9 865.6 421.0 862.4 415.4' stroke='#58b97f' stroke-width='0.9' opacity='0.26'/%3E%3Cpath d='M872.1 436.6 C875.7 432.4 878.4 426.5 880.7 419.8' stroke='#58b97f' stroke-width='0.9' opacity='0.26'/%3E%3Cpath d='M226 290 C223.9 272.1 220.6 251.8 217.7 239.0' stroke='#3f9f6a' stroke-width='1.2' opacity='0.38'/%3E%3Cpath d='M223.9 265.2 C222.3 262.3 218.7 258.3 215.5 253.7' stroke='#3f9f6a' stroke-width='0.9' opacity='0.28'/%3E%3Cpath d='M724 420 C722.4 413.7 719.9 406.5 717.7 402.0' stroke='#58b97f' stroke-width='1.2' opacity='0.34'/%3E%3Cpath d='M722.4 412.1 C722.6 408.0 721.1 402.3 719.9 395.8' stroke='#58b97f' stroke-width='0.9' opacity='0.25'/%3E%3Cpath d='M596 295 C595.9 278.2 595.8 259.0 595.6 247.0' stroke='#58b97f' stroke-width='1.2' opacity='0.46'/%3E%3Cpath d='M595.9 279.6 C593.0 276.3 589.9 271.6 587.3 266.2' stroke='#58b97f' stroke-width='0.9' opacity='0.35'/%3E%3Cpath d='M192 331 C193.7 325.1 196.4 318.2 198.8 314.0' stroke='#2f8a58' stroke-width='1.2' opacity='0.25'/%3E%3Cpath d='M193.7 320.4 C188.6 318.3 185.3 315.4 182.4 312.1' stroke='#2f8a58' stroke-width='0.9' opacity='0.19'/%3E%3Cpath d='M709 378 C711.2 361.2 714.8 342.0 718.0 330.0' stroke='#2f8a58' stroke-width='1.7' opacity='0.25'/%3E%3Cpath d='M711.2 364.0 C704.2 359.9 699.5 354.2 695.4 347.7' stroke='#2f8a58' stroke-width='1.4' opacity='0.19'/%3E%3Cpath d='M711.2 356.4 C714.1 352.5 719.2 347.0 723.6 340.7' stroke='#2f8a58' stroke-width='1.4' opacity='0.19'/%3E%3Cpath d='M725 523 C722.9 505.9 719.5 486.2 716.5 474.0' stroke='#58b97f' stroke-width='1.7' opacity='0.37'/%3E%3Cpath d='M722.9 501.1 C730.8 496.5 736.6 490.1 741.6 482.8' stroke='#58b97f' stroke-width='1.4' opacity='0.28'/%3E%3Cpath d='M542 488 C539.9 470.9 536.6 451.2 533.7 439.0' stroke='#2f8a58' stroke-width='2.0' opacity='0.38'/%3E%3Cpath d='M539.9 475.6 C546.8 472.0 551.7 466.9 555.8 461.1' stroke='#2f8a58' stroke-width='1.8' opacity='0.28'/%3E%3Cpath d='M539.9 463.7 C548.0 458.7 554.1 451.8 559.2 443.8' stroke='#2f8a58' stroke-width='1.8' opacity='0.28'/%3E%3Cpath d='M818 315 C820.3 298.2 824.0 279.0 827.2 267.0' stroke='#6fbd8d' stroke-width='1.4' opacity='0.21'/%3E%3Cpath d='M820.3 292.8 C815.9 289.6 813.8 285.2 812.1 280.1' stroke='#6fbd8d' stroke-width='1.1' opacity='0.16'/%3E%3Cpath d='M820.3 288.1 C821.5 284.1 825.1 278.5 828.1 272.0' stroke='#6fbd8d' stroke-width='1.1' opacity='0.16'/%3E%3Cpath d='M772 386 C771.2 379.4 770.0 371.8 769.0 367.0' stroke='#2f8a58' stroke-width='1.2' opacity='0.29'/%3E%3Cpath d='M771.2 375.5 C774.2 370.8 776.4 364.2 778.3 356.6' stroke='#2f8a58' stroke-width='0.9' opacity='0.22'/%3E%3Cpath d='M480 463 C478.5 454.6 476.2 445.0 474.2 439.0' stroke='#6fbd8d' stroke-width='2.0' opacity='0.39'/%3E%3Cpath d='M478.5 447.0 C482.8 442.7 485.7 436.7 488.1 429.9' stroke='#6fbd8d' stroke-width='1.8' opacity='0.30'/%3E%3Cpath d='M478.5 447.2 C483.0 444.2 486.0 440.0 488.5 435.2' stroke='#6fbd8d' stroke-width='1.8' opacity='0.30'/%3E%3Cpath d='M863 339 C865.0 327.8 868.1 315.0 870.8 307.0' stroke='#2f8a58' stroke-width='1.2' opacity='0.28'/%3E%3Cpath d='M865.0 325.2 C861.1 323.0 859.3 319.9 857.6 316.4' stroke='#2f8a58' stroke-width='0.9' opacity='0.21'/%3E%3Cpath d='M865.0 329.9 C867.0 325.6 871.1 319.5 874.6 312.5' stroke='#2f8a58' stroke-width='0.9' opacity='0.21'/%3E%3Cpath d='M387 478 C388.3 473.1 390.4 467.5 392.3 464.0' stroke='#2f8a58' stroke-width='1.7' opacity='0.21'/%3E%3Cpath d='M388.3 471.6 C390.1 467.0 393.2 460.5 395.9 453.2' stroke='#2f8a58' stroke-width='1.4' opacity='0.16'/%3E%3Cpath d='M207 490 C205.5 472.5 203.1 452.5 201.0 440.0' stroke='#6fbd8d' stroke-width='1.4' opacity='0.43'/%3E%3Cpath d='M205.5 472.7 C202.1 470.3 197.2 467.0 193.0 463.3' stroke='#6fbd8d' stroke-width='1.1' opacity='0.32'/%3E%3Cpath d='M205.5 475.4 C203.0 471.8 199.0 466.8 195.6 461.1' stroke='#6fbd8d' stroke-width='1.1' opacity='0.32'/%3E%3Cpath d='M258 482 C258.4 476.1 259.0 469.2 259.6 465.0' stroke='#2f8a58' stroke-width='1.4' opacity='0.46'/%3E%3Cpath d='M258.4 470.5 C263.8 466.3 269.7 460.5 274.7 453.8' stroke='#2f8a58' stroke-width='1.1' opacity='0.35'/%3E%3Cpath d='M258.4 472.2 C261.2 468.9 264.4 464.3 267.2 459.1' stroke='#2f8a58' stroke-width='1.1' opacity='0.35'/%3E%3Cpath d='M834 359 C835.9 343.2 839.0 325.2 841.7 314.0' stroke='#58b97f' stroke-width='2.0' opacity='0.36'/%3E%3Cpath d='M835.9 342.2 C830.9 339.2 827.8 335.0 825.2 330.2' stroke='#58b97f' stroke-width='1.8' opacity='0.27'/%3E%3Cpath d='M279 361 C279.1 352.2 279.2 342.2 279.4 336.0' stroke='#2f8a58' stroke-width='1.0' opacity='0.30'/%3E%3Cpath d='M279.1 346.7 C282.7 342.7 286.4 337.0 289.6 330.6' stroke='#2f8a58' stroke-width='0.8' opacity='0.22'/%3E%3Cpath d='M433 519 C431.4 507.8 428.9 495.0 426.6 487.0' stroke='#6fbd8d' stroke-width='1.0' opacity='0.35'/%3E%3Cpath d='M431.4 510.9 C430.6 508.0 428.2 503.9 426.2 499.3' stroke='#6fbd8d' stroke-width='0.8' opacity='0.26'/%3E%3Cpath d='M431.4 503.8 C436.1 501.4 439.3 498.0 442.0 494.2' stroke='#6fbd8d' stroke-width='0.8' opacity='0.26'/%3E%3Cpath d='M672 332 C674.3 324.3 678.0 315.5 681.2 310.0' stroke='#2f8a58' stroke-width='1.7' opacity='0.22'/%3E%3Cpath d='M674.3 318.6 C668.8 315.7 665.6 311.6 662.8 306.9' stroke='#2f8a58' stroke-width='1.4' opacity='0.16'/%3E%3Cpath d='M674.3 322.1 C666.1 318.2 660.2 312.8 655.2 306.6' stroke='#2f8a58' stroke-width='1.4' opacity='0.16'/%3E%3Cpath d='M206 474 C206.0 469.8 206.1 465.0 206.1 462.0' stroke='#58b97f' stroke-width='1.7' opacity='0.26'/%3E%3Cpath d='M206.0 465.6 C211.3 463.1 216.6 459.5 221.1 455.4' stroke='#58b97f' stroke-width='1.4' opacity='0.20'/%3E%3Cpath d='M206.0 466.8 C211.0 464.7 215.9 461.7 220.2 458.3' stroke='#58b97f' stroke-width='1.4' opacity='0.20'/%3E%3Cpath d='M273 515 C272.4 498.6 271.5 479.8 270.7 468.0' stroke='#58b97f' stroke-width='1.4' opacity='0.36'/%3E%3Cpath d='M272.4 484.0 C278.2 479.2 283.4 472.5 287.9 464.9' stroke='#58b97f' stroke-width='1.1' opacity='0.27'/%3E%3Cpath d='M176 355 C177.2 346.9 179.2 337.8 180.9 332.0' stroke='#6fbd8d' stroke-width='1.4' opacity='0.24'/%3E%3Cpath d='M177.2 341.0 C172.5 336.5 168.9 330.2 165.9 323.1' stroke='#6fbd8d' stroke-width='1.1' opacity='0.18'/%3E%3Cpath d='M177.2 348.1 C178.1 343.6 180.2 337.4 181.9 330.2' stroke='#6fbd8d' stroke-width='1.1' opacity='0.18'/%3E%3Cpath d='M741 523 C741.6 510.8 742.5 496.8 743.3 488.0' stroke='#2f8a58' stroke-width='1.4' opacity='0.28'/%3E%3Cpath d='M741.6 513.8 C736.4 510.6 731.9 506.1 728.0 501.0' stroke='#2f8a58' stroke-width='1.1' opacity='0.21'/%3E%3Cpath d='M741.6 511.1 C743.0 509.0 745.0 506.1 746.6 502.9' stroke='#2f8a58' stroke-width='1.1' opacity='0.21'/%3E%3Cpath d='M749 464 C747.5 454.2 745.0 443.0 742.9 436.0' stroke='#2f8a58' stroke-width='1.7' opacity='0.43'/%3E%3Cpath d='M747.5 455.1 C753.9 450.6 758.8 444.4 763.0 437.3' stroke='#2f8a58' stroke-width='1.4' opacity='0.33'/%3E%3Cpath d='M205 342 C207.1 327.6 210.4 311.2 213.4 301.0' stroke='#58b97f' stroke-width='1.0' opacity='0.38'/%3E%3Cpath d='M207.1 323.9 C200.3 319.7 195.7 313.7 191.7 306.9' stroke='#58b97f' stroke-width='0.8' opacity='0.28'/%3E%3Cpath d='M207.1 323.8 C210.1 319.3 215.2 313.0 219.6 305.8' stroke='#58b97f' stroke-width='0.8' opacity='0.28'/%3E%3Cpath d='M368 399 C365.8 393.4 362.2 387.0 359.0 383.0' stroke='#2f8a58' stroke-width='2.0' opacity='0.35'/%3E%3Cpath d='M365.8 390.6 C363.9 387.7 359.9 383.7 356.4 379.0' stroke='#2f8a58' stroke-width='1.8' opacity='0.26'/%3E%3Cpath d='M414 512 C414.7 495.9 415.8 477.5 416.8 466.0' stroke='#6fbd8d' stroke-width='2.0' opacity='0.36'/%3E%3Cpath d='M414.7 482.7 C418.6 480.3 423.2 476.8 427.1 472.9' stroke='#6fbd8d' stroke-width='1.8' opacity='0.27'/%3E%3Cpath d='M414.7 492.4 C419.9 488.5 425.9 483.1 430.9 476.8' stroke='#6fbd8d' stroke-width='1.8' opacity='0.27'/%3E%3Cpath d='M230 449 C228.5 439.9 226.0 429.5 223.9 423.0' stroke='#2f8a58' stroke-width='1.4' opacity='0.24'/%3E%3Cpath d='M228.5 433.1 C228.2 428.6 226.5 422.1 224.9 414.8' stroke='#2f8a58' stroke-width='1.1' opacity='0.18'/%3E%3Cpath d='M866 458 C864.3 452.1 861.5 445.2 859.0 441.0' stroke='#58b97f' stroke-width='1.2' opacity='0.21'/%3E%3Cpath d='M864.3 447.4 C862.2 443.8 858.4 438.9 855.1 433.3' stroke='#58b97f' stroke-width='0.9' opacity='0.16'/%3E%3Cpath d='M864.3 447.3 C862.4 442.8 858.7 436.5 855.6 429.3' stroke='#58b97f' stroke-width='0.9' opacity='0.16'/%3E%3Cpath d='M546 344 C548.2 338.4 551.8 332.0 554.9 328.0' stroke='#58b97f' stroke-width='1.4' opacity='0.31'/%3E%3Cpath d='M548.2 334.6 C539.8 331.2 533.7 326.4 528.4 320.9' stroke='#58b97f' stroke-width='1.1' opacity='0.23'/%3E%3Cpath d='M548.2 335.8 C552.2 332.2 558.4 327.2 563.7 321.5' stroke='#58b97f' stroke-width='1.1' opacity='0.23'/%3E%3Cpath d='M244 512 C241.6 501.5 237.6 489.5 234.2 482.0' stroke='#2f8a58' stroke-width='1.7' opacity='0.28'/%3E%3Cpath d='M241.6 503.7 C246.9 499.4 249.9 493.3 252.4 486.4' stroke='#2f8a58' stroke-width='1.4' opacity='0.21'/%3E%3Cpath d='M241.6 494.4 C249.9 489.5 255.7 482.6 260.8 474.8' stroke='#2f8a58' stroke-width='1.4' opacity='0.21'/%3E%3Cpath d='M88 406 C88.8 401.4 90.2 396.2 91.4 393.0' stroke='#6fbd8d' stroke-width='1.2' opacity='0.29'/%3E%3Cpath d='M88.8 400.1 C83.3 397.3 78.7 393.4 74.7 388.9' stroke='#6fbd8d' stroke-width='0.9' opacity='0.22'/%3E%3Cpath d='M477 338 C474.5 320.9 470.6 301.2 467.1 289.0' stroke='#6fbd8d' stroke-width='2.0' opacity='0.38'/%3E%3Cpath d='M474.5 306.2 C473.4 304.3 469.8 301.7 466.7 298.7' stroke='#6fbd8d' stroke-width='1.8' opacity='0.28'/%3E%3Cpath d='M474.5 309.7 C473.2 305.8 469.5 300.2 466.2 293.9' stroke='#6fbd8d' stroke-width='1.8' opacity='0.28'/%3E%3Cpath d='M884 386 C883.4 380.1 882.4 373.2 881.5 369.0' stroke='#2f8a58' stroke-width='2.0' opacity='0.27'/%3E%3Cpath d='M883.4 376.6 C877.9 373.6 871.8 369.5 866.6 364.7' stroke='#2f8a58' stroke-width='1.8' opacity='0.20'/%3E%3Cpath d='M114 523 C114.4 507.9 115.0 490.8 115.5 480.0' stroke='#3f9f6a' stroke-width='1.4' opacity='0.25'/%3E%3Cpath d='M114.4 502.6 C116.7 498.3 119.4 492.2 121.7 485.3' stroke='#3f9f6a' stroke-width='1.1' opacity='0.19'/%3E%3Cpath d='M114.4 506.4 C119.2 503.0 124.3 498.2 128.7 492.7' stroke='#3f9f6a' stroke-width='1.1' opacity='0.19'/%3E%3Cpath d='M432 509 C432.6 502.0 433.5 494.0 434.3 489.0' stroke='#3f9f6a' stroke-width='2.0' opacity='0.23'/%3E%3Cpath d='M432.6 500.5 C426.3 496.8 420.7 491.5 415.8 485.5' stroke='#3f9f6a' stroke-width='1.8' opacity='0.17'/%3E%3Cpath d='M432.6 496.1 C438.2 492.1 444.3 486.4 449.6 480.0' stroke='#3f9f6a' stroke-width='1.8' opacity='0.17'/%3E%3Cpath d='M498 515 C498.4 503.4 499.1 490.2 499.7 482.0' stroke='#3f9f6a' stroke-width='1.2' opacity='0.34'/%3E%3Cpath d='M498.4 493.3 C502.8 489.4 507.6 483.9 511.7 477.7' stroke='#3f9f6a' stroke-width='0.9' opacity='0.25'/%3E%3Cpath d='M498.4 495.8 C502.4 492.3 506.8 487.2 510.6 481.5' stroke='#3f9f6a' stroke-width='0.9' opacity='0.25'/%3E%3Cpath d='M293 515 C293.5 505.2 294.3 494.0 295.0 487.0' stroke='#6fbd8d' stroke-width='1.0' opacity='0.28'/%3E%3Cpath d='M293.5 498.2 C290.5 494.9 288.0 490.3 285.8 485.0' stroke='#6fbd8d' stroke-width='0.8' opacity='0.21'/%3E%3Ccircle cx='184.7' cy='468.4' r='2.8' fill='#fff7cf' opacity='0.60'/%3E%3Ccircle cx='181.2' cy='471.7' r='2.8' fill='#fff7cf' opacity='0.55'/%3E%3Ccircle cx='177.3' cy='468.3' r='2.8' fill='#fff7cf' opacity='0.39'/%3E%3Ccircle cx='181.2' cy='464.3' r='2.8' fill='#fff7cf' opacity='0.59'/%3E%3Ccircle cx='181' cy='468' r='1.5' fill='#58b97f' opacity='.62'/%3E%3Ccircle cx='646.8' cy='305.1' r='2.1' fill='#fff7cf' opacity='0.34'/%3E%3Ccircle cx='643.7' cy='307.8' r='2.1' fill='#fff7cf' opacity='0.55'/%3E%3Ccircle cx='641.2' cy='304.7' r='2.1' fill='#fff7cf' opacity='0.41'/%3E%3Ccircle cx='644.2' cy='302.2' r='2.1' fill='#fff7cf' opacity='0.65'/%3E%3Ccircle cx='644' cy='305' r='1.1' fill='#f0c85a' opacity='.62'/%3E%3Ccircle cx='571.0' cy='93.8' r='2.2' fill='#ffd6e7' opacity='0.49'/%3E%3Ccircle cx='568.2' cy='97.0' r='2.2' fill='#ffd6e7' opacity='0.45'/%3E%3Ccircle cx='565.0' cy='94.1' r='2.2' fill='#ffd6e7' opacity='0.60'/%3E%3Ccircle cx='568.1' cy='91.0' r='2.2' fill='#ffd6e7' opacity='0.57'/%3E%3Ccircle cx='568' cy='94' r='1.2' fill='#6fbd8d' opacity='.62'/%3E%3Ccircle cx='494.6' cy='227.4' r='3.4' fill='#d8f7ff' opacity='0.52'/%3E%3Ccircle cx='492.0' cy='231.1' r='3.4' fill='#d8f7ff' opacity='0.44'/%3E%3Ccircle cx='488.1' cy='231.2' r='3.4' fill='#d8f7ff' opacity='0.53'/%3E%3Ccircle cx='485.4' cy='226.6' r='3.4' fill='#d8f7ff' opacity='0.39'/%3E%3Ccircle cx='487.9' cy='222.9' r='3.4' fill='#d8f7ff' opacity='0.64'/%3E%3Ccircle cx='492.6' cy='223.2' r='3.4' fill='#d8f7ff' opacity='0.37'/%3E%3Ccircle cx='490' cy='227' r='1.9' fill='#6fbd8d' opacity='.62'/%3E%3Ccircle cx='822.1' cy='323.7' r='3.8' fill='#f3dcff' opacity='0.66'/%3E%3Ccircle cx='819.3' cy='328.5' r='3.8' fill='#f3dcff' opacity='0.37'/%3E%3Ccircle cx='814.7' cy='328.5' r='3.8' fill='#f3dcff' opacity='0.54'/%3E%3Ccircle cx='812.0' cy='324.4' r='3.8' fill='#f3dcff' opacity='0.49'/%3E%3Ccircle cx='814.5' cy='319.6' r='3.8' fill='#f3dcff' opacity='0.47'/%3E%3Ccircle cx='819.4' cy='319.5' r='3.8' fill='#f3dcff' opacity='0.50'/%3E%3Ccircle cx='817' cy='324' r='2.1' fill='#6fbd8d' opacity='.62'/%3E%3Ccircle cx='185.6' cy='346.5' r='4.2' fill='#f3dcff' opacity='0.40'/%3E%3Ccircle cx='181.4' cy='351.4' r='4.2' fill='#f3dcff' opacity='0.37'/%3E%3Ccircle cx='175.7' cy='349.6' r='4.2' fill='#f3dcff' opacity='0.41'/%3E%3Ccircle cx='175.6' cy='342.5' r='4.2' fill='#f3dcff' opacity='0.63'/%3E%3Ccircle cx='181.3' cy='340.5' r='4.2' fill='#f3dcff' opacity='0.37'/%3E%3Ccircle cx='180' cy='346' r='2.3' fill='#6fbd8d' opacity='.62'/%3E%3Ccircle cx='842.7' cy='281.0' r='2.0' fill='#d8f7ff' opacity='0.58'/%3E%3Ccircle cx='840.3' cy='283.7' r='2.0' fill='#d8f7ff' opacity='0.64'/%3E%3Ccircle cx='837.3' cy='281.3' r='2.0' fill='#d8f7ff' opacity='0.43'/%3E%3Ccircle cx='840.2' cy='278.3' r='2.0' fill='#d8f7ff' opacity='0.34'/%3E%3Ccircle cx='840' cy='281' r='1.1' fill='#f0c85a' opacity='.62'/%3E%3Ccircle cx='435.6' cy='378.1' r='2.7' fill='#ffd6e7' opacity='0.45'/%3E%3Ccircle cx='433.7' cy='381.2' r='2.7' fill='#ffd6e7' opacity='0.43'/%3E%3Ccircle cx='429.9' cy='380.9' r='2.7' fill='#ffd6e7' opacity='0.42'/%3E%3Ccircle cx='428.4' cy='377.7' r='2.7' fill='#ffd6e7' opacity='0.49'/%3E%3Ccircle cx='430.5' cy='374.7' r='2.7' fill='#ffd6e7' opacity='0.52'/%3E%3Ccircle cx='434.1' cy='375.0' r='2.7' fill='#ffd6e7' opacity='0.63'/%3E%3Ccircle cx='432' cy='378' r='1.5' fill='#58b97f' opacity='.62'/%3E%3Ccircle cx='823.3' cy='357.3' r='4.0' fill='#d8f7ff' opacity='0.36'/%3E%3Ccircle cx='818.2' cy='362.3' r='4.0' fill='#d8f7ff' opacity='0.58'/%3E%3Ccircle cx='812.7' cy='357.1' r='4.0' fill='#d8f7ff' opacity='0.48'/%3E%3Ccircle cx='818.1' cy='351.7' r='4.0' fill='#d8f7ff' opacity='0.45'/%3E%3Ccircle cx='818' cy='357' r='2.2' fill='#f0c85a' opacity='.62'/%3E%3Ccircle cx='849.6' cy='103.5' r='4.1' fill='#ffd6e7' opacity='0.54'/%3E%3Ccircle cx='847.1' cy='107.7' r='4.1' fill='#ffd6e7' opacity='0.55'/%3E%3Ccircle cx='841.3' cy='107.9' r='4.1' fill='#ffd6e7' opacity='0.46'/%3E%3Ccircle cx='838.4' cy='102.6' r='4.1' fill='#ffd6e7' opacity='0.63'/%3E%3Ccircle cx='841.4' cy='98.1' r='4.1' fill='#ffd6e7' opacity='0.42'/%3E%3Ccircle cx='847.3' cy='98.5' r='4.1' fill='#ffd6e7' opacity='0.37'/%3E%3Ccircle cx='844' cy='103' r='2.3' fill='#6fbd8d' opacity='.62'/%3E%3Ccircle cx='364.2' cy='285.1' r='2.4' fill='#fff7cf' opacity='0.46'/%3E%3Ccircle cx='362.8' cy='287.7' r='2.4' fill='#fff7cf' opacity='0.44'/%3E%3Ccircle cx='359.4' cy='287.8' r='2.4' fill='#fff7cf' opacity='0.43'/%3E%3Ccircle cx='357.8' cy='284.8' r='2.4' fill='#fff7cf' opacity='0.54'/%3E%3Ccircle cx='359.7' cy='282.1' r='2.4' fill='#fff7cf' opacity='0.40'/%3E%3Ccircle cx='362.9' cy='282.4' r='2.4' fill='#fff7cf' opacity='0.37'/%3E%3Ccircle cx='361' cy='285' r='1.3' fill='#6fbd8d' opacity='.62'/%3E%3Ccircle cx='529.3' cy='280.9' r='1.7' fill='#fff2a8' opacity='0.52'/%3E%3Ccircle cx='527.7' cy='283.2' r='1.7' fill='#fff2a8' opacity='0.53'/%3E%3Ccircle cx='525.0' cy='282.1' r='1.7' fill='#fff2a8' opacity='0.65'/%3E%3Ccircle cx='525.2' cy='279.5' r='1.7' fill='#fff2a8' opacity='0.50'/%3E%3Ccircle cx='527.6' cy='278.8' r='1.7' fill='#fff2a8' opacity='0.40'/%3E%3Ccircle cx='527' cy='281' r='1.0' fill='#6fbd8d' opacity='.62'/%3E%3Ccircle cx='578.7' cy='392.1' r='3.5' fill='#ffd6e7' opacity='0.48'/%3E%3Ccircle cx='574.2' cy='396.7' r='3.5' fill='#ffd6e7' opacity='0.43'/%3E%3Ccircle cx='569.3' cy='391.6' r='3.5' fill='#ffd6e7' opacity='0.42'/%3E%3Ccircle cx='574.0' cy='387.3' r='3.5' fill='#ffd6e7' opacity='0.63'/%3E%3Ccircle cx='574' cy='392' r='1.9' fill='#58b97f' opacity='.62'/%3E%3Ccircle cx='114.6' cy='177.2' r='2.0' fill='#ffd6e7' opacity='0.54'/%3E%3Ccircle cx='111.8' cy='179.6' r='2.0' fill='#ffd6e7' opacity='0.64'/%3E%3Ccircle cx='109.4' cy='176.8' r='2.0' fill='#ffd6e7' opacity='0.45'/%3E%3Ccircle cx='112.3' cy='174.4' r='2.0' fill='#ffd6e7' opacity='0.47'/%3E%3Ccircle cx='112' cy='177' r='1.1' fill='#6fbd8d' opacity='.62'/%3E%3Ccircle cx='79.8' cy='402.2' r='2.0' fill='#f3dcff' opacity='0.61'/%3E%3Ccircle cx='78.5' cy='404.3' r='2.0' fill='#f3dcff' opacity='0.64'/%3E%3Ccircle cx='75.6' cy='404.4' r='2.0' fill='#f3dcff' opacity='0.62'/%3E%3Ccircle cx='74.2' cy='401.8' r='2.0' fill='#f3dcff' opacity='0.43'/%3E%3Ccircle cx='75.9' cy='399.5' r='2.0' fill='#f3dcff' opacity='0.54'/%3E%3Ccircle cx='78.6' cy='399.7' r='2.0' fill='#f3dcff' opacity='0.35'/%3E%3Ccircle cx='77' cy='402' r='1.1' fill='#f0c85a' opacity='.62'/%3E%3Ccircle cx='395.0' cy='387.9' r='3.7' fill='#fff7cf' opacity='0.56'/%3E%3Ccircle cx='391.2' cy='392.9' r='3.7' fill='#fff7cf' opacity='0.40'/%3E%3Ccircle cx='386.1' cy='391.2' r='3.7' fill='#fff7cf' opacity='0.60'/%3E%3Ccircle cx='386.0' cy='384.9' r='3.7' fill='#fff7cf' opacity='0.51'/%3E%3Ccircle cx='391.6' cy='383.2' r='3.7' fill='#fff7cf' opacity='0.65'/%3E%3Ccircle cx='390' cy='388' r='2.1' fill='#58b97f' opacity='.62'/%3E%3Ccircle cx='847.7' cy='256.3' r='2.7' fill='#d8f7ff' opacity='0.39'/%3E%3Ccircle cx='845.1' cy='259.5' r='2.7' fill='#d8f7ff' opacity='0.62'/%3E%3Ccircle cx='841.0' cy='258.2' r='2.7' fill='#d8f7ff' opacity='0.60'/%3E%3Ccircle cx='841.1' cy='253.7' r='2.7' fill='#d8f7ff' opacity='0.66'/%3E%3Ccircle cx='845.3' cy='252.5' r='2.7' fill='#d8f7ff' opacity='0.44'/%3E%3Ccircle cx='844' cy='256' r='1.5' fill='#58b97f' opacity='.62'/%3E%3Ccircle cx='369.3' cy='199.0' r='1.7' fill='#ffd6e7' opacity='0.37'/%3E%3Ccircle cx='367.0' cy='201.3' r='1.7' fill='#ffd6e7' opacity='0.57'/%3E%3Ccircle cx='364.7' cy='199.2' r='1.7' fill='#ffd6e7' opacity='0.60'/%3E%3Ccircle cx='366.9' cy='196.7' r='1.7' fill='#ffd6e7' opacity='0.35'/%3E%3Ccircle cx='367' cy='199' r='0.9' fill='#6fbd8d' opacity='.62'/%3E%3Ccircle cx='359.4' cy='299.8' r='2.5' fill='#ffd6e7' opacity='0.37'/%3E%3Ccircle cx='356.0' cy='303.4' r='2.5' fill='#ffd6e7' opacity='0.65'/%3E%3Ccircle cx='352.6' cy='299.9' r='2.5' fill='#ffd6e7' opacity='0.58'/%3E%3Ccircle cx='356.1' cy='296.6' r='2.5' fill='#ffd6e7' opacity='0.53'/%3E%3Ccircle cx='356' cy='300' r='1.4' fill='#f0c85a' opacity='.62'/%3E%3Ccircle cx='228.0' cy='224.6' r='3.0' fill='#f3dcff' opacity='0.51'/%3E%3Ccircle cx='223.8' cy='229.0' r='3.0' fill='#f3dcff' opacity='0.46'/%3E%3Ccircle cx='220.0' cy='224.5' r='3.0' fill='#f3dcff' opacity='0.60'/%3E%3Ccircle cx='223.6' cy='221.0' r='3.0' fill='#f3dcff' opacity='0.41'/%3E%3Ccircle cx='224' cy='225' r='1.6' fill='#58b97f' opacity='.62'/%3E%3Ccircle cx='161.6' cy='334.9' r='2.7' fill='#d8f7ff' opacity='0.39'/%3E%3Ccircle cx='157.6' cy='338.6' r='2.7' fill='#d8f7ff' opacity='0.38'/%3E%3Ccircle cx='154.4' cy='335.1' r='2.7' fill='#d8f7ff' opacity='0.45'/%3E%3Ccircle cx='157.7' cy='331.4' r='2.7' fill='#d8f7ff' opacity='0.54'/%3E%3Ccircle cx='158' cy='335' r='1.5' fill='#f0c85a' opacity='.62'/%3E%3Ccircle cx='624.9' cy='309.1' r='3.6' fill='#d8f7ff' opacity='0.48'/%3E%3Ccircle cx='621.7' cy='313.6' r='3.6' fill='#d8f7ff' opacity='0.43'/%3E%3Ccircle cx='616.3' cy='312.3' r='3.6' fill='#d8f7ff' opacity='0.45'/%3E%3Ccircle cx='615.8' cy='306.4' r='3.6' fill='#d8f7ff' opacity='0.35'/%3E%3Ccircle cx='621.8' cy='304.4' r='3.6' fill='#d8f7ff' opacity='0.47'/%3E%3Ccircle cx='620' cy='309' r='2.0' fill='#6fbd8d' opacity='.62'/%3E%3Ccircle cx='553' cy='501' r='2.1' fill='#fff2a8' opacity='0.33'/%3E%3Ccircle cx='799' cy='356' r='2.2' fill='#ffd6e7' opacity='0.20'/%3E%3Ccircle cx='327' cy='325' r='1.7' fill='#9bd8b4' opacity='0.25'/%3E%3Ccircle cx='865' cy='486' r='1.9' fill='#ffd6e7' opacity='0.16'/%3E%3Ccircle cx='494' cy='365' r='1.4' fill='#ffd6e7' opacity='0.28'/%3E%3Ccircle cx='168' cy='135' r='1.4' fill='#6fbd8d' opacity='0.33'/%3E%3Ccircle cx='789' cy='366' r='1.0' fill='#9bd8b4' opacity='0.25'/%3E%3Ccircle cx='658' cy='151' r='0.9' fill='#fff2a8' opacity='0.35'/%3E%3Ccircle cx='435' cy='189' r='0.8' fill='#9bd8b4' opacity='0.20'/%3E%3Ccircle cx='647' cy='357' r='2.1' fill='#6fbd8d' opacity='0.32'/%3E%3Ccircle cx='484' cy='428' r='1.6' fill='#6fbd8d' opacity='0.33'/%3E%3Ccircle cx='597' cy='387' r='1.6' fill='#ffd6e7' opacity='0.28'/%3E%3Ccircle cx='637' cy='161' r='1.4' fill='#ffd6e7' opacity='0.19'/%3E%3Ccircle cx='524' cy='368' r='1.2' fill='#6fbd8d' opacity='0.27'/%3E%3Ccircle cx='524' cy='349' r='1.6' fill='#6fbd8d' opacity='0.17'/%3E%3Ccircle cx='811' cy='149' r='1.6' fill='#ffd6e7' opacity='0.16'/%3E%3Ccircle cx='604' cy='165' r='2.2' fill='#9bd8b4' opacity='0.28'/%3E%3Ccircle cx='899' cy='392' r='1.9' fill='#6fbd8d' opacity='0.27'/%3E%3Ccircle cx='316' cy='420' r='1.9' fill='#fff2a8' opacity='0.23'/%3E%3Ccircle cx='311' cy='457' r='1.9' fill='#ffd6e7' opacity='0.25'/%3E%3Ccircle cx='494' cy='524' r='0.9' fill='#9bd8b4' opacity='0.33'/%3E%3Ccircle cx='136' cy='496' r='1.2' fill='#9bd8b4' opacity='0.28'/%3E%3Ccircle cx='764' cy='438' r='1.0' fill='#9bd8b4' opacity='0.32'/%3E%3Ccircle cx='260' cy='221' r='0.8' fill='#ffd6e7' opacity='0.26'/%3E%3Ccircle cx='230' cy='329' r='2.1' fill='#9bd8b4' opacity='0.25'/%3E%3Ccircle cx='406' cy='158' r='1.4' fill='#fff2a8' opacity='0.32'/%3E%3Ccircle cx='559' cy='389' r='2.1' fill='#ffd6e7' opacity='0.28'/%3E%3Ccircle cx='781' cy='186' r='1.8' fill='#ffd6e7' opacity='0.33'/%3E%3Ccircle cx='554' cy='486' r='1.8' fill='#9bd8b4' opacity='0.17'/%3E%3Ccircle cx='479' cy='526' r='1.1' fill='#fff2a8' opacity='0.21'/%3E%3Ccircle cx='668' cy='497' r='1.4' fill='#6fbd8d' opacity='0.23'/%3E%3Ccircle cx='71' cy='179' r='0.9' fill='#fff2a8' opacity='0.18'/%3E%3Ccircle cx='183' cy='306' r='1.1' fill='#fff2a8' opacity='0.25'/%3E%3Ccircle cx='752' cy='300' r='1.1' fill='#9bd8b4' opacity='0.23'/%3E%3Ccircle cx='796' cy='137' r='2.0' fill='#ffd6e7' opacity='0.24'/%3E%3Ccircle cx='650' cy='196' r='1.3' fill='#ffd6e7' opacity='0.35'/%3E%3Ccircle cx='760' cy='149' r='1.3' fill='#6fbd8d' opacity='0.34'/%3E%3Ccircle cx='459' cy='402' r='1.3' fill='#6fbd8d' opacity='0.27'/%3E%3Ccircle cx='562' cy='445' r='1.0' fill='#6fbd8d' opacity='0.21'/%3E%3Ccircle cx='286' cy='145' r='1.2' fill='#9bd8b4' opacity='0.25'/%3E%3Ccircle cx='206' cy='231' r='2.1' fill='#ffd6e7' opacity='0.18'/%3E%3Ccircle cx='466' cy='412' r='1.3' fill='#9bd8b4' opacity='0.36'/%3E%3Ccircle cx='383' cy='286' r='1.2' fill='#ffd6e7' opacity='0.21'/%3E%3Ccircle cx='480' cy='284' r='0.7' fill='#ffd6e7' opacity='0.21'/%3E%3Ccircle cx='411' cy='317' r='1.3' fill='#fff2a8' opacity='0.33'/%3E%3Ccircle cx='667' cy='263' r='1.3' fill='#9bd8b4' opacity='0.29'/%3E%3Ccircle cx='440' cy='355' r='2.0' fill='#6fbd8d' opacity='0.16'/%3E%3Ccircle cx='754' cy='329' r='0.9' fill='#9bd8b4' opacity='0.18'/%3E%3Ccircle cx='70' cy='185' r='1.7' fill='#9bd8b4' opacity='0.36'/%3E%3Ccircle cx='397' cy='521' r='1.6' fill='#9bd8b4' opacity='0.19'/%3E%3Ccircle cx='127' cy='332' r='1.8' fill='#ffd6e7' opacity='0.30'/%3E%3Ccircle cx='411' cy='394' r='1.7' fill='#9bd8b4' opacity='0.26'/%3E%3Ccircle cx='201' cy='262' r='1.7' fill='#ffd6e7' opacity='0.24'/%3E%3Ccircle cx='248' cy='279' r='1.6' fill='#ffd6e7' opacity='0.30'/%3E%3Ccircle cx='720' cy='311' r='1.0' fill='#fff2a8' opacity='0.30'/%3E%3C/g%3E%0A%3C/svg%3E");
}
.card,
.stat,
.note,
.list-item,
.panel,
.settings-panel,
.sessions-card,
.workboard-panel,
.chat-panel,
.log-stream,
.data-table-wrap,
.details-card,
.route-card,
.node-card,
.agent-card,
.config-card,
.chat-bubble,
.chat-compose,
.chat-input-shell,
.login-gate__failure,
.login-gate__help{
  background-image:linear-gradient(180deg,rgba(255,255,255,.58),rgba(248,255,250,.38))!important;
  background-repeat:no-repeat!important;
  background-size:auto!important;
  background-position:0 0!important;
}
:root[data-theme-mode="light"] .login-gate__card,
:root[data-theme-mode="dark"] .login-gate__card,
.login-gate .login-gate__card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.80),rgba(248,255,250,.56)),
    var(--oc-garden-natural),
    radial-gradient(circle at 20% 10%,rgba(214,245,225,.36),transparent 42%),
    rgba(248,255,250,.72)!important;
  background-size:auto,cover,auto,auto!important;
  background-position:0 0,center bottom,0 0,0 0!important;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat!important;
}
.agent-chat__composer-combobox,
.field input,
.login-gate input,
textarea,
select,
.input,
.login-gate__failure-raw,
.login-gate__command,
pre,
code,
.code-block{
  background-image:none!important;
}

/* v21 natural garden visibility — visible but still behind text */
:root[data-theme-mode="light"] .login-gate__card,
:root[data-theme-mode="dark"] .login-gate__card,
.login-gate .login-gate__card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.64),rgba(248,255,250,.34)),
    var(--oc-garden-natural),
    radial-gradient(circle at 20% 10%,rgba(214,245,225,.28),transparent 42%),
    rgba(248,255,250,.72)!important;
  background-size:auto,cover,auto,auto!important;
  background-position:0 0,center bottom,0 0,0 0!important;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat!important;
}

/* v22 global natural garden — plant on the true large page background, not component cards */
html,body,#root,openclaw-app{
  min-height:100%!important;
}
body{
  position:relative!important;
  isolation:isolate!important;
}
body::before{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  z-index:-1!important;
  pointer-events:none!important;
  background:
    linear-gradient(180deg,rgba(242,255,247,.42),rgba(230,248,237,.22)),
    var(--oc-garden-natural),
    radial-gradient(circle at 14% 8%,rgba(214,245,225,.42),transparent 34%),
    radial-gradient(circle at 88% 12%,rgba(196,232,210,.30),transparent 32%)!important;
  background-size:auto,min(980px,96vw) auto,auto,auto!important;
  background-position:0 0,center bottom,0 0,0 0!important;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat!important;
  opacity:.92!important;
}
/* Ensure main app surfaces sit above the planted background layer */
body > openclaw-app,
#root,
.app-shell,
.control-shell,
.dashboard-shell,
.shell,
.login-gate{
  position:relative!important;
  z-index:0!important;
}
/* Component cards stay clean; no local plant texture on their own backgrounds */
.card,
.stat,
.note,
.list-item,
.panel,
.settings-panel,
.sessions-card,
.workboard-panel,
.chat-panel,
.log-stream,
.data-table-wrap,
.details-card,
.route-card,
.node-card,
.agent-card,
.config-card,
.chat-bubble,
.chat-compose,
.chat-input-shell,
.login-gate__failure,
.login-gate__help{
  background-image:linear-gradient(180deg,rgba(255,255,255,.58),rgba(248,255,250,.38))!important;
}


/* v23 cache-busted visible garden layer on actual app host */
openclaw-app::before{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  z-index:-1!important;
  pointer-events:none!important;
  background:
    linear-gradient(180deg,rgba(242,255,247,.34),rgba(230,248,237,.18)),
    var(--oc-garden-natural),
    radial-gradient(circle at 16% 8%,rgba(214,245,225,.36),transparent 36%)!important;
  background-size:auto,min(1080px,100vw) auto,auto!important;
  background-position:0 0,center bottom,0 0!important;
  background-repeat:no-repeat,no-repeat,no-repeat!important;
  opacity:1!important;
}
openclaw-app{
  position:relative!important;
  isolation:isolate!important;
}


/* v24 undeniable garden — paint the actual app host background, visibly */
html body openclaw-app,
html body #root,
html body .app,
html body .control-ui,
html body .app-root,
html body .page,
html body .main,
html body .main-content,
html body .content,
html body .tab-content,
html body .workspace,
html body .agent-chat{
  background:
    linear-gradient(180deg,rgba(242,255,247,.18),rgba(230,248,237,.08)),
    var(--oc-garden-natural),
    radial-gradient(circle at 18% 8%,rgba(214,245,225,.30),transparent 36%),
    linear-gradient(135deg,#f2fff7 0%,#e6f8ed 48%,#d8f0e2 100%)!important;
  background-size:auto,min(1180px,106vw) auto,auto,auto!important;
  background-position:0 0,center bottom,0 0,0 0!important;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat!important;
}
html body openclaw-app::before,
html body::before{
  opacity:1!important;
  background:
    linear-gradient(180deg,rgba(242,255,247,.12),rgba(230,248,237,.04)),
    var(--oc-garden-natural)!important;
  background-size:auto,min(1180px,106vw) auto!important;
  background-position:0 0,center bottom!important;
  background-repeat:no-repeat,no-repeat!important;
}
/* keep real components readable and not locally planted */
html body .login-gate__failure,
html body .login-gate__help,
html body .card,
html body .panel,
html body .chat-panel,
html body .chat-bubble,
html body .agent-chat__composer-combobox,
html body .field input,
html body input,
html body textarea,
html body pre,
html body code{
  background-image:linear-gradient(180deg,rgba(255,255,255,.72),rgba(248,255,250,.54))!important;
}

/* v26 real visible garden — hit the actually observed containers */
html body openclaw-app .login-gate{
  background:
    linear-gradient(180deg,rgba(242,255,247,.10),rgba(230,248,237,.04)),
    var(--oc-garden-natural),
    radial-gradient(circle at 16% 8%,rgba(214,245,225,.30),transparent 36%),
    linear-gradient(135deg,#f2fff7 0%,#e6f8ed 48%,#d8f0e2 100%)!important;
  background-size:auto,min(1220px,108vw) auto,auto,auto!important;
  background-position:0 0,center bottom,0 0,0 0!important;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat!important;
}
html body openclaw-app .login-gate .login-gate__card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.42),rgba(248,255,250,.18)),
    var(--oc-garden-natural),
    radial-gradient(circle at 18% 8%,rgba(214,245,225,.18),transparent 42%),
    rgba(248,255,250,.58)!important;
  background-size:auto,cover,auto,auto!important;
  background-position:0 0,center bottom,0 0,0 0!important;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat!important;
}
html body openclaw-app .login-gate__form,
html body openclaw-app .login-gate__failure,
html body openclaw-app .login-gate__help{
  background:rgba(248,255,250,.72)!important;
  background-image:linear-gradient(180deg,rgba(255,255,255,.82),rgba(248,255,250,.62))!important;
}

/* v27 garden longhand — avoid background shorthand parse/cascade failures */
html body openclaw-app .login-gate{
  background-color:#e6f8ed!important;
  background-image:
    linear-gradient(180deg,rgba(242,255,247,.10),rgba(230,248,237,.04)),
    var(--oc-garden-natural),
    radial-gradient(circle at 16% 8%,rgba(214,245,225,.30),transparent 36%),
    linear-gradient(135deg,#f2fff7 0%,#e6f8ed 48%,#d8f0e2 100%)!important;
  background-size:auto,min(1220px,108vw) auto,auto,auto!important;
  background-position:0 0,center bottom,0 0,0 0!important;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat!important;
}
html body openclaw-app .login-gate .login-gate__card{
  background-color:rgba(248,255,250,.58)!important;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.42),rgba(248,255,250,.18)),
    var(--oc-garden-natural),
    radial-gradient(circle at 18% 8%,rgba(214,245,225,.18),transparent 42%)!important;
  background-size:auto,cover,auto!important;
  background-position:0 0,center bottom,0 0!important;
  background-repeat:no-repeat,no-repeat,no-repeat!important;
}

/* v28 garden as real SVG file — no data-uri/var parse risk */
html body openclaw-app .login-gate{
  background-color:#e6f8ed!important;
  background-image:
    linear-gradient(180deg,rgba(242,255,247,.08),rgba(230,248,237,.03)),
    url('./garden-natural.svg?v=20260613-0212'),
    radial-gradient(circle at 16% 8%,rgba(214,245,225,.26),transparent 36%),
    linear-gradient(135deg,#f2fff7 0%,#e6f8ed 48%,#d8f0e2 100%)!important;
  background-size:auto,min(1220px,108vw) auto,auto,auto!important;
  background-position:0 0,center bottom,0 0,0 0!important;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat!important;
}
html body openclaw-app .login-gate .login-gate__card{
  background-color:rgba(248,255,250,.52)!important;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.30),rgba(248,255,250,.10)),
    url('./garden-natural.svg?v=20260613-0212'),
    radial-gradient(circle at 18% 8%,rgba(214,245,225,.14),transparent 42%)!important;
  background-size:auto,cover,auto!important;
  background-position:0 0,center bottom,0 0!important;
  background-repeat:no-repeat,no-repeat,no-repeat!important;
}

/* v29 session-window garden — target the real conversation window: <section class="card chat"> */
html body openclaw-app .shell--chat .chat,
html body openclaw-app section.card.chat,
html body openclaw-app .card.chat,
html body .shell--chat .chat,
html body section.card.chat,
html body .card.chat{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  background-color:#e6f8ed!important;
  background-image:
    linear-gradient(180deg,rgba(242,255,247,.20),rgba(230,248,237,.08)),
    url('./garden-natural.svg?v=20260613-0218'),
    radial-gradient(circle at 18% 8%,rgba(214,245,225,.28),transparent 36%),
    linear-gradient(135deg,#f2fff7 0%,#e6f8ed 48%,#d8f0e2 100%)!important;
  background-size:auto,min(1240px,110vw) auto,auto,auto!important;
  background-position:0 0,center bottom,0 0,0 0!important;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat!important;
}
html body openclaw-app .shell--chat .chat::before,
html body openclaw-app section.card.chat::before,
html body openclaw-app .card.chat::before,
html body .shell--chat .chat::before,
html body section.card.chat::before,
html body .card.chat::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  pointer-events:none!important;
  background-image:url('./garden-natural.svg?v=20260613-0218')!important;
  background-size:min(1240px,110vw) auto!important;
  background-position:center bottom!important;
  background-repeat:no-repeat!important;
  opacity:.88!important;
}
/* Keep conversation content clean/readable; only the big chat card is planted */
html body openclaw-app .card.chat .chat-bubble,
html body openclaw-app .card.chat .agent-chat__input,
html body openclaw-app .card.chat .agent-chat__composer-combobox,
html body openclaw-app .card.chat .agent-chat__toolbar,
html body openclaw-app .card.chat input,
html body openclaw-app .card.chat textarea,
html body openclaw-app .card.chat pre,
html body openclaw-app .card.chat code{
  background-image:none!important;
}

/* v30 conversation 3D wind — lightweight CSS 3D grass sway, no heavy three.js runtime */
@keyframes ocWindSwayNear{
  0%{transform:perspective(900px) rotateX(2deg) rotateZ(-.45deg) translate3d(-7px,0,0) scale(1.018)}
  19%{transform:perspective(900px) rotateX(3.2deg) rotateZ(.9deg) translate3d(10px,-1px,0) scale(1.024)}
  42%{transform:perspective(900px) rotateX(1.4deg) rotateZ(-.2deg) translate3d(-3px,1px,0) scale(1.012)}
  67%{transform:perspective(900px) rotateX(3.8deg) rotateZ(1.25deg) translate3d(14px,-2px,0) scale(1.028)}
  100%{transform:perspective(900px) rotateX(2deg) rotateZ(-.45deg) translate3d(-7px,0,0) scale(1.018)}
}
@keyframes ocWindSwayFar{
  0%{transform:perspective(1200px) rotateX(1deg) rotateZ(.28deg) translate3d(5px,0,0) scale(1.006)}
  27%{transform:perspective(1200px) rotateX(1.6deg) rotateZ(-.5deg) translate3d(-8px,1px,0) scale(1.01)}
  58%{transform:perspective(1200px) rotateX(.8deg) rotateZ(.38deg) translate3d(4px,-1px,0) scale(1.004)}
  100%{transform:perspective(1200px) rotateX(1deg) rotateZ(.28deg) translate3d(5px,0,0) scale(1.006)}
}
html body openclaw-app .shell--chat .chat,
html body openclaw-app section.card.chat,
html body openclaw-app .card.chat,
html body .shell--chat .chat,
html body section.card.chat,
html body .card.chat{
  transform-style:preserve-3d!important;
  perspective:1000px!important;
  contain:paint!important;
}
html body openclaw-app .shell--chat .chat::before,
html body openclaw-app section.card.chat::before,
html body openclaw-app .card.chat::before,
html body .shell--chat .chat::before,
html body section.card.chat::before,
html body .card.chat::before{
  z-index:-2!important;
  background-image:url('./garden-wind-grass.svg?v=20260613-0224')!important;
  background-size:min(1280px,114vw) auto!important;
  background-position:center bottom!important;
  background-repeat:no-repeat!important;
  opacity:.88!important;
  transform-origin:50% 100%!important;
  animation:ocWindSwayFar 8.8s cubic-bezier(.43,0,.29,1) infinite!important;
  will-change:transform!important;
}
html body openclaw-app .shell--chat .chat::after,
html body openclaw-app section.card.chat::after,
html body openclaw-app .card.chat::after,
html body .shell--chat .chat::after,
html body section.card.chat::after,
html body .card.chat::after{
  content:""!important;
  position:absolute!important;
  inset:auto -4% -2% -4%!important;
  height:62%!important;
  z-index:-1!important;
  pointer-events:none!important;
  background-image:url('./garden-wind-grass.svg?v=20260613-0224')!important;
  background-size:min(1320px,118vw) auto!important;
  background-position:center bottom!important;
  background-repeat:no-repeat!important;
  opacity:.64!important;
  transform-origin:50% 100%!important;
  animation:ocWindSwayNear 5.7s cubic-bezier(.45,0,.25,1) infinite!important;
  filter:saturate(1.06) blur(.1px)!important;
  will-change:transform!important;
}
@media (prefers-reduced-motion:reduce){
  html body .card.chat::before,
  html body .card.chat::after{
    animation:none!important;
    transform:none!important;
  }
}

/* v31 session garden layer fix — visible animated layers inside chat card, content above */
html body openclaw-app .shell--chat .chat,
html body openclaw-app section.card.chat,
html body openclaw-app .card.chat,
html body .shell--chat .chat,
html body section.card.chat,
html body .card.chat{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  background-color:#e6f8ed!important;
  background-image:
    linear-gradient(180deg,rgba(242,255,247,.22),rgba(230,248,237,.10)),
    radial-gradient(circle at 18% 8%,rgba(214,245,225,.28),transparent 36%),
    linear-gradient(135deg,#f2fff7 0%,#e6f8ed 48%,#d8f0e2 100%)!important;
  background-size:auto,auto,auto!important;
  background-position:0 0,0 0,0 0!important;
  background-repeat:no-repeat,no-repeat,no-repeat!important;
}
html body openclaw-app .shell--chat .chat::before,
html body openclaw-app section.card.chat::before,
html body openclaw-app .card.chat::before,
html body .shell--chat .chat::before,
html body section.card.chat::before,
html body .card.chat::before{
  z-index:0!important;
  opacity:.78!important;
  mix-blend-mode:multiply!important;
}
html body openclaw-app .shell--chat .chat::after,
html body openclaw-app section.card.chat::after,
html body openclaw-app .card.chat::after,
html body .shell--chat .chat::after,
html body section.card.chat::after,
html body .card.chat::after{
  z-index:0!important;
  opacity:.58!important;
  mix-blend-mode:multiply!important;
}
html body .card.chat > *,
html body section.card.chat > *{
  position:relative!important;
  z-index:1!important;
}
html body .card.chat .chat-bubble,
html body section.card.chat .chat-bubble,
html body .card.chat .agent-chat__input,
html body section.card.chat .agent-chat__input,
html body .card.chat .agent-chat__composer-combobox,
html body section.card.chat .agent-chat__composer-combobox,
html body .card.chat .agent-chat__toolbar,
html body section.card.chat .agent-chat__toolbar,
html body .card.chat input,
html body section.card.chat input,
html body .card.chat textarea,
html body section.card.chat textarea,
html body .card.chat pre,
html body section.card.chat pre,
html body .card.chat code,
html body section.card.chat code{
  background-image:none!important;
}

/* v32 Forest Arcane OS — session summon slot, assistant lifeline, status weather */
:root{
  --oc-arcane-life:#2f9f62;
  --oc-arcane-life-soft:rgba(47,159,98,.20);
  --oc-arcane-mint:rgba(178,235,196,.42);
  --oc-arcane-gold:rgba(223,177,82,.28);
  --oc-arcane-danger:rgba(190,74,74,.30);
  --oc-arcane-shadow:0 24px 72px rgba(32,106,62,.18);
}
@keyframes ocArcaneBreath{
  0%,100%{opacity:.46;filter:saturate(1) brightness(1);transform:scaleX(.96)}
  50%{opacity:.88;filter:saturate(1.2) brightness(1.06);transform:scaleX(1.01)}
}
@keyframes ocArcanePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(63,159,106,.00),0 18px 48px rgba(32,106,62,.12)}
  50%{box-shadow:0 0 0 7px rgba(63,159,106,.075),0 22px 62px rgba(32,106,62,.20)}
}
@keyframes ocArcaneSendRipple{
  0%{opacity:.42;transform:translate(-50%,-50%) scale(.38)}
  72%{opacity:.10;transform:translate(-50%,-50%) scale(1.92)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(2.25)}
}
@keyframes ocAssistantLifeFlow{
  0%{background-position:0 0,0 0;opacity:.42}
  50%{background-position:0 18px,0 0;opacity:.82}
  100%{background-position:0 38px,0 0;opacity:.42}
}
@keyframes ocAssistantTextureDrift{
  0%{background-position:0 0,0 0,0 0}
  100%{background-position:44px 0,-36px 18px,0 0}
}
@keyframes ocStatusGlow{
  0%,100%{filter:saturate(1);opacity:.82}
  50%{filter:saturate(1.18) brightness(1.05);opacity:1}
}
html body .card.chat .agent-chat__input,
html body section.card.chat .agent-chat__input{
  position:relative!important;
  overflow:visible!important;
  border:0!important;
  border-radius:26px!important;
  background:
    radial-gradient(circle at 50% 100%,rgba(178,235,196,.30),transparent 58%),
    linear-gradient(180deg,rgba(255,255,255,.52),rgba(244,255,247,.34)),
    rgba(246,255,249,.56)!important;
  box-shadow:0 20px 64px rgba(32,106,62,.14), inset 0 1px rgba(255,255,255,.62)!important;
  backdrop-filter:blur(18px) saturate(1.16)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.16)!important;
}
html body .card.chat .agent-chat__input::before,
html body section.card.chat .agent-chat__input::before{
  content:""!important;
  position:absolute!important;
  inset:-2px!important;
  z-index:-1!important;
  pointer-events:none!important;
  border-radius:28px!important;
  background:
    linear-gradient(90deg,transparent,rgba(68,168,101,.34),rgba(211,245,219,.52),rgba(68,168,101,.26),transparent),
    radial-gradient(circle at 18% 0%,rgba(223,177,82,.20),transparent 38%)!important;
  opacity:.38!important;
  transform-origin:center!important;
}
html body .card.chat .agent-chat__input:focus-within::before,
html body section.card.chat .agent-chat__input:focus-within::before{
  animation:ocArcaneBreath 2.8s ease-in-out infinite!important;
  opacity:.78!important;
}
html body .card.chat .agent-chat__input:focus-within,
html body section.card.chat .agent-chat__input:focus-within{
  animation:ocArcanePulse 3.8s ease-in-out infinite!important;
}
html body .card.chat .agent-chat__composer-combobox,
html body section.card.chat .agent-chat__composer-combobox{
  border:0!important;
  background:rgba(255,255,255,.46)!important;
  border-radius:22px!important;
  box-shadow:inset 0 0 0 1px rgba(63,159,106,.12), inset 0 1px rgba(255,255,255,.70)!important;
}
html body .card.chat .agent-chat__composer-combobox:focus-within,
html body section.card.chat .agent-chat__composer-combobox:focus-within{
  background:rgba(255,255,255,.64)!important;
  box-shadow:inset 0 0 0 1px rgba(63,159,106,.22), 0 0 0 5px rgba(91,184,119,.08)!important;
}
html body .card.chat .agent-chat__composer-combobox textarea,
html body section.card.chat .agent-chat__composer-combobox textarea{
  color:#17251d!important;
  caret-color:#2f9f62!important;
  text-shadow:0 1px rgba(255,255,255,.55)!important;
}
html body .card.chat .agent-chat__toolbar .chat-send-btn,
html body section.card.chat .agent-chat__toolbar .chat-send-btn,
html body .card.chat .agent-chat__toolbar .agent-chat__input-btn,
html body section.card.chat .agent-chat__toolbar .agent-chat__input-btn{
  position:relative!important;
  overflow:hidden!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
html body .card.chat .agent-chat__toolbar .chat-send-btn::after,
html body section.card.chat .agent-chat__toolbar .chat-send-btn::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:2.2rem!important;
  height:2.2rem!important;
  border-radius:999px!important;
  pointer-events:none!important;
  background:radial-gradient(circle,rgba(67,178,104,.40),rgba(178,235,196,.14) 48%,transparent 70%)!important;
  opacity:0!important;
  transform:translate(-50%,-50%) scale(.4)!important;
}
html body .card.chat .agent-chat__toolbar .chat-send-btn:hover::after,
html body section.card.chat .agent-chat__toolbar .chat-send-btn:hover::after,
html body .card.chat .agent-chat__toolbar .chat-send-btn:focus-visible::after,
html body section.card.chat .agent-chat__toolbar .chat-send-btn:focus-visible::after{
  animation:ocArcaneSendRipple 1.35s ease-out infinite!important;
}
html body .card.chat .agent-chat__toolbar .chat-send-btn:not([disabled]):active,
html body section.card.chat .agent-chat__toolbar .chat-send-btn:not([disabled]):active{
  transform:translateY(1px) scale(.97)!important;
}
html body .card.chat .chat-group.assistant .chat-bubble,
html body section.card.chat .chat-group.assistant .chat-bubble{
  position:relative!important;
  overflow:hidden!important;
  background-image:
    linear-gradient(90deg,rgba(47,159,98,.055) 0 1px,transparent 1px 100%),
    linear-gradient(180deg,rgba(178,235,196,.16),rgba(248,255,250,.42)),
    linear-gradient(180deg,rgba(255,255,255,.52),rgba(244,255,247,.28))!important;
  background-size:18px 100%,100% 100%,100% 100%!important;
  border-color:rgba(63,159,106,.16)!important;
}
html body .card.chat .chat-group.assistant .chat-bubble::before,
html body section.card.chat .chat-group.assistant .chat-bubble::before{
  content:""!important;
  position:absolute!important;
  inset:10px auto 10px 0!important;
  width:3px!important;
  border-radius:999px!important;
  pointer-events:none!important;
  background:
    linear-gradient(180deg,transparent,rgba(47,159,98,.70),rgba(178,235,196,.76),rgba(47,159,98,.54),transparent),
    radial-gradient(circle,rgba(255,255,255,.75),transparent 62%)!important;
  background-size:100% 38px,100% 100%!important;
  animation:ocAssistantLifeFlow 4.8s ease-in-out infinite!important;
}
html body .card.chat .chat-group.assistant .chat-bubble.streaming,
html body section.card.chat .chat-group.assistant .chat-bubble.streaming,
html body .card.chat .chat-group.assistant .chat-reading-indicator,
html body section.card.chat .chat-group.assistant .chat-reading-indicator{
  border-color:rgba(47,159,98,.28)!important;
  box-shadow:0 18px 54px rgba(32,106,62,.16), inset 0 0 0 1px rgba(178,235,196,.20)!important;
  animation:ocAssistantTextureDrift 8s linear infinite!important;
}
html body .card.chat .chat-group.user .chat-bubble,
html body section.card.chat .chat-group.user .chat-bubble{
  background-image:linear-gradient(135deg,rgba(111,189,141,.18),rgba(255,255,255,.50))!important;
  border-color:rgba(63,159,106,.18)!important;
}
html body .card.chat .agent-chat__run-status,
html body section.card.chat .agent-chat__run-status,
html body .card.chat .compaction-indicator,
html body section.card.chat .compaction-indicator{
  border-radius:999px!important;
  border:1px solid rgba(63,159,106,.18)!important;
  background:rgba(247,255,249,.68)!important;
  color:#244731!important;
  box-shadow:0 10px 28px rgba(32,106,62,.10)!important;
}
html body .card.chat .agent-chat__run-status--in-progress,
html body section.card.chat .agent-chat__run-status--in-progress,
html body .card.chat .compaction-indicator--active,
html body section.card.chat .compaction-indicator--active{
  color:#1f6b3c!important;
  background:linear-gradient(90deg,rgba(178,235,196,.34),rgba(247,255,249,.72))!important;
  animation:ocStatusGlow 1.8s ease-in-out infinite!important;
}
html body .card.chat .agent-chat__run-status--done,
html body section.card.chat .agent-chat__run-status--done,
html body .card.chat .compaction-indicator--complete,
html body section.card.chat .compaction-indicator--complete{
  color:#2f7f50!important;
  border-color:rgba(63,159,106,.24)!important;
}
html body .card.chat .agent-chat__run-status--interrupted,
html body section.card.chat .agent-chat__run-status--interrupted,
html body .card.chat .callout.danger,
html body section.card.chat .callout.danger,
html body .card.chat .chat-side-result--error,
html body section.card.chat .chat-side-result--error,
html body .card.chat .chat-tool-msg-summary--error,
html body section.card.chat .chat-tool-msg-summary--error{
  border-color:rgba(190,74,74,.32)!important;
  background:linear-gradient(180deg,rgba(255,244,240,.70),rgba(248,255,250,.50))!important;
  color:#773229!important;
}
html body .card.chat:has(.agent-chat__run-status--in-progress)::after,
html body section.card.chat:has(.agent-chat__run-status--in-progress)::after,
html body .card.chat:has(.chat-bubble.streaming)::after,
html body section.card.chat:has(.chat-bubble.streaming)::after{
  animation-duration:4.2s!important;
  opacity:.70!important;
  filter:saturate(1.15)!important;
}
html body .card.chat:has(.callout.danger)::after,
html body section.card.chat:has(.callout.danger)::after,
html body .card.chat:has(.chat-side-result--error)::after,
html body section.card.chat:has(.chat-side-result--error)::after,
html body .card.chat:has(.chat-tool-msg-summary--error)::after,
html body section.card.chat:has(.chat-tool-msg-summary--error)::after{
  animation-duration:3.1s!important;
  opacity:.50!important;
  filter:saturate(1.06) sepia(.12) hue-rotate(-18deg)!important;
}
@media (prefers-reduced-motion:reduce){
  html body .card.chat .agent-chat__input,
  html body section.card.chat .agent-chat__input,
  html body .card.chat .agent-chat__input::before,
  html body section.card.chat .agent-chat__input::before,
  html body .card.chat .chat-group.assistant .chat-bubble::before,
  html body section.card.chat .chat-group.assistant .chat-bubble::before,
  html body .card.chat .chat-group.assistant .chat-bubble.streaming,
  html body section.card.chat .chat-group.assistant .chat-bubble.streaming,
  html body .card.chat .agent-chat__run-status--in-progress,
  html body section.card.chat .agent-chat__run-status--in-progress{
    animation:none!important;
  }
}

/* OpenClaw Forest Arcane OS — obvious edition 2026-06-13
   Intent: make the Control UI visually changed at first glance: sidebar, header, canvas, composer, chat bubbles.
   Rollback: restore runtime/backups/control-ui-openclaw-pro-unified.*.bak over this file.
*/
html body{
  --oc-obvious-ink:#102017;
  --oc-obvious-forest:#0f3d25;
  --oc-obvious-moss:#2f9f62;
  --oc-obvious-mint:#b7f4c8;
  --oc-obvious-gold:#d8b35a;
  --oc-obvious-panel:rgba(247,255,249,.74);
  --oc-obvious-panel-strong:rgba(255,255,255,.86);
  --oc-obvious-border:rgba(58,146,92,.24);
  --oc-obvious-shadow:0 22px 70px rgba(16,61,37,.16);
}
html body openclaw-app,
html body .app-shell,
html body .control-ui,
html body .main-layout{
  background:
    radial-gradient(circle at 12% 8%,rgba(183,244,200,.55),transparent 27rem),
    radial-gradient(circle at 88% 12%,rgba(216,179,90,.20),transparent 24rem),
    radial-gradient(circle at 52% 105%,rgba(47,159,98,.22),transparent 34rem),
    linear-gradient(135deg,#f2fff6 0%,#edf9f1 46%,#fff9e9 100%)!important;
}
html body openclaw-app::before{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  opacity:.34!important;
  background-image:
    linear-gradient(90deg,rgba(15,61,37,.050) 1px,transparent 1px),
    linear-gradient(180deg,rgba(15,61,37,.040) 1px,transparent 1px),
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.45),transparent 42%)!important;
  background-size:34px 34px,34px 34px,100% 100%!important;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.80),rgba(0,0,0,.18) 72%,transparent)!important;
}
html body .sidebar,
html body nav.sidebar,
html body .app-sidebar,
html body aside{
  background:
    radial-gradient(circle at 20% 0%,rgba(183,244,200,.22),transparent 16rem),
    linear-gradient(180deg,rgba(13,43,28,.96),rgba(18,70,42,.93) 52%,rgba(10,35,24,.97))!important;
  border-right:1px solid rgba(183,244,200,.22)!important;
  box-shadow:18px 0 60px rgba(10,35,24,.16)!important;
  color:#eaffef!important;
}
html body .sidebar *,
html body nav.sidebar *,
html body .app-sidebar *,
html body aside *{
  border-color:rgba(183,244,200,.16)!important;
}
html body .sidebar a,
html body nav.sidebar a,
html body .app-sidebar a,
html body aside a,
html body .nav-item,
html body [class*="nav"] a{
  border-radius:14px!important;
}
html body .sidebar a:hover,
html body nav.sidebar a:hover,
html body .app-sidebar a:hover,
html body aside a:hover,
html body .nav-item:hover{
  background:rgba(183,244,200,.13)!important;
  box-shadow:inset 0 0 0 1px rgba(183,244,200,.18)!important;
}
html body .sidebar a[aria-current],
html body nav.sidebar a[aria-current],
html body .app-sidebar a[aria-current],
html body aside a[aria-current],
html body .nav-item.active,
html body .nav-item--active{
  background:linear-gradient(135deg,rgba(183,244,200,.24),rgba(216,179,90,.12))!important;
  color:#ffffff!important;
  box-shadow:inset 0 0 0 1px rgba(183,244,200,.32),0 10px 26px rgba(0,0,0,.16)!important;
}
html body .page-header,
html body .chat-header,
html body header,
html body .topbar{
  background:linear-gradient(180deg,rgba(255,255,255,.76),rgba(244,255,247,.56))!important;
  border:1px solid var(--oc-obvious-border)!important;
  border-radius:24px!important;
  box-shadow:var(--oc-obvious-shadow),inset 0 1px rgba(255,255,255,.86)!important;
  backdrop-filter:blur(18px) saturate(1.18)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.18)!important;
}
html body .card,
html body section.card,
html body .panel,
html body .workspace-card{
  background:
    linear-gradient(180deg,var(--oc-obvious-panel-strong),var(--oc-obvious-panel))!important;
  border-color:var(--oc-obvious-border)!important;
  box-shadow:0 18px 56px rgba(36,104,58,.10),inset 0 1px rgba(255,255,255,.70)!important;
}
html body .card.chat,
html body section.card.chat{
  background:
    radial-gradient(circle at 18% 18%,rgba(183,244,200,.32),transparent 17rem),
    radial-gradient(circle at 92% 6%,rgba(216,179,90,.18),transparent 18rem),
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(239,255,244,.66))!important;
  border:1px solid rgba(47,159,98,.28)!important;
  box-shadow:0 28px 90px rgba(22,88,48,.18),inset 0 1px rgba(255,255,255,.88)!important;
  overflow:hidden!important;
}
html body .card.chat::before,
html body section.card.chat::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  opacity:.32!important;
  background:
    linear-gradient(90deg,rgba(47,159,98,.09) 1px,transparent 1px),
    linear-gradient(180deg,rgba(47,159,98,.07) 1px,transparent 1px)!important;
  background-size:28px 28px!important;
  mask-image:linear-gradient(to bottom,transparent,black 15%,black 80%,transparent)!important;
}
html body .chat-group.assistant .chat-bubble,
html body section.card.chat .chat-group.assistant .chat-bubble{
  background:
    radial-gradient(circle at 0% 0%,rgba(183,244,200,.55),transparent 16rem),
    linear-gradient(135deg,rgba(255,255,255,.88),rgba(231,255,239,.72))!important;
  border:1px solid rgba(47,159,98,.30)!important;
  box-shadow:0 18px 50px rgba(28,94,50,.14),inset 0 1px rgba(255,255,255,.88)!important;
}
html body .chat-group.user .chat-bubble,
html body section.card.chat .chat-group.user .chat-bubble{
  background:
    radial-gradient(circle at 100% 0%,rgba(216,179,90,.22),transparent 13rem),
    linear-gradient(135deg,rgba(32,127,72,.95),rgba(20,82,48,.95))!important;
  border:1px solid rgba(183,244,200,.28)!important;
  color:#f7fff9!important;
  box-shadow:0 18px 44px rgba(18,79,44,.22)!important;
}
html body .card.chat .agent-chat__input,
html body section.card.chat .agent-chat__input{
  border:1px solid rgba(47,159,98,.34)!important;
  background:
    radial-gradient(circle at 18% 0%,rgba(216,179,90,.20),transparent 13rem),
    radial-gradient(circle at 52% 100%,rgba(183,244,200,.58),transparent 18rem),
    linear-gradient(180deg,rgba(255,255,255,.86),rgba(239,255,244,.76))!important;
  box-shadow:0 24px 80px rgba(29,105,57,.23),0 0 0 7px rgba(183,244,200,.18),inset 0 1px rgba(255,255,255,.92)!important;
}
html body .card.chat .agent-chat__input:focus-within,
html body section.card.chat .agent-chat__input:focus-within{
  border-color:rgba(47,159,98,.68)!important;
  box-shadow:0 28px 90px rgba(29,105,57,.30),0 0 0 9px rgba(183,244,200,.30),0 0 42px rgba(47,159,98,.28),inset 0 1px rgba(255,255,255,.94)!important;
}
html body .card.chat .agent-chat__composer-combobox,
html body section.card.chat .agent-chat__composer-combobox{
  background:rgba(255,255,255,.72)!important;
  box-shadow:inset 0 0 0 1px rgba(47,159,98,.24),inset 0 1px rgba(255,255,255,.88)!important;
}
html body .card.chat .agent-chat__toolbar .chat-send-btn,
html body section.card.chat .agent-chat__toolbar .chat-send-btn{
  background:linear-gradient(135deg,#38b66d,#1f7f48)!important;
  color:#ffffff!important;
  border-radius:999px!important;
  box-shadow:0 12px 28px rgba(31,127,72,.30),inset 0 1px rgba(255,255,255,.25)!important;
}
html body .card.chat .agent-chat__run-status,
html body section.card.chat .agent-chat__run-status,
html body .activity-status{
  background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(238,255,244,.64))!important;
  border-color:rgba(47,159,98,.30)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.72)!important;
}
@media (prefers-reduced-motion:no-preference){
  html body .card.chat .agent-chat__input:focus-within,
  html body section.card.chat .agent-chat__input:focus-within{
    animation:ocArcanePulse 3.2s ease-in-out infinite!important;
  }
}
@media (max-width:760px){
  html body .page-header,
  html body .chat-header,
  html body header,
  html body .topbar{border-radius:18px!important;}
  html body .card.chat .agent-chat__input,
  html body section.card.chat .agent-chat__input{box-shadow:0 16px 46px rgba(29,105,57,.18),0 0 0 4px rgba(183,244,200,.16)!important;}
}

/* OpenClaw Forest Arcane OS — readability polish 2026-06-13
   Keep the visible theme, reduce wallpaper noise behind text, improve sidebar contrast.
*/
html body .card.chat::before,
html body section.card.chat::before{
  opacity:.16!important;
}
html body .card.chat,
html body section.card.chat{
  background:
    radial-gradient(circle at 18% 18%,rgba(183,244,200,.24),transparent 17rem),
    radial-gradient(circle at 92% 6%,rgba(216,179,90,.12),transparent 18rem),
    linear-gradient(180deg,rgba(255,255,255,.84),rgba(243,255,247,.78))!important;
}
html body .chat-group.assistant .chat-bubble,
html body section.card.chat .chat-group.assistant .chat-bubble,
html body .tool-call,
html body .tool-result,
html body .message-card,
html body .markdown-body table,
html body .markdown-body pre{
  background-color:rgba(255,255,255,.88)!important;
  backdrop-filter:blur(10px) saturate(1.08)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.08)!important;
}
html body .card.chat .chat-list,
html body section.card.chat .chat-list,
html body .agent-chat__messages{
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.30))!important;
}
html body .sidebar,
html body nav.sidebar,
html body .app-sidebar,
html body aside{
  color:#f3fff6!important;
}
html body .sidebar .muted,
html body nav.sidebar .muted,
html body .app-sidebar .muted,
html body aside .muted,
html body .sidebar small,
html body nav.sidebar small,
html body .app-sidebar small,
html body aside small,
html body .sidebar [class*="subtitle"],
html body nav.sidebar [class*="subtitle"],
html body .app-sidebar [class*="subtitle"],
html body aside [class*="subtitle"]{
  color:rgba(234,255,239,.74)!important;
}
html body .sidebar [class*="section"],
html body nav.sidebar [class*="section"],
html body .app-sidebar [class*="section"],
html body aside [class*="section"]{
  color:rgba(234,255,239,.62)!important;
}
html body .banner,
html body .callout,
html body [role="alert"]{
  background:rgba(255,255,255,.82)!important;
  backdrop-filter:blur(12px) saturate(1.1)!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.1)!important;
}
@media (min-width:900px){
  html body .card.chat .agent-chat__input,
  html body section.card.chat .agent-chat__input{
    margin-bottom:18px!important;
  }
}

/* OpenClaw Forest Arcane OS — sidebar gradient softening 2026-06-13 09:08
   User feedback: previous sidebar green was too dark. Make it a lighter forest-to-mint gradient.
*/
html body .sidebar,
html body nav.sidebar,
html body .app-sidebar,
html body aside{
  background:
    radial-gradient(circle at 18% -4%,rgba(214,255,226,.52),transparent 15rem),
    radial-gradient(circle at 88% 18%,rgba(216,179,90,.16),transparent 13rem),
    linear-gradient(180deg,
      rgba(48,132,82,.96) 0%,
      rgba(36,112,70,.94) 30%,
      rgba(26,91,58,.95) 66%,
      rgba(20,70,48,.96) 100%)!important;
  border-right:1px solid rgba(217,255,226,.34)!important;
  box-shadow:18px 0 54px rgba(21,83,52,.12),inset -1px 0 rgba(255,255,255,.12)!important;
  color:#f7fff9!important;
}
html body .sidebar::before,
html body nav.sidebar::before,
html body .app-sidebar::before,
html body aside::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  opacity:.22!important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.16),transparent 38%),
    linear-gradient(180deg,rgba(255,255,255,.12),transparent 18%,rgba(0,0,0,.08) 100%)!important;
}
html body .sidebar a,
html body nav.sidebar a,
html body .app-sidebar a,
html body aside a,
html body .nav-item,
html body [class*="nav"] a{
  color:rgba(248,255,250,.92)!important;
}
html body .sidebar .muted,
html body nav.sidebar .muted,
html body .app-sidebar .muted,
html body aside .muted,
html body .sidebar small,
html body nav.sidebar small,
html body .app-sidebar small,
html body aside small,
html body .sidebar [class*="subtitle"],
html body nav.sidebar [class*="subtitle"],
html body .app-sidebar [class*="subtitle"],
html body aside [class*="subtitle"]{
  color:rgba(248,255,250,.78)!important;
}
html body .sidebar [class*="section"],
html body nav.sidebar [class*="section"],
html body .app-sidebar [class*="section"],
html body aside [class*="section"]{
  color:rgba(248,255,250,.68)!important;
  letter-spacing:.045em!important;
}
html body .sidebar a:hover,
html body nav.sidebar a:hover,
html body .app-sidebar a:hover,
html body aside a:hover,
html body .nav-item:hover{
  background:linear-gradient(135deg,rgba(255,255,255,.17),rgba(214,255,226,.14))!important;
  box-shadow:inset 0 0 0 1px rgba(238,255,243,.22),0 8px 22px rgba(10,45,28,.10)!important;
}
html body .sidebar a[aria-current],
html body nav.sidebar a[aria-current],
html body .app-sidebar a[aria-current],
html body aside a[aria-current],
html body .nav-item.active,
html body .nav-item--active{
  background:linear-gradient(135deg,rgba(255,255,255,.26),rgba(214,255,226,.20) 58%,rgba(216,179,90,.14))!important;
  box-shadow:inset 0 0 0 1px rgba(248,255,250,.36),0 12px 28px rgba(10,45,28,.14)!important;
}

/* OpenClaw Forest Arcane OS — sidebar metadata contrast 2026-06-13 09:10 */
html body .sidebar [class*="time"],
html body nav.sidebar [class*="time"],
html body .app-sidebar [class*="time"],
html body aside [class*="time"],
html body .sidebar [class*="meta"],
html body nav.sidebar [class*="meta"],
html body .app-sidebar [class*="meta"],
html body aside [class*="meta"],
html body .sidebar [class*="recent"],
html body nav.sidebar [class*="recent"],
html body .app-sidebar [class*="recent"],
html body aside [class*="recent"],
html body .sidebar small,
html body nav.sidebar small,
html body .app-sidebar small,
html body aside small{
  color:rgba(252,255,253,.84)!important;
  text-shadow:0 1px 2px rgba(4,38,21,.24)!important;
}
html body .sidebar [class*="label"],
html body nav.sidebar [class*="label"],
html body .app-sidebar [class*="label"],
html body aside [class*="label"]{
  color:rgba(252,255,253,.90)!important;
}

/* OpenClaw Control UI — 120Hz performance pass 2026-06-13 09:31
   Goal: keep the forest/gradient identity but remove paint-heavy effects that hurt scrolling/input.
*/
html body{
  --oc-perf-shadow-sm:0 1px 2px rgba(15,61,37,.08),0 8px 22px rgba(15,61,37,.08);
  --oc-perf-shadow-md:0 10px 30px rgba(15,61,37,.10);
}
/* Stop expensive fixed full-screen pseudo texture layers. */
html body openclaw-app::before,
html body .card.chat::before,
html body section.card.chat::before,
html body .sidebar::before,
html body nav.sidebar::before,
html body .app-sidebar::before,
html body aside::before{
  content:none!important;
  display:none!important;
  animation:none!important;
}
/* Simpler page background: a few static gradients, no grid/texture repaint. */
html body openclaw-app,
html body .app-shell,
html body .control-ui,
html body .main-layout{
  background:
    radial-gradient(circle at 12% 0%,rgba(191,243,207,.34),transparent 30rem),
    linear-gradient(135deg,#f4fff7 0%,#edf8f1 52%,#fff8e9 100%)!important;
}
/* Sidebar: lighter gradient but cheaper paint. */
html body .sidebar,
html body nav.sidebar,
html body .app-sidebar,
html body aside{
  background:linear-gradient(180deg,#4aa06c 0%,#367c58 46%,#235a41 100%)!important;
  box-shadow:8px 0 20px rgba(21,83,52,.10)!important;
  border-right:1px solid rgba(230,255,237,.30)!important;
  contain:paint!important;
}
/* Remove costly glass blur. Keep solid translucent-looking colors. */
html body .page-header,
html body .chat-header,
html body header,
html body .topbar,
html body .card,
html body section.card,
html body .panel,
html body .workspace-card,
html body .card.chat,
html body section.card.chat,
html body .agent-chat__input,
html body .agent-chat__composer-combobox,
html body .chat-group.assistant .chat-bubble,
html body section.card.chat .chat-group.assistant .chat-bubble,
html body .tool-call,
html body .tool-result,
html body .message-card,
html body .markdown-body table,
html body .markdown-body pre,
html body .banner,
html body .callout,
html body [role="alert"]{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  filter:none!important;
}
/* Chat surface: no repeating SVG wallpaper behind text. */
html body .card.chat,
html body section.card.chat{
  background:linear-gradient(180deg,rgba(255,255,255,.93),rgba(243,255,247,.90))!important;
  box-shadow:var(--oc-perf-shadow-md)!important;
  border:1px solid rgba(47,159,98,.22)!important;
  contain:paint!important;
}
html body .card.chat .chat-list,
html body section.card.chat .chat-list,
html body .agent-chat__messages{
  background:transparent!important;
  contain:layout paint style!important;
}
/* Composer: keep visible focus but avoid huge glow radii. */
html body .card.chat .agent-chat__input,
html body section.card.chat .agent-chat__input,
html body .agent-chat__input{
  background:linear-gradient(180deg,#ffffff,#f0fff4)!important;
  border:1px solid rgba(47,159,98,.34)!important;
  box-shadow:0 8px 24px rgba(29,105,57,.13),0 0 0 3px rgba(183,244,200,.18)!important;
  transform:translateZ(0)!important;
  will-change:auto!important;
}
html body .card.chat .agent-chat__input:focus-within,
html body section.card.chat .agent-chat__input:focus-within,
html body .agent-chat__input:focus-within{
  border-color:rgba(47,159,98,.58)!important;
  box-shadow:0 10px 28px rgba(29,105,57,.16),0 0 0 4px rgba(183,244,200,.24)!important;
  animation:none!important;
}
html body .card.chat .agent-chat__composer-combobox,
html body section.card.chat .agent-chat__composer-combobox,
html body .agent-chat__composer-combobox{
  background:#ffffff!important;
  box-shadow:inset 0 0 0 1px rgba(47,159,98,.18)!important;
}
/* Bubbles/cards: flatten heavy shadows; improve text area stability. */
html body .chat-group.assistant .chat-bubble,
html body section.card.chat .chat-group.assistant .chat-bubble,
html body .tool-call,
html body .tool-result,
html body .message-card{
  background:#ffffff!important;
  box-shadow:var(--oc-perf-shadow-sm)!important;
  border-color:rgba(47,159,98,.18)!important;
}
html body .chat-group.user .chat-bubble,
html body section.card.chat .chat-group.user .chat-bubble{
  background:linear-gradient(135deg,#27844f,#1f6842)!important;
  box-shadow:0 6px 18px rgba(18,79,44,.16)!important;
}
/* Disable expensive decorative motion globally inside Control UI. */
html body .card.chat *,
html body section.card.chat *,
html body .sidebar *,
html body nav.sidebar *,
html body .app-sidebar *,
html body aside *{
  animation-duration:.001ms!important;
  animation-iteration-count:1!important;
  transition-duration:80ms!important;
}
/* Keep only cheap hover feedback. */
html body .sidebar a:hover,
html body nav.sidebar a:hover,
html body .app-sidebar a:hover,
html body aside a:hover,
html body .nav-item:hover{
  background:rgba(255,255,255,.14)!important;
  box-shadow:none!important;
}
html body .sidebar a[aria-current],
html body nav.sidebar a[aria-current],
html body .app-sidebar a[aria-current],
html body aside a[aria-current],
html body .nav-item.active,
html body .nav-item--active{
  background:rgba(255,255,255,.22)!important;
  box-shadow:inset 0 0 0 1px rgba(248,255,250,.28)!important;
}
html body .card.chat .agent-chat__toolbar .chat-send-btn,
html body section.card.chat .agent-chat__toolbar .chat-send-btn{
  background:linear-gradient(135deg,#36aa67,#227745)!important;
  box-shadow:0 4px 12px rgba(31,127,72,.18)!important;
}
/* Avoid costly smooth scroll during large message updates. */
html body .chat-scroll,
html body .chat-list,
html body .agent-chat__messages{
  scroll-behavior:auto!important;
}
@media (prefers-reduced-motion:reduce), (update:fast){
  html body *,html body *::before,html body *::after{
    animation:none!important;
  }
}

/* OpenClaw Control UI — sidebar harmony pass 2026-06-13 09:43
   Feedback: sidebar background does not match the rest. Make it a calm light glass/mint rail, not a dark green wall.
   Performance: no backdrop blur, no pseudo texture layers, small shadows only.
*/
html body .sidebar,
html body nav.sidebar,
html body .app-sidebar,
html body aside{
  background:
    linear-gradient(180deg,rgba(255,255,255,.82) 0%,rgba(239,253,244,.78) 42%,rgba(229,247,236,.82) 100%),
    radial-gradient(circle at 22% 4%,rgba(183,244,200,.34),transparent 15rem)!important;
  color:#1f3b2b!important;
  border-right:1px solid rgba(47,159,98,.18)!important;
  box-shadow:6px 0 18px rgba(28,94,50,.07),inset -1px 0 rgba(255,255,255,.62)!important;
  contain:paint!important;
}
html body .sidebar *,
html body nav.sidebar *,
html body .app-sidebar *,
html body aside *{
  border-color:rgba(47,159,98,.14)!important;
  text-shadow:none!important;
}
html body .sidebar a,
html body nav.sidebar a,
html body .app-sidebar a,
html body aside a,
html body .nav-item,
html body [class*="nav"] a{
  color:#244231!important;
  border-radius:13px!important;
}
html body .sidebar .muted,
html body nav.sidebar .muted,
html body .app-sidebar .muted,
html body aside .muted,
html body .sidebar small,
html body nav.sidebar small,
html body .app-sidebar small,
html body aside small,
html body .sidebar [class*="time"],
html body nav.sidebar [class*="time"],
html body .app-sidebar [class*="time"],
html body aside [class*="time"],
html body .sidebar [class*="meta"],
html body nav.sidebar [class*="meta"],
html body .app-sidebar [class*="meta"],
html body aside [class*="meta"],
html body .sidebar [class*="subtitle"],
html body nav.sidebar [class*="subtitle"],
html body .app-sidebar [class*="subtitle"],
html body aside [class*="subtitle"]{
  color:rgba(31,59,43,.68)!important;
}
html body .sidebar [class*="section"],
html body nav.sidebar [class*="section"],
html body .app-sidebar [class*="section"],
html body aside [class*="section"],
html body .sidebar [class*="label"],
html body nav.sidebar [class*="label"],
html body .app-sidebar [class*="label"],
html body aside [class*="label"]{
  color:rgba(31,59,43,.58)!important;
  letter-spacing:.045em!important;
}
html body .sidebar a:hover,
html body nav.sidebar a:hover,
html body .app-sidebar a:hover,
html body aside a:hover,
html body .nav-item:hover{
  background:rgba(47,159,98,.08)!important;
  color:#173421!important;
  box-shadow:inset 0 0 0 1px rgba(47,159,98,.13)!important;
}
html body .sidebar a[aria-current],
html body nav.sidebar a[aria-current],
html body .app-sidebar a[aria-current],
html body aside a[aria-current],
html body .nav-item.active,
html body .nav-item--active{
  background:linear-gradient(135deg,rgba(47,159,98,.15),rgba(183,244,200,.18))!important;
  color:#13311f!important;
  box-shadow:inset 0 0 0 1px rgba(47,159,98,.20),0 4px 12px rgba(28,94,50,.07)!important;
}
html body .sidebar .brand,
html body nav.sidebar .brand,
html body .app-sidebar .brand,
html body aside .brand,
html body .sidebar [class*="brand"],
html body nav.sidebar [class*="brand"],
html body .app-sidebar [class*="brand"],
html body aside [class*="brand"]{
  color:#173421!important;
}

/* OpenClaw Control UI — sidebar system pass 2026-06-13 09:49
   Fix: a sidebar background change must update every dependent token/state: base text, icons,
   recent-session title/meta, dots/live badges, new-session button, section labels, hover/active/disabled.
   Palette is intentionally close to the right-side glass panels, with WCAG-friendly dark text.
*/
html body{
  --oc-side-bg-top:#f8fff9;
  --oc-side-bg-mid:#effbf2;
  --oc-side-bg-bottom:#e7f4eb;
  --oc-side-ink:#173421;
  --oc-side-text:#1f3b2b;
  --oc-side-muted:#55715f;
  --oc-side-subtle:#6f8877;
  --oc-side-border:rgba(47,132,80,.18);
  --oc-side-hover:rgba(47,132,80,.085);
  --oc-side-active:rgba(47,132,80,.145);
  --oc-side-active-strong:rgba(47,132,80,.22);
  --oc-side-accent:#2f8f55;
}
html body .shell-nav,
html body :root[data-theme-mode="light"] .shell-nav,
html body :root[data-theme-mode="dark"] .shell-nav,
html body .sidebar,
html body nav.sidebar,
html body .app-sidebar,
html body aside{
  background:
    linear-gradient(180deg,var(--oc-side-bg-top) 0%,var(--oc-side-bg-mid) 48%,var(--oc-side-bg-bottom) 100%)!important;
  color:var(--oc-side-text)!important;
  border-right:1px solid var(--oc-side-border)!important;
  box-shadow:5px 0 18px rgba(28,94,50,.055),inset -1px 0 rgba(255,255,255,.76)!important;
}
/* Reset previous white-on-green assumptions. */
html body .shell-nav *,
html body .sidebar *,
html body nav.sidebar *,
html body .app-sidebar *,
html body aside *{
  color:inherit!important;
  text-shadow:none!important;
  filter:none!important;
}
/* Primary navigation */
html body .nav-item,
html body .nav-item:visited,
html body .sidebar a,
html body nav.sidebar a,
html body .app-sidebar a,
html body aside a{
  color:var(--oc-side-text)!important;
  border-color:transparent!important;
}
html body .nav-item__icon{
  color:var(--oc-side-muted)!important;
  opacity:1!important;
}
html body .nav-item__text{
  color:var(--oc-side-text)!important;
  font-weight:560!important;
}
html body .nav-item:hover{
  background:var(--oc-side-hover)!important;
  border-color:rgba(47,132,80,.14)!important;
  color:var(--oc-side-ink)!important;
  box-shadow:none!important;
}
html body .nav-item:hover .nav-item__icon,
html body .nav-item:hover .nav-item__text{
  color:var(--oc-side-ink)!important;
}
html body .nav-item.nav-item--active,
html body .nav-item.active,
html body .nav-item[aria-current="page"]{
  background:linear-gradient(135deg,var(--oc-side-active),rgba(183,244,200,.16))!important;
  border-color:var(--oc-side-active-strong)!important;
  color:var(--oc-side-ink)!important;
  box-shadow:inset 0 0 0 1px rgba(47,132,80,.12),0 4px 12px rgba(28,94,50,.055)!important;
}
html body .nav-item.nav-item--active .nav-item__icon,
html body .nav-item.active .nav-item__icon,
html body .nav-item[aria-current="page"] .nav-item__icon{
  color:var(--oc-side-accent)!important;
}
html body .nav-item.nav-item--active .nav-item__text,
html body .nav-item.active .nav-item__text,
html body .nav-item[aria-current="page"] .nav-item__text{
  color:var(--oc-side-ink)!important;
  font-weight:680!important;
}
/* New session button: make it part of the same palette, readable in all states. */
html body .sidebar-new-session{
  background:linear-gradient(180deg,#ffffff,#eefaf2)!important;
  color:var(--oc-side-ink)!important;
  border:1px solid rgba(47,132,80,.22)!important;
  box-shadow:0 4px 12px rgba(28,94,50,.065),inset 0 1px rgba(255,255,255,.92)!important;
}
html body .sidebar-new-session__icon{
  color:var(--oc-side-accent)!important;
}
html body .sidebar-new-session__label{
  color:var(--oc-side-ink)!important;
  font-weight:650!important;
}
html body .sidebar-new-session:hover:not(:disabled){
  background:linear-gradient(180deg,#ffffff,#e4f6ea)!important;
  border-color:rgba(47,132,80,.32)!important;
  box-shadow:0 6px 16px rgba(28,94,50,.08),inset 0 1px rgba(255,255,255,.96)!important;
}
html body .sidebar-new-session:disabled{
  background:#f1f7f3!important;
  color:#87998c!important;
  border-color:rgba(47,132,80,.12)!important;
  box-shadow:none!important;
  opacity:.78!important;
}
html body .sidebar-new-session:disabled .sidebar-new-session__icon,
html body .sidebar-new-session:disabled .sidebar-new-session__label{
  color:#87998c!important;
}
/* Recent sessions block */
html body .sidebar-sessions{
  color:var(--oc-side-text)!important;
}
html body .sidebar-recent-sessions{
  border-top:1px solid rgba(47,132,80,.13)!important;
}
html body .sidebar-recent-sessions__label{
  color:var(--oc-side-subtle)!important;
  font-weight:720!important;
  letter-spacing:.075em!important;
  text-transform:uppercase!important;
}
html body .sidebar-recent-sessions__list{
  color:var(--oc-side-text)!important;
}
html body .sidebar-recent-session,
html body .sidebar-recent-session:visited{
  background:transparent!important;
  color:var(--oc-side-text)!important;
  border:1px solid transparent!important;
  box-shadow:none!important;
}
html body .sidebar-recent-session:hover{
  background:rgba(47,132,80,.075)!important;
  border-color:rgba(47,132,80,.13)!important;
  color:var(--oc-side-ink)!important;
}
html body .sidebar-recent-session--active{
  background:linear-gradient(135deg,rgba(47,132,80,.13),rgba(183,244,200,.16))!important;
  border-color:rgba(47,132,80,.22)!important;
  color:var(--oc-side-ink)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)!important;
}
html body .sidebar-recent-session__dot{
  background:var(--oc-side-accent)!important;
  box-shadow:0 0 0 3px rgba(47,132,80,.12)!important;
  opacity:.86!important;
}
html body .sidebar-recent-session__body{
  color:inherit!important;
}
html body .sidebar-recent-session__name{
  color:var(--oc-side-text)!important;
  font-weight:610!important;
}
html body .sidebar-recent-session:hover .sidebar-recent-session__name,
html body .sidebar-recent-session--active .sidebar-recent-session__name{
  color:var(--oc-side-ink)!important;
  font-weight:690!important;
}
html body .sidebar-recent-session__meta{
  color:var(--oc-side-muted)!important;
  font-weight:500!important;
}
html body .sidebar-recent-session:hover .sidebar-recent-session__meta,
html body .sidebar-recent-session--active .sidebar-recent-session__meta{
  color:#46644f!important;
}
html body .sidebar-recent-session__live{
  background:#2f8f55!important;
  box-shadow:0 0 0 3px rgba(47,143,85,.16)!important;
}
/* Collapsed rail and generic labels */
html body .sidebar-sessions--collapsed .sidebar-new-session{
  color:var(--oc-side-ink)!important;
}
html body .brand-title,
html body .dashboard-header__breadcrumb-current,
html body .sidebar [class*="brand"],
html body nav.sidebar [class*="brand"],
html body .app-sidebar [class*="brand"],
html body aside [class*="brand"]{
  color:var(--oc-side-ink)!important;
}
html body .sidebar small,
html body nav.sidebar small,
html body .app-sidebar small,
html body aside small,
html body .sidebar .muted,
html body nav.sidebar .muted,
html body .app-sidebar .muted,
html body aside .muted{
  color:var(--oc-side-muted)!important;
}

/* OpenClaw Control UI — sidebar contrast correction 2026-06-13 09:52
   Raise secondary sidebar labels above WCAG-ish 4.5 on the mint rail.
*/
html body{
  --oc-side-subtle:#5f7968;
}
html body .sidebar-recent-sessions__label,
html body .sidebar [class*="section"],
html body nav.sidebar [class*="section"],
html body .app-sidebar [class*="section"],
html body aside [class*="section"],
html body .sidebar [class*="label"],
html body nav.sidebar [class*="label"],
html body .app-sidebar [class*="label"],
html body aside [class*="label"]{
  color:#5f7968!important;
}

/* OpenClaw Control UI — sidebar contrast final nudge 2026-06-13 09:53 */
html body{
  --oc-side-subtle:#58715f;
}
html body .sidebar-recent-sessions__label,
html body .sidebar [class*="section"],
html body nav.sidebar [class*="section"],
html body .app-sidebar [class*="section"],
html body aside [class*="section"],
html body .sidebar [class*="label"],
html body nav.sidebar [class*="label"],
html body .app-sidebar [class*="label"],
html body aside [class*="label"]{
  color:#58715f!important;
}

/* OpenClaw Control UI — recent sessions readable state fix 2026-06-13 09:54
   Feedback: recent-session text flipped to black on selected and white on unselected.
   Lock the conversation list to ink-on-mint for every state, including inherited spans/SVGs.
*/
html body{
  --oc-recent-ink:#16321f;
  --oc-recent-text:#21402d;
  --oc-recent-muted:#526f5c;
  --oc-recent-idle-bg:rgba(255,255,255,.34);
  --oc-recent-hover-bg:rgba(47,132,80,.09);
  --oc-recent-active-bg:linear-gradient(135deg,rgba(47,132,80,.16),rgba(196,232,210,.22));
}
html body .sidebar-recent-session,
html body .sidebar-recent-session:link,
html body .sidebar-recent-session:visited,
html body .sidebar-recent-session:hover,
html body .sidebar-recent-session:focus,
html body .sidebar-recent-session:focus-visible,
html body .sidebar-recent-session:active,
html body .sidebar-recent-session.sidebar-recent-session--active,
html body .sidebar-recent-session[aria-current="page"],
html body .sidebar-recent-session[aria-selected="true"]{
  color:var(--oc-recent-text)!important;
  -webkit-text-fill-color:var(--oc-recent-text)!important;
  text-shadow:none!important;
  filter:none!important;
}
html body .sidebar-recent-session{
  background:var(--oc-recent-idle-bg)!important;
  border:1px solid rgba(47,132,80,.08)!important;
}
html body .sidebar-recent-session:hover,
html body .sidebar-recent-session:focus-visible{
  background:var(--oc-recent-hover-bg)!important;
  border-color:rgba(47,132,80,.16)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.7)!important;
}
html body .sidebar-recent-session.sidebar-recent-session--active,
html body .sidebar-recent-session[aria-current="page"],
html body .sidebar-recent-session[aria-selected="true"]{
  background:var(--oc-recent-active-bg)!important;
  border-color:rgba(47,132,80,.24)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.58),0 4px 12px rgba(28,94,50,.06)!important;
}
html body .sidebar-recent-session *,
html body .sidebar-recent-session:hover *,
html body .sidebar-recent-session:focus-visible *,
html body .sidebar-recent-session.sidebar-recent-session--active *,
html body .sidebar-recent-session[aria-current="page"] *,
html body .sidebar-recent-session[aria-selected="true"] *{
  color:inherit!important;
  -webkit-text-fill-color:currentColor!important;
  text-shadow:none!important;
  filter:none!important;
}
html body .sidebar-recent-session__name,
html body .sidebar-recent-session:hover .sidebar-recent-session__name,
html body .sidebar-recent-session.sidebar-recent-session--active .sidebar-recent-session__name,
html body .sidebar-recent-session[aria-current="page"] .sidebar-recent-session__name,
html body .sidebar-recent-session[aria-selected="true"] .sidebar-recent-session__name{
  color:var(--oc-recent-ink)!important;
  -webkit-text-fill-color:var(--oc-recent-ink)!important;
  font-weight:650!important;
}
html body .sidebar-recent-session__meta,
html body .sidebar-recent-session:hover .sidebar-recent-session__meta,
html body .sidebar-recent-session.sidebar-recent-session--active .sidebar-recent-session__meta,
html body .sidebar-recent-session[aria-current="page"] .sidebar-recent-session__meta,
html body .sidebar-recent-session[aria-selected="true"] .sidebar-recent-session__meta{
  color:var(--oc-recent-muted)!important;
  -webkit-text-fill-color:var(--oc-recent-muted)!important;
  font-weight:520!important;
}
html body .sidebar-recent-session__live{
  color:#f8fff9!important;
  -webkit-text-fill-color:#f8fff9!important;
}

/* OpenClaw Control UI — sent message bubble light green gradient 2026-06-13 09:56
   Feedback: user/sent bubbles were too dark. Use a light mint gradient with dark readable text.
*/
html body .chat-bubble--user,
html body .chat-message--user .chat-bubble,
html body .chat-group.user .chat-bubble,
html body section.card.chat .chat-group.user .chat-bubble,
html body .card.chat .chat-group.user .chat-bubble{
  background:
    linear-gradient(135deg,rgba(183,244,200,.94) 0%,rgba(128,218,161,.86) 48%,rgba(232,255,240,.92) 100%)!important;
  color:#12311e!important;
  -webkit-text-fill-color:#12311e!important;
  border:1px solid rgba(47,132,80,.24)!important;
  box-shadow:0 6px 18px rgba(28,94,50,.10),inset 0 1px rgba(255,255,255,.72)!important;
}
html body .chat-bubble--user *,
html body .chat-message--user .chat-bubble *,
html body .chat-group.user .chat-bubble *,
html body section.card.chat .chat-group.user .chat-bubble *,
html body .card.chat .chat-group.user .chat-bubble *{
  color:inherit!important;
  -webkit-text-fill-color:currentColor!important;
  text-shadow:none!important;
}

/* OpenClaw Control UI — composer buttons detached floating row 2026-06-13 09:59
   Feedback: toolbar buttons and input were visually enclosed together. Split them:
   input is one clean card; toolbar is a separate floating row of independent pill buttons.
*/
html body .card.chat .agent-chat__input,
html body section.card.chat .agent-chat__input,
html body .agent-chat__input{
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  outline:0!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html body .card.chat .agent-chat__input::before,
html body .card.chat .agent-chat__input::after,
html body section.card.chat .agent-chat__input::before,
html body section.card.chat .agent-chat__input::after,
html body .agent-chat__input::before,
html body .agent-chat__input::after{
  content:none!important;
  display:none!important;
  animation:none!important;
}
html body .card.chat .agent-chat__input:focus-within,
html body section.card.chat .agent-chat__input:focus-within,
html body .agent-chat__input:focus-within{
  animation:none!important;
  background:transparent!important;
  box-shadow:none!important;
}
html body .card.chat .agent-chat__toolbar,
html body section.card.chat .agent-chat__toolbar,
html body .agent-chat__toolbar,
html body .agent-chat__input > .agent-chat__toolbar{
  order:1!important;
  align-self:flex-end!important;
  width:auto!important;
  max-width:100%!important;
  margin:0 10px 0 0!important;
  padding:0!important;
  gap:8px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  outline:0!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html body .agent-chat__toolbar::before,
html body .agent-chat__toolbar::after,
html body .agent-chat__toolbar-left::before,
html body .agent-chat__toolbar-left::after,
html body .agent-chat__toolbar-right::before,
html body .agent-chat__toolbar-right::after{
  content:none!important;
  display:none!important;
}
html body .agent-chat__toolbar-left,
html body .agent-chat__toolbar-right{
  gap:8px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
}
html body .card.chat .agent-chat__composer-combobox,
html body section.card.chat .agent-chat__composer-combobox,
html body .agent-chat__composer-combobox,
html body .agent-chat__input > .agent-chat__composer-combobox{
  order:2!important;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(244,255,248,.82))!important;
  border:1px solid rgba(47,132,80,.18)!important;
  border-radius:22px!important;
  padding:10px 12px!important;
  box-shadow:0 10px 26px rgba(28,94,50,.08),inset 0 1px rgba(255,255,255,.9)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html body .card.chat .agent-chat__composer-combobox:focus-within,
html body section.card.chat .agent-chat__composer-combobox:focus-within,
html body .agent-chat__composer-combobox:focus-within{
  border-color:rgba(47,132,80,.34)!important;
  box-shadow:0 0 0 4px rgba(111,189,141,.14),0 12px 28px rgba(28,94,50,.10),inset 0 1px rgba(255,255,255,.94)!important;
}
html body .card.chat .agent-chat__toolbar .agent-chat__input-btn,
html body section.card.chat .agent-chat__toolbar .agent-chat__input-btn,
html body .agent-chat__toolbar .agent-chat__input-btn,
html body .card.chat .agent-chat__toolbar .btn,
html body section.card.chat .agent-chat__toolbar .btn,
html body .agent-chat__toolbar .btn,
html body .card.chat .agent-chat__toolbar .chat-send-btn,
html body section.card.chat .agent-chat__toolbar .chat-send-btn,
html body .agent-chat__toolbar .chat-send-btn{
  min-width:36px!important;
  min-height:36px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(228,248,236,.88))!important;
  color:#2d7f4d!important;
  -webkit-text-fill-color:#2d7f4d!important;
  border:1px solid rgba(47,132,80,.18)!important;
  box-shadow:0 8px 18px rgba(28,94,50,.10),inset 0 1px rgba(255,255,255,.94)!important;
  transform:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html body .card.chat .agent-chat__toolbar .chat-send-btn,
html body section.card.chat .agent-chat__toolbar .chat-send-btn,
html body .agent-chat__toolbar .chat-send-btn{
  background:linear-gradient(135deg,#b8f4c8 0%,#7edaa1 56%,#e8fff0 100%)!important;
  color:#12311e!important;
  -webkit-text-fill-color:#12311e!important;
  border-color:rgba(47,132,80,.26)!important;
  box-shadow:0 10px 22px rgba(28,94,50,.14),inset 0 1px rgba(255,255,255,.78)!important;
}
html body .card.chat .agent-chat__toolbar .agent-chat__input-btn:hover,
html body section.card.chat .agent-chat__toolbar .agent-chat__input-btn:hover,
html body .agent-chat__toolbar .agent-chat__input-btn:hover,
html body .card.chat .agent-chat__toolbar .btn:hover,
html body section.card.chat .agent-chat__toolbar .btn:hover,
html body .agent-chat__toolbar .btn:hover,
html body .card.chat .agent-chat__toolbar .chat-send-btn:hover,
html body section.card.chat .agent-chat__toolbar .chat-send-btn:hover,
html body .agent-chat__toolbar .chat-send-btn:hover{
  background:linear-gradient(180deg,#ffffff,#dff7e8)!important;
  border-color:rgba(47,132,80,.30)!important;
  box-shadow:0 12px 24px rgba(28,94,50,.13),inset 0 1px rgba(255,255,255,.96)!important;
  transform:translateY(-1px)!important;
}
html body .card.chat .agent-chat__toolbar .chat-send-btn:hover,
html body section.card.chat .agent-chat__toolbar .chat-send-btn:hover,
html body .agent-chat__toolbar .chat-send-btn:hover{
  background:linear-gradient(135deg,#c8ffd6 0%,#8be4ad 56%,#f2fff6 100%)!important;
}
@media (max-width:720px){
  html body .card.chat .agent-chat__toolbar,
  html body section.card.chat .agent-chat__toolbar,
  html body .agent-chat__toolbar,
  html body .agent-chat__input > .agent-chat__toolbar{
    align-self:flex-start!important;
    margin:0 0 0 4px!important;
    flex-wrap:wrap!important;
  }
}

/* OpenClaw Control UI — composer stable action slot 2026-06-13 10:05
   Fix: thinking/busy indicator appears/disappears and makes the right action buttons jump.
   Reserve one fixed status slot before the right action group so the final buttons keep a stable x-position.
*/
html body .agent-chat__toolbar{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 34px max-content!important;
  align-items:center!important;
  column-gap:8px!important;
}
html body .agent-chat__toolbar-left{
  grid-column:1!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
}
html body .agent-chat__toolbar-right{
  grid-column:3!important;
  justify-self:end!important;
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  min-width:max-content!important;
  transform:translateZ(0)!important;
}
/* Permanent invisible slot. When a real thinking spinner/status is rendered nearby, this still prevents reflow. */
html body .agent-chat__toolbar::after{
  content:""!important;
  grid-column:2!important;
  width:34px!important;
  height:32px!important;
  display:block!important;
  pointer-events:none!important;
}
/* If the app renders a compact busy/thinking/progress element in the toolbar, place it into the reserved slot. */
html body .agent-chat__toolbar > :is(.agent-chat__busy,.agent-chat__thinking,.agent-chat__spinner,.agent-chat__progress,.thinking,.spinner,[class*="thinking"],[class*="spinner"]){
  grid-column:2!important;
  justify-self:center!important;
  align-self:center!important;
  width:34px!important;
  min-width:34px!important;
  max-width:34px!important;
  overflow:hidden!important;
}
/* Keep the three right-side controls visually locked to equal button geometry. */
html body .agent-chat__toolbar-right > .btn,
html body .agent-chat__toolbar-right > .agent-chat__input-btn,
html body .agent-chat__toolbar-right > .chat-send-btn{
  flex:0 0 34px!important;
  width:34px!important;
  min-width:34px!important;
  max-width:34px!important;
}
@media (max-width:760px){
  html body .agent-chat__toolbar{
    grid-template-columns:minmax(0,1fr) 30px max-content!important;
    column-gap:6px!important;
  }
  html body .agent-chat__toolbar::after,
  html body .agent-chat__toolbar > :is(.agent-chat__busy,.agent-chat__thinking,.agent-chat__spinner,.agent-chat__progress,.thinking,.spinner,[class*="thinking"],[class*="spinner"]){
    width:30px!important;
    min-width:30px!important;
    max-width:30px!important;
  }
}

/* OpenClaw Control UI — composer action unsquash 2026-06-13 10:09
   Correction: reserve a thinking/status slot, but do NOT force the right action buttons into 34px.
   The right action group should keep its natural button geometry and never look squeezed.
*/
html body .agent-chat__toolbar{
  grid-template-columns:minmax(0,1fr) 34px max-content!important;
}
html body .agent-chat__toolbar-right{
  min-width:max-content!important;
  width:max-content!important;
  flex:0 0 auto!important;
}
html body .agent-chat__toolbar-right > .btn,
html body .agent-chat__toolbar-right > .agent-chat__input-btn,
html body .agent-chat__toolbar-right > .chat-send-btn{
  flex:0 0 auto!important;
  width:auto!important;
  max-width:none!important;
  min-width:38px!important;
  inline-size:auto!important;
  min-inline-size:38px!important;
  max-inline-size:none!important;
  aspect-ratio:auto!important;
  white-space:nowrap!important;
}
html body .agent-chat__toolbar-right > .chat-send-btn{
  min-width:42px!important;
  min-inline-size:42px!important;
}
@media (max-width:760px){
  html body .agent-chat__toolbar-right > .btn,
  html body .agent-chat__toolbar-right > .agent-chat__input-btn,
  html body .agent-chat__toolbar-right > .chat-send-btn{
    min-width:36px!important;
    min-inline-size:36px!important;
  }
  html body .agent-chat__toolbar-right > .chat-send-btn{
    min-width:40px!important;
    min-inline-size:40px!important;
  }
}

/* OpenClaw Control UI — composer real DOM status slot 2026-06-13 10:14
   Real fix: insert a permanent DOM slot before the right action buttons. It reserves the
   thinking indicator position without relying on pseudo-elements and without squeezing buttons.
*/
html body .agent-chat__toolbar{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
}
html body .agent-chat__toolbar::after{
  content:none!important;
  display:none!important;
}
html body .agent-chat__toolbar-right{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  width:max-content!important;
  min-width:max-content!important;
}
html body .agent-chat__toolbar-status-slot{
  display:inline-flex!important;
  flex:0 0 34px!important;
  width:34px!important;
  min-width:34px!important;
  max-width:34px!important;
  height:34px!important;
  align-items:center!important;
  justify-content:center!important;
  pointer-events:none!important;
  visibility:hidden!important;
}
html body .agent-chat__toolbar-right > .btn,
html body .agent-chat__toolbar-right > .agent-chat__input-btn,
html body .agent-chat__toolbar-right > .chat-send-btn{
  flex:0 0 auto!important;
  width:auto!important;
  max-width:none!important;
  min-width:38px!important;
  inline-size:auto!important;
  min-inline-size:38px!important;
  max-inline-size:none!important;
  white-space:nowrap!important;
}
html body .agent-chat__toolbar-right > .chat-send-btn{
  min-width:42px!important;
  min-inline-size:42px!important;
}
@media (max-width:760px){
  html body .agent-chat__toolbar-status-slot{
    flex-basis:30px!important;
    width:30px!important;
    min-width:30px!important;
    max-width:30px!important;
  }
}

/* OpenClaw Control UI — run status uses reserved slot 2026-06-13 10:18
   The real thinking circle is `.agent-chat__run-status` from OO(o). It is now rendered inside
   `.agent-chat__toolbar-status-slot`, not in the left toolbar, so it cannot push the buttons.
*/
html body .agent-chat__toolbar-status-slot{
  visibility:visible!important;
  overflow:hidden!important;
}
html body .agent-chat__toolbar-status-slot:empty{
  visibility:hidden!important;
}
html body .agent-chat__toolbar-status-slot .agent-chat__run-status{
  display:inline-flex!important;
  width:34px!important;
  min-width:34px!important;
  max-width:34px!important;
  height:34px!important;
  padding:0!important;
  margin:0!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  overflow:hidden!important;
}
html body .agent-chat__toolbar-status-slot .agent-chat__run-status-label{
  display:none!important;
}
html body .agent-chat__toolbar-status-slot .agent-chat__run-status svg{
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
}
@media (max-width:760px){
  html body .agent-chat__toolbar-status-slot .agent-chat__run-status{
    width:30px!important;
    min-width:30px!important;
    max-width:30px!important;
    height:30px!important;
  }
}

/* OpenClaw Control UI — restore right action button shape 2026-06-13 10:21
   Keep run-status in the reserved slot, but restore the three right-side actions to normal pill buttons.
   They should not look flattened, squeezed, or forced into tiny square icons.
*/
html body .agent-chat__toolbar-right{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  width:max-content!important;
  min-width:max-content!important;
  flex:0 0 auto!important;
}
html body .agent-chat__toolbar-right > .btn,
html body .agent-chat__toolbar-right > .agent-chat__input-btn,
html body .agent-chat__toolbar-right > .chat-send-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  flex:0 0 auto!important;
  width:auto!important;
  inline-size:auto!important;
  max-width:none!important;
  max-inline-size:none!important;
  min-width:44px!important;
  min-inline-size:44px!important;
  height:38px!important;
  min-height:38px!important;
  max-height:38px!important;
  padding:0 13px!important;
  border-radius:14px!important;
  aspect-ratio:auto!important;
  white-space:nowrap!important;
  line-height:1!important;
}
html body .agent-chat__toolbar-right > .chat-send-btn{
  min-width:48px!important;
  min-inline-size:48px!important;
  padding:0 15px!important;
  border-radius:15px!important;
}
html body .agent-chat__toolbar-right .agent-chat__control-label{
  display:inline-block!important;
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  height:auto!important;
  overflow:visible!important;
  clip:auto!important;
  clip-path:none!important;
  position:static!important;
  white-space:nowrap!important;
  opacity:1!important;
  font-size:12px!important;
  font-weight:640!important;
  line-height:1!important;
}
html body .agent-chat__toolbar-right > .btn svg,
html body .agent-chat__toolbar-right > .agent-chat__input-btn svg,
html body .agent-chat__toolbar-right > .chat-send-btn svg{
  width:16px!important;
  height:16px!important;
  flex:0 0 16px!important;
}
@media (max-width:760px){
  html body .agent-chat__toolbar-right{
    gap:6px!important;
  }
  html body .agent-chat__toolbar-right > .btn,
  html body .agent-chat__toolbar-right > .agent-chat__input-btn,
  html body .agent-chat__toolbar-right > .chat-send-btn{
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
    min-width:40px!important;
    min-inline-size:40px!important;
    padding:0 10px!important;
  }
  html body .agent-chat__toolbar-right .agent-chat__control-label{
    display:none!important;
  }
}

/* OpenClaw Control UI — composer button proportion unify 2026-06-13 10:24
   Feedback: right action buttons should match the left toolbar button scale/proportion.
   Keep the real run-status slot, but make both sides use the same 36px icon-button system.
*/
html body .agent-chat__toolbar{
  gap:8px!important;
}
html body .agent-chat__toolbar-left,
html body .agent-chat__toolbar-right{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}
html body .agent-chat__toolbar-status-slot{
  flex:0 0 36px!important;
  width:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  height:36px!important;
}
html body .agent-chat__toolbar-status-slot .agent-chat__run-status{
  width:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  height:36px!important;
}
html body .agent-chat__toolbar-left > .btn,
html body .agent-chat__toolbar-left > .agent-chat__input-btn,
html body .agent-chat__toolbar-left > .chat-send-btn,
html body .agent-chat__toolbar-right > .btn,
html body .agent-chat__toolbar-right > .agent-chat__input-btn,
html body .agent-chat__toolbar-right > .chat-send-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  flex:0 0 36px!important;
  width:36px!important;
  inline-size:36px!important;
  min-width:36px!important;
  min-inline-size:36px!important;
  max-width:36px!important;
  max-inline-size:36px!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  padding:0!important;
  border-radius:999px!important;
  aspect-ratio:1 / 1!important;
  line-height:1!important;
  white-space:nowrap!important;
}
html body .agent-chat__toolbar-left .agent-chat__control-label,
html body .agent-chat__toolbar-right .agent-chat__control-label{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  border:0!important;
  opacity:0!important;
}
html body .agent-chat__toolbar-left > .btn svg,
html body .agent-chat__toolbar-left > .agent-chat__input-btn svg,
html body .agent-chat__toolbar-left > .chat-send-btn svg,
html body .agent-chat__toolbar-right > .btn svg,
html body .agent-chat__toolbar-right > .agent-chat__input-btn svg,
html body .agent-chat__toolbar-right > .chat-send-btn svg{
  width:17px!important;
  height:17px!important;
  flex:0 0 17px!important;
}
/* Send button can keep accent color, not a different size. */
html body .agent-chat__toolbar-right > .chat-send-btn{
  flex-basis:36px!important;
  width:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  padding:0!important;
}
@media (max-width:760px){
  html body .agent-chat__toolbar-left,
  html body .agent-chat__toolbar-right{
    gap:6px!important;
  }
  html body .agent-chat__toolbar-status-slot,
  html body .agent-chat__toolbar-status-slot .agent-chat__run-status,
  html body .agent-chat__toolbar-left > .btn,
  html body .agent-chat__toolbar-left > .agent-chat__input-btn,
  html body .agent-chat__toolbar-left > .chat-send-btn,
  html body .agent-chat__toolbar-right > .btn,
  html body .agent-chat__toolbar-right > .agent-chat__input-btn,
  html body .agent-chat__toolbar-right > .chat-send-btn{
    flex-basis:34px!important;
    width:34px!important;
    min-width:34px!important;
    max-width:34px!important;
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
  }
}

/* OpenClaw Control UI — composer toolbar centered to input 2026-06-13 10:26
   Feedback: the six composer buttons are biased left. Center the full toolbar button cluster
   against the input/composer width, while keeping the real run-status slot and equal 36px buttons.
*/
html body .card.chat .agent-chat__toolbar,
html body section.card.chat .agent-chat__toolbar,
html body .agent-chat__toolbar,
html body .agent-chat__input > .agent-chat__toolbar{
  align-self:stretch!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:0 12px!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
}
html body .agent-chat__toolbar-left,
html body .agent-chat__toolbar-right{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:max-content!important;
}
html body .agent-chat__toolbar-left{
  justify-content:flex-end!important;
}
html body .agent-chat__toolbar-right{
  justify-content:flex-start!important;
}
/* Keep the reserved thinking slot as part of the centered cluster, not as an outer spacer. */
html body .agent-chat__toolbar-status-slot{
  margin:0!important;
}
@media (max-width:720px){
  html body .card.chat .agent-chat__toolbar,
  html body section.card.chat .agent-chat__toolbar,
  html body .agent-chat__toolbar,
  html body .agent-chat__input > .agent-chat__toolbar{
    align-self:stretch!important;
    justify-content:center!important;
    margin:0!important;
    padding:0 8px!important;
    flex-wrap:nowrap!important;
  }
}

/* OpenClaw Control UI — recent sessions typography polish 2026-06-13 10:40
   Feedback: recent-session text looked hazy/ghosted. Make it crisp and delicate:
   no shadow/filter/glow, lighter weights, stable line-height, subtle colors, native font smoothing.
*/
html body .sidebar-recent-sessions,
html body .sidebar-recent-sessions *,
html body .sidebar-recent-session,
html body .sidebar-recent-session *{
  text-shadow:none!important;
  filter:none!important;
  -webkit-font-smoothing:antialiased!important;
  -moz-osx-font-smoothing:grayscale!important;
  text-rendering:geometricPrecision!important;
}
html body .sidebar-recent-sessions__label{
  color:#667a6d!important;
  font-size:10.5px!important;
  font-weight:640!important;
  letter-spacing:.055em!important;
  line-height:1.2!important;
  opacity:1!important;
}
html body .sidebar-recent-session{
  min-height:42px!important;
  padding:7px 9px!important;
  border-radius:13px!important;
  background:transparent!important;
  box-shadow:none!important;
}
html body .sidebar-recent-session:hover{
  background:rgba(47,132,80,.058)!important;
  box-shadow:none!important;
}
html body .sidebar-recent-session.sidebar-recent-session--active,
html body .sidebar-recent-session[aria-current="page"],
html body .sidebar-recent-session[aria-selected="true"]{
  background:rgba(47,132,80,.105)!important;
  box-shadow:inset 0 0 0 1px rgba(47,132,80,.12)!important;
}
html body .sidebar-recent-session__body{
  gap:2px!important;
  min-width:0!important;
}
html body .sidebar-recent-session__name,
html body .sidebar-recent-session:hover .sidebar-recent-session__name,
html body .sidebar-recent-session.sidebar-recent-session--active .sidebar-recent-session__name,
html body .sidebar-recent-session[aria-current="page"] .sidebar-recent-session__name,
html body .sidebar-recent-session[aria-selected="true"] .sidebar-recent-session__name{
  color:#213d2c!important;
  font-size:13px!important;
  font-weight:520!important;
  line-height:1.25!important;
  letter-spacing:-.008em!important;
  opacity:1!important;
}
html body .sidebar-recent-session.sidebar-recent-session--active .sidebar-recent-session__name,
html body .sidebar-recent-session[aria-current="page"] .sidebar-recent-session__name,
html body .sidebar-recent-session[aria-selected="true"] .sidebar-recent-session__name{
  font-weight:590!important;
  color:#173421!important;
}
html body .sidebar-recent-session__meta,
html body .sidebar-recent-session:hover .sidebar-recent-session__meta,
html body .sidebar-recent-session.sidebar-recent-session--active .sidebar-recent-session__meta,
html body .sidebar-recent-session[aria-current="page"] .sidebar-recent-session__meta,
html body .sidebar-recent-session[aria-selected="true"] .sidebar-recent-session__meta{
  color:#657a6d!important;
  font-size:11.25px!important;
  font-weight:450!important;
  line-height:1.18!important;
  letter-spacing:0!important;
  opacity:.96!important;
}
html body .sidebar-recent-session__dot{
  width:6px!important;
  height:6px!important;
  min-width:6px!important;
  box-shadow:none!important;
  opacity:.72!important;
}
html body .sidebar-recent-session.sidebar-recent-session--active .sidebar-recent-session__dot,
html body .sidebar-recent-session[aria-current="page"] .sidebar-recent-session__dot,
html body .sidebar-recent-session[aria-selected="true"] .sidebar-recent-session__dot{
  opacity:.92!important;
}

/* OpenClaw Control UI — recent sessions crisp text correction 2026-06-13 10:44
   The previous typography polish still looked blurry on Chromium/Linux because of fractional
   font sizes/line-height, opacity blending, geometricPrecision, and grayscale smoothing.
   Use pixel-aligned integer metrics and browser-native subpixel rendering instead.
*/
html body .sidebar-recent-sessions,
html body .sidebar-recent-sessions *,
html body .sidebar-recent-session,
html body .sidebar-recent-session *{
  text-shadow:none!important;
  filter:none!important;
  opacity:1!important;
  transform:none!important;
  will-change:auto!important;
  backface-visibility:visible!important;
  perspective:none!important;
  -webkit-font-smoothing:auto!important;
  -moz-osx-font-smoothing:auto!important;
  text-rendering:auto!important;
  font-synthesis:none!important;
}
html body .sidebar-recent-sessions__label{
  color:#526858!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:11px!important;
  font-weight:600!important;
  line-height:14px!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
}
html body .sidebar-recent-session{
  min-height:44px!important;
  padding:7px 9px!important;
  border-radius:12px!important;
}
html body .sidebar-recent-session__body{
  gap:1px!important;
  min-width:0!important;
}
html body .sidebar-recent-session__name,
html body .sidebar-recent-session:hover .sidebar-recent-session__name,
html body .sidebar-recent-session.sidebar-recent-session--active .sidebar-recent-session__name,
html body .sidebar-recent-session[aria-current="page"] .sidebar-recent-session__name,
html body .sidebar-recent-session[aria-selected="true"] .sidebar-recent-session__name{
  color:#183625!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:13px!important;
  font-weight:500!important;
  line-height:16px!important;
  letter-spacing:0!important;
  opacity:1!important;
}
html body .sidebar-recent-session.sidebar-recent-session--active .sidebar-recent-session__name,
html body .sidebar-recent-session[aria-current="page"] .sidebar-recent-session__name,
html body .sidebar-recent-session[aria-selected="true"] .sidebar-recent-session__name{
  color:#102d1d!important;
  font-weight:600!important;
}
html body .sidebar-recent-session__meta,
html body .sidebar-recent-session:hover .sidebar-recent-session__meta,
html body .sidebar-recent-session.sidebar-recent-session--active .sidebar-recent-session__meta,
html body .sidebar-recent-session[aria-current="page"] .sidebar-recent-session__meta,
html body .sidebar-recent-session[aria-selected="true"] .sidebar-recent-session__meta{
  color:#4f6558!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:11px!important;
  font-weight:400!important;
  line-height:14px!important;
  letter-spacing:0!important;
  opacity:1!important;
}
/* Avoid translucent backgrounds directly under small text; blending can look like ghosting. */
html body .sidebar-recent-session:hover{
  background:#e7f3eb!important;
  box-shadow:none!important;
}
html body .sidebar-recent-session.sidebar-recent-session--active,
html body .sidebar-recent-session[aria-current="page"],
html body .sidebar-recent-session[aria-selected="true"]{
  background:#dceee3!important;
  box-shadow:inset 0 0 0 1px rgba(48,117,70,.16)!important;
}
html body .sidebar-recent-session__dot{
  width:6px!important;
  height:6px!important;
  min-width:6px!important;
  background:#328353!important;
  box-shadow:none!important;
  opacity:1!important;
}

/* OpenClaw Control UI — recent sessions specificity hard fix 2026-06-13 10:47
   Visual/computed audit found the old generic selector `.sidebar [class*="recent"]`
   still winning for some rows: white translucent text + text-shadow. Use higher-specificity
   exact selectors so every recent-session row is crisp dark text, not ghosted white.
*/
html body .shell-nav .sidebar-recent-sessions,
html body .shell-nav .sidebar-recent-sessions *,
html body .shell-nav .sidebar-recent-session,
html body .shell-nav .sidebar-recent-session *,
html body .sidebar-sessions .sidebar-recent-sessions,
html body .sidebar-sessions .sidebar-recent-sessions *,
html body .sidebar-sessions .sidebar-recent-session,
html body .sidebar-sessions .sidebar-recent-session *{
  text-shadow:none!important;
  filter:none!important;
  opacity:1!important;
  color:inherit!important;
  -webkit-font-smoothing:auto!important;
  -moz-osx-font-smoothing:auto!important;
  text-rendering:auto!important;
}
html body .shell-nav .sidebar-recent-sessions .sidebar-recent-sessions__label,
html body .sidebar-sessions .sidebar-recent-sessions .sidebar-recent-sessions__label{
  color:#526858!important;
  text-shadow:none!important;
  font-size:11px!important;
  font-weight:600!important;
  line-height:14px!important;
  letter-spacing:.04em!important;
}
html body .shell-nav .sidebar-recent-session .sidebar-recent-session__name,
html body .shell-nav .sidebar-recent-session:link .sidebar-recent-session__name,
html body .shell-nav .sidebar-recent-session:visited .sidebar-recent-session__name,
html body .shell-nav .sidebar-recent-session:hover .sidebar-recent-session__name,
html body .shell-nav .sidebar-recent-session:focus .sidebar-recent-session__name,
html body .shell-nav .sidebar-recent-session:active .sidebar-recent-session__name,
html body .sidebar-sessions .sidebar-recent-session .sidebar-recent-session__name,
html body .sidebar-sessions .sidebar-recent-session:link .sidebar-recent-session__name,
html body .sidebar-sessions .sidebar-recent-session:visited .sidebar-recent-session__name,
html body .sidebar-sessions .sidebar-recent-session:hover .sidebar-recent-session__name,
html body .sidebar-sessions .sidebar-recent-session:focus .sidebar-recent-session__name,
html body .sidebar-sessions .sidebar-recent-session:active .sidebar-recent-session__name{
  color:#183625!important;
  text-shadow:none!important;
  font-size:13px!important;
  font-weight:500!important;
  line-height:16px!important;
  letter-spacing:0!important;
}
html body .shell-nav .sidebar-recent-session.sidebar-recent-session--active .sidebar-recent-session__name,
html body .shell-nav .sidebar-recent-session[aria-current="page"] .sidebar-recent-session__name,
html body .shell-nav .sidebar-recent-session[aria-selected="true"] .sidebar-recent-session__name,
html body .sidebar-sessions .sidebar-recent-session.sidebar-recent-session--active .sidebar-recent-session__name,
html body .sidebar-sessions .sidebar-recent-session[aria-current="page"] .sidebar-recent-session__name,
html body .sidebar-sessions .sidebar-recent-session[aria-selected="true"] .sidebar-recent-session__name{
  color:#102d1d!important;
  text-shadow:none!important;
  font-weight:600!important;
}
html body .shell-nav .sidebar-recent-session .sidebar-recent-session__meta,
html body .shell-nav .sidebar-recent-session:link .sidebar-recent-session__meta,
html body .shell-nav .sidebar-recent-session:visited .sidebar-recent-session__meta,
html body .shell-nav .sidebar-recent-session:hover .sidebar-recent-session__meta,
html body .shell-nav .sidebar-recent-session:focus .sidebar-recent-session__meta,
html body .shell-nav .sidebar-recent-session:active .sidebar-recent-session__meta,
html body .sidebar-sessions .sidebar-recent-session .sidebar-recent-session__meta,
html body .sidebar-sessions .sidebar-recent-session:link .sidebar-recent-session__meta,
html body .sidebar-sessions .sidebar-recent-session:visited .sidebar-recent-session__meta,
html body .sidebar-sessions .sidebar-recent-session:hover .sidebar-recent-session__meta,
html body .sidebar-sessions .sidebar-recent-session:focus .sidebar-recent-session__meta,
html body .sidebar-sessions .sidebar-recent-session:active .sidebar-recent-session__meta{
  color:#4f6558!important;
  text-shadow:none!important;
  font-size:11px!important;
  font-weight:400!important;
  line-height:14px!important;
  letter-spacing:0!important;
}

/* OpenClaw Control UI — recent sessions visual-model tune 2026-06-13 10:51
   Vision audit: readable now, but meta text still slightly soft and active title too heavy.
   Tune contrast/weight/layering without reintroducing shadows or blur.
*/
html body .shell-nav .sidebar-recent-session .sidebar-recent-session__meta,
html body .shell-nav .sidebar-recent-session:link .sidebar-recent-session__meta,
html body .shell-nav .sidebar-recent-session:visited .sidebar-recent-session__meta,
html body .shell-nav .sidebar-recent-session:hover .sidebar-recent-session__meta,
html body .shell-nav .sidebar-recent-session:focus .sidebar-recent-session__meta,
html body .shell-nav .sidebar-recent-session:active .sidebar-recent-session__meta,
html body .sidebar-sessions .sidebar-recent-session .sidebar-recent-session__meta,
html body .sidebar-sessions .sidebar-recent-session:link .sidebar-recent-session__meta,
html body .sidebar-sessions .sidebar-recent-session:visited .sidebar-recent-session__meta,
html body .sidebar-sessions .sidebar-recent-session:hover .sidebar-recent-session__meta,
html body .sidebar-sessions .sidebar-recent-session:focus .sidebar-recent-session__meta,
html body .sidebar-sessions .sidebar-recent-session:active .sidebar-recent-session__meta{
  color:#455d4f!important;
  font-weight:450!important;
  text-shadow:none!important;
}
html body .shell-nav .sidebar-recent-session.sidebar-recent-session--active .sidebar-recent-session__name,
html body .shell-nav .sidebar-recent-session[aria-current="page"] .sidebar-recent-session__name,
html body .shell-nav .sidebar-recent-session[aria-selected="true"] .sidebar-recent-session__name,
html body .sidebar-sessions .sidebar-recent-session.sidebar-recent-session--active .sidebar-recent-session__name,
html body .sidebar-sessions .sidebar-recent-session[aria-current="page"] .sidebar-recent-session__name,
html body .sidebar-sessions .sidebar-recent-session[aria-selected="true"] .sidebar-recent-session__name{
  color:#173421!important;
  font-weight:560!important;
  text-shadow:none!important;
}
html body .shell-nav .sidebar-recent-session.sidebar-recent-session--active,
html body .shell-nav .sidebar-recent-session[aria-current="page"],
html body .shell-nav .sidebar-recent-session[aria-selected="true"],
html body .sidebar-sessions .sidebar-recent-session.sidebar-recent-session--active,
html body .sidebar-sessions .sidebar-recent-session[aria-current="page"],
html body .sidebar-sessions .sidebar-recent-session[aria-selected="true"]{
  background:#e2f0e6!important;
  border-color:rgba(44,112,67,.24)!important;
  box-shadow:inset 0 0 0 1px rgba(44,112,67,.18)!important;
}

/* OpenClaw Control UI — visual audit warn cleanup 2026-06-13 11:14
   Batch visual audit found two real readability warnings:
   1) sidebar brand eyebrow at 10px; 2) chat timestamps at opacity .7.
   Make both readable with concrete color/metrics instead of transparency.
*/
html body .shell-nav .sidebar-brand__eyebrow,
html body .sidebar-brand__eyebrow{
  color:#526858!important;
  font-size:11px!important;
  line-height:14px!important;
  font-weight:650!important;
  letter-spacing:.055em!important;
  opacity:1!important;
  text-shadow:none!important;
}
html body .chat-group-timestamp,
html body time.chat-group-timestamp{
  color:#5d6f64!important;
  opacity:1!important;
  text-shadow:none!important;
  filter:none!important;
  font-size:12px!important;
  line-height:16px!important;
  font-weight:450!important;
}

/* OpenClaw Control UI — vision fix pass: chat clarity + recent identity 2026-06-13 11:42
   Vision review found two FIX items:
   1) chat-card decorative pattern/overlays compete with content;
   2) recent-session names are over-truncated and hard to distinguish.
   Prioritize content clarity, 120Hz performance, and readable identity over decoration.
*/
html body section.card.chat,
html body .card.chat{
  background:linear-gradient(180deg,#fbfffc 0%,#f4fbf6 100%)!important;
  background-color:#f8fff9!important;
  background-image:linear-gradient(180deg,#fbfffc 0%,#f4fbf6 100%)!important;
  box-shadow:0 8px 22px rgba(15,61,37,.08)!important;
  overflow:hidden!important;
}
html body section.card.chat::before,
html body section.card.chat::after,
html body .card.chat::before,
html body .card.chat::after{
  content:none!important;
  display:none!important;
  opacity:0!important;
  background:none!important;
  animation:none!important;
}
html body section.card.chat .chat-bubble,
html body .card.chat .chat-bubble{
  background:#fff!important;
  background-image:none!important;
  box-shadow:0 1px 2px rgba(15,61,37,.06),0 7px 18px rgba(15,61,37,.07)!important;
}
html body section.card.chat .chat-bubble::before,
html body section.card.chat .chat-bubble::after,
html body .card.chat .chat-bubble::before,
html body .card.chat .chat-bubble::after{
  content:none!important;
  display:none!important;
  opacity:0!important;
  background:none!important;
  animation:none!important;
}
html body section.card.chat .chat-message-meta,
html body .card.chat .chat-message-meta,
html body section.card.chat .message-meta,
html body .card.chat .message-meta{
  color:#66786d!important;
  opacity:1!important;
  text-shadow:none!important;
}
html body section.card.chat table,
html body .card.chat table{
  background:#fff!important;
  border-color:rgba(42,108,63,.16)!important;
}
html body section.card.chat th,
html body .card.chat th{
  background:#eef8f1!important;
  color:#244332!important;
  font-weight:650!important;
}
html body section.card.chat td,
html body .card.chat td{
  color:#243b2e!important;
}

/* Recent-session identity: allow two crisp lines for the primary label so similar
   sessions are distinguishable without adding animation or heavy effects. */
html body .shell-nav .sidebar-recent-session,
html body .sidebar-sessions .sidebar-recent-session{
  min-height:56px!important;
  align-items:flex-start!important;
  padding-top:8px!important;
  padding-bottom:8px!important;
}
html body .shell-nav .sidebar-recent-session__body,
html body .sidebar-sessions .sidebar-recent-session__body{
  min-width:0!important;
  flex:1 1 auto!important;
  gap:3px!important;
}
html body .shell-nav .sidebar-recent-session .sidebar-recent-session__name,
html body .sidebar-sessions .sidebar-recent-session .sidebar-recent-session__name{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  white-space:normal!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  line-height:15px!important;
  max-height:30px!important;
}
html body .shell-nav .sidebar-recent-session .sidebar-recent-session__meta,
html body .sidebar-sessions .sidebar-recent-session .sidebar-recent-session__meta{
  color:#415849!important;
  font-weight:450!important;
  line-height:14px!important;
}
html body .shell-nav .sidebar-recent-session__dot,
html body .sidebar-sessions .sidebar-recent-session__dot{
  margin-top:6px!important;
  opacity:.74!important;
}
html body .shell-nav .sidebar-recent-session.sidebar-recent-session--active .sidebar-recent-session__dot,
html body .sidebar-sessions .sidebar-recent-session.sidebar-recent-session--active .sidebar-recent-session__dot,
html body .shell-nav .sidebar-recent-session[aria-current="page"] .sidebar-recent-session__dot,
html body .sidebar-sessions .sidebar-recent-session[aria-current="page"] .sidebar-recent-session__dot{
  opacity:1!important;
}

/* OpenClaw Control UI — chat clarity specificity lock 2026-06-13 11:45
   Earlier garden rules use `openclaw-app section.card.chat` with !important, so match
   that specificity explicitly to remove decorative SVG backgrounds from the reading area.
*/
html body openclaw-app section.card.chat,
html body openclaw-app .card.chat,
html body main section.card.chat,
html body main .card.chat,
html body section.card.chat.card,
html body .card.chat.card{
  background:#f8fff9!important;
  background-color:#f8fff9!important;
  background-image:linear-gradient(180deg,#fbfffc 0%,#f4fbf6 100%)!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%!important;
  box-shadow:0 8px 22px rgba(15,61,37,.08)!important;
}
html body openclaw-app section.card.chat::before,
html body openclaw-app section.card.chat::after,
html body openclaw-app .card.chat::before,
html body openclaw-app .card.chat::after,
html body main section.card.chat::before,
html body main section.card.chat::after,
html body main .card.chat::before,
html body main .card.chat::after,
html body section.card.chat.card::before,
html body section.card.chat.card::after,
html body .card.chat.card::before,
html body .card.chat.card::after{
  content:none!important;
  display:none!important;
  opacity:0!important;
  background:none!important;
  background-image:none!important;
  animation:none!important;
}