:root{
  --accent:#9c72ff;
  --accent-rgb:156,114,255;
  --accent-soft:rgba(156,114,255,.13);
  --accent-soft-2:rgba(156,114,255,.2);
  --bg:#060812;
  --bg2:#0a0d18;
  --surface:#101523;
  --surface2:#141a2a;
  --surface3:#171d30;
  --line:rgba(215,224,255,.10);
  --soft:rgba(255,255,255,.04);
  --text:#f4f6ff;
  --muted:#9aa3be;
  --shadow:0 22px 60px rgba(3,5,12,.45);
}
html[data-theme="light"]{
  --bg:#f3f5fb;
  --bg2:#eef1f8;
  --surface:#ffffff;
  --surface2:#f8f9fd;
  --surface3:#f1f4fb;
  --line:rgba(27,35,61,.10);
  --soft:rgba(27,35,61,.04);
  --text:#121728;
  --muted:#69758f;
  --shadow:0 18px 42px rgba(34,45,80,.10);
}
body{
  background:
    radial-gradient(circle at 50% 2%, rgba(156,114,255,.18), transparent 24%),
    repeating-linear-gradient(90deg, rgba(83,98,170,.03) 0 8px, transparent 8px 40px),
    linear-gradient(180deg,var(--bg),var(--bg2));
}
html[data-theme="light"] body{
  background:
    radial-gradient(circle at 50% 2%, rgba(156,114,255,.11), transparent 24%),
    repeating-linear-gradient(90deg, rgba(137,151,195,.06) 0 8px, transparent 8px 40px),
    linear-gradient(180deg,var(--bg),var(--bg2));
}
body:before{
  background:
    radial-gradient(circle at 84% -8%, rgba(156,114,255,.22), transparent 28%),
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.03), transparent 20%);
}
.site-header{height:76px}
.site-header.scrolled,.site-header{
  background:color-mix(in srgb,var(--bg) 80%, transparent);
  backdrop-filter:blur(18px);
}
.header-inner{gap:26px}
.brand{gap:14px}
.brand-mark,.brand-mark-uploaded{width:46px;height:46px;max-width:none;filter:drop-shadow(0 0 18px rgba(156,114,255,.24))}
.brand-copy b{font-size:.97rem;letter-spacing:.30em;text-transform:uppercase;font-weight:750}
.brand-copy small{letter-spacing:.40em;font-size:.58rem;color:#c8b8ff;text-transform:uppercase}
.desktop-nav{gap:20px}
.desktop-nav a{position:relative;padding:10px 0;font-size:.9rem}
.desktop-nav a:after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);transform:scaleX(0);transition:transform .25s ease}
.desktop-nav a:hover:after{transform:scaleX(1)}
.icon-btn,.account-chip,.guest-chat-fab,.menu-btn,.notification-button,.notification-popover,.mobile-menu,.card,.panel,.service-card,.case-card,.price-card,.feature-card,.process-item,.metric-card,.dashboard-card,.project-row,.table-like,.auth-card,.project-card,.note-card,.file-card,.empty-state,.pricing-note,.cta-panel,.profile-quick-dialog,.notification-row-v109,.message-row-v110,.chat-context-card-v110,.chat-side-card-v110{
  box-shadow:var(--shadow);
}
.card,.panel,.service-card,.case-card,.price-card,.feature-card,.project-row,.metric-card,.auth-card,.project-card,.note-card,.file-card,.cta-panel,.project-hero-card{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,var(--accent) 2%),color-mix(in srgb,var(--surface2) 100%,transparent));border:1px solid color-mix(in srgb,var(--line) 90%,transparent);border-radius:26px}
.primary-btn{background:linear-gradient(180deg,#b18dff,#8d61ff);box-shadow:0 18px 38px rgba(156,114,255,.28)}
.primary-btn:hover{box-shadow:0 20px 42px rgba(156,114,255,.34)}
.ghost-btn,.icon-btn,.menu-btn,.account-chip,.login-btn,.notification-button{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 94%,white 1%),color-mix(in srgb,var(--surface2) 100%,transparent));border:1px solid color-mix(in srgb,var(--line) 90%,transparent)}
.account-chip{padding:4px 12px 4px 6px;min-height:50px}
.account-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 22%,var(--surface)),color-mix(in srgb,var(--accent) 10%,var(--surface2)));border:1px solid rgba(156,114,255,.24)}
.account-chip-copy b{font-weight:700}
.notification-popover{border-radius:24px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,var(--accent) 2%),color-mix(in srgb,var(--surface2) 100%,transparent))}
.mobile-menu{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 88%, transparent),var(--bg2));backdrop-filter:blur(20px)}
.mobile-menu a:not(.primary-btn){font-size:1.18rem}
.hero,.page-hero{position:relative;overflow:hidden}
.hero:after,.page-hero:after{content:"";position:absolute;inset:auto 0 0 0;height:120px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.02))}
.hero-core{background:linear-gradient(180deg,#ac84ff,#8f63ff)}
.hero-copy,.lead{color:var(--muted)}
.section-head,.dashboard-head{align-items:end}
input,textarea,select{background:linear-gradient(180deg,color-mix(in srgb,var(--surface2) 100%,transparent),color-mix(in srgb,var(--surface) 98%,transparent));border:1px solid color-mix(in srgb,var(--line) 92%,transparent);border-radius:18px;color:var(--text)}
input:focus,textarea:focus,select:focus{outline:none;border-color:rgba(156,114,255,.56);box-shadow:0 0 0 4px rgba(156,114,255,.10)}
.site-footer{background:linear-gradient(180deg,transparent,var(--bg2));border-top:1px solid color-mix(in srgb,var(--line) 88%,transparent)}
.footer-grid a:not(.brand),.footer-bottom{color:var(--muted)}
.footer-grid h4{color:#d2c5ff}
.dashboard-shell,.dashboard-main,.dashboard-grid{position:relative}
.side-nav{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,var(--accent) 2%),color-mix(in srgb,var(--surface2) 100%,transparent));border:1px solid color-mix(in srgb,var(--line) 90%,transparent);border-radius:28px;padding:14px;box-shadow:var(--shadow)}
.side-nav a{border-radius:16px}
.side-nav a.active,.side-nav a:hover{background:linear-gradient(180deg,rgba(156,114,255,.18),rgba(156,114,255,.10));color:var(--text)}
.dashboard-card,.analytics-card,.settings-card,.backup-card,.notification-row-v109{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,var(--accent) 2%),color-mix(in srgb,var(--surface2) 100%,transparent));border-color:color-mix(in srgb,var(--line) 90%,transparent);border-radius:26px}
.table-like,.analytics-table,.backup-table,table{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 97%,var(--accent) 1%),color-mix(in srgb,var(--surface2) 100%,transparent));border:1px solid color-mix(in srgb,var(--line) 90%,transparent);border-radius:24px;overflow:hidden}
th,td{border-color:color-mix(in srgb,var(--line) 85%,transparent)}
.status-pill{border-radius:999px;border:1px solid color-mix(in srgb,var(--line) 90%,transparent);background:color-mix(in srgb,var(--surface2) 95%,transparent)}
.status-pill.good{background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.22)}
.status-pill.bad{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.22)}
.badge-dot{background:linear-gradient(180deg,#b792ff,#8f63ff)}
.toast{border-radius:18px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,var(--accent) 2%),color-mix(in srgb,var(--surface2) 100%,transparent))}

/* Chat / inbox tightened to provided design */
.inbox-shell-v110{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,var(--accent) 2%),color-mix(in srgb,var(--surface2) 100%,transparent));border-radius:30px;padding:20px}
.inbox-filter-v110{border-bottom-color:color-mix(in srgb,var(--line) 85%,transparent)}
.message-row-v110{border-radius:22px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface2) 100%,transparent),color-mix(in srgb,var(--surface) 98%,transparent))}
.chat-board-v110{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 95%,var(--accent) 2%),color-mix(in srgb,var(--surface2) 100%,transparent));border-radius:34px;border:1px solid color-mix(in srgb,var(--line) 88%,transparent);box-shadow:var(--shadow)}
.chat-context-v110,.chat-side-v110{background:linear-gradient(180deg,color-mix(in srgb,var(--surface2) 100%,var(--accent) 2%),color-mix(in srgb,var(--surface) 96%,transparent))}
.chat-thread-head-v110{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,transparent),transparent)}
.chat-messages-v110{background:repeating-linear-gradient(90deg, rgba(100,115,180,.028) 0 8px, transparent 8px 38px),radial-gradient(circle at top center, rgba(156,114,255,.08), transparent 28%)}
.chat-bubble-v110{border-radius:24px;padding:16px 18px}
.chat-bubble-v110.mine{background:linear-gradient(180deg,rgba(156,114,255,.24),rgba(156,114,255,.16))}
.chat-side-card-v110 h3,.chat-context-card-v110 h3{letter-spacing:-.02em}
.participant-v110,.internal-note-v110,.pin-list-v110 article{border-radius:18px}
.compose-shortcuts-v110 span{background:linear-gradient(180deg,color-mix(in srgb,var(--surface2) 100%,transparent),color-mix(in srgb,var(--surface) 98%,transparent));border-radius:14px}
.chat-compose-v110{background:linear-gradient(180deg,color-mix(in srgb,var(--surface2) 98%,transparent),color-mix(in srgb,var(--surface) 100%,transparent))}
.chat-compose-v110 textarea{border-radius:20px}

/* Public and utility blocks */
.metric-card,.trust-item,.service-card,.feature-card,.price-card,.case-card,.contact-card,.faq-item,.project-hero-card,.cabinet-summary-card{border-radius:26px}
.trust-strip{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border-color:color-mix(in srgb,var(--line) 88%,transparent)}
.trust-item{background:transparent}
.service-card .service-index,.eyebrow,.footer-grid h4{color:#cbbcff}
.section h2,.page-hero h1,.dashboard-head h1{letter-spacing:-.05em}
.panel,.settings-section,.owner-settings-panel{border-radius:26px}
.guest-chat-panel{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,var(--accent) 2%),color-mix(in srgb,var(--surface2) 100%,transparent));border-radius:28px;height:min(620px,calc(100svh - 100px))}
.guest-chat-panel header{padding:18px 18px 14px}
.guest-chat-messages{padding:16px 16px 8px;gap:12px}
.guest-chat-messages .chat-bubble,.guest-chat-messages .chat-bubble.staff{max-width:82%;padding:14px 16px;border-radius:22px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface2) 100%,transparent),color-mix(in srgb,var(--surface) 98%,transparent));border:1px solid color-mix(in srgb,var(--line) 90%,transparent)}
.guest-chat-panel form{padding:14px}
.guest-chat-fab{height:54px;padding:0 20px}

/* Light theme extra cleanup */
html[data-theme="light"] .desktop-nav a,html[data-theme="light"] .footer-grid a:not(.brand),html[data-theme="light"] .muted{color:var(--muted)}
html[data-theme="light"] .site-header.scrolled,html[data-theme="light"] .site-header{background:rgba(248,250,255,.84)}
html[data-theme="light"] .brand-copy small{color:#8d6dff}
html[data-theme="light"] .primary-btn{color:#fff}
html[data-theme="light"] .chat-messages-v110{background:repeating-linear-gradient(90deg, rgba(154,170,205,.08) 0 8px, transparent 8px 38px),radial-gradient(circle at top center, rgba(156,114,255,.06), transparent 28%)}

/* Responsive */
@media(max-width:1180px){
  .container{width:min(100% - 32px,1280px)}
  .chat-board-v110{grid-template-columns:1fr}
}
@media(max-width:900px){
  .site-header{height:68px}
  .brand-mark,.brand-mark-uploaded{width:42px;height:42px}
  .brand-copy b{font-size:.84rem;letter-spacing:.18em}
  .brand-copy small{font-size:.54rem;letter-spacing:.26em}
  .account-chip{max-width:170px}
  .desktop-nav{display:none}
}
@media(max-width:720px){
  :root{--radius:20px;--header:64px}
  h1{font-size:clamp(2.6rem,11vw,4.2rem)}
  h2{font-size:clamp(2rem,8vw,3rem)}
  .hero,.page-hero{padding-top:calc(var(--header) + 54px)}
  .header-actions{gap:6px}
  .account-chip{padding:4px 10px 4px 5px;max-width:148px}
  .account-chip-copy b{font-size:.9rem}
  .guest-chat{right:10px;left:10px;bottom:10px}
  .guest-chat-fab{width:100%;justify-content:center}
  .guest-chat-panel{right:0;left:0;width:auto;bottom:66px;height:min(78svh,640px)}
  .site-footer{padding-top:46px}
  .footer-grid{gap:20px}
  .message-row-v110,.chat-context-card-v110,.chat-side-card-v110,.chat-bubble-v110{border-radius:20px}
}
@media(max-width:560px){
  .container,.narrow{width:min(100% - 22px,1280px)}
  .brand{gap:10px}
  .brand-mark,.brand-mark-uploaded{width:38px;height:38px}
  .brand-copy b{font-size:.76rem;letter-spacing:.12em}
  .brand-copy small{display:none}
  .icon-btn,.notification-button,.menu-btn{width:40px;height:40px;min-height:40px}
  .site-header{height:62px}
  .header-actions .desktop-cta{display:none}
  .notification-popover{width:min(360px,calc(100vw - 20px))}
  .toast-stack{right:10px;top:72px;width:min(360px,calc(100% - 20px))}
  .chat-thread-head-v110,.chat-context-v110,.chat-side-v110,.chat-compose-v110,.chat-messages-v110{padding-left:14px;padding-right:14px}
  .chat-bubble-v110{max-width:100%}
}