:root{
  --sys-font:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --sys-header-bg:#ffffff;
  --sys-header-border:#d9e3ef;
  --sys-header-text:#162235;
  --sys-muted:#6f819b;
  --sys-primary:#2563eb;
  --sys-primary-soft:#eef4ff;
  --sys-primary-border:#cfe0ff;
  --sys-surface:#ffffff;
  --sys-surface-alt:#f7faff;
  --sys-card-border:#dde6f0;
  --sys-card-shadow:0 10px 28px rgba(15,23,42,.06);
  --sys-radius:14px;
}

html,body{font-family:var(--sys-font)}

/* Shared top headers */
.topbar,
.app-topbar,
#header.fixed-top,
header.topbar,
body .topbar{
  background:var(--sys-header-bg)!important;
  background-image:none!important;
  border-bottom:1px solid var(--sys-header-border)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}

#header.fixed-top .navbar,
#header.fixed-top .d-flex,
.topbar-left,
.topbar-center,
.topbar-right,
.brand,
.brand-panel,
.topbar-brand-panel{
  background:transparent!important;
}

.brand-title,.brand .title,.topbar h1,.topbar .title,#header .logo a,.brand-subtitle,.brand-sub,.topbar-theme-picker,
.topbar-left,.topbar-right,.topbar-center{
  color:var(--sys-header-text)!important;
}

.brand-subtitle,.brand-sub,.topbar-right .meta,.topbar-theme-picker span,#header .navbar a,
.pill,.chip,.badge,.small{ color:var(--sys-muted)!important; }

/* Nav */
.top-nav .nav-item,
.main-nav .nav-item,
#header .navbar a,
.sys-pill-link{
  border:1px solid transparent!important;
  border-radius:10px!important;
  color:var(--sys-muted)!important;
  background:transparent!important;
  transition:.16s ease;
}
.top-nav .nav-item:hover,
.main-nav .nav-item:hover,
#header .navbar a:hover,
.sys-pill-link:hover{
  background:#f3f7fc!important;
  color:#1f3f72!important;
}
.top-nav .nav-item.active,
.main-nav .nav-item.active,
#header .navbar .active,
.sys-pill-link.active{
  background:var(--sys-primary-soft)!important;
  color:var(--sys-primary)!important;
  border-color:var(--sys-primary-border)!important;
}

/* Buttons */
.btn,.btn-mini,button,
#header .get-started-btn,
.toolbar button,.mode-buttons button,.topbar button,
label.btn,
input[type=button],input[type=submit]{
  border-radius:12px!important;
}
.btn:not(.btn-primary):not(.primary):not(.danger):not(.warn),
.btn-mini,
.toolbar button.secondary,
.mode-buttons button.secondary,
.topbar button:not(.primary):not(.danger):not(.warn){
  background:var(--sys-surface)!important;
  color:var(--sys-header-text)!important;
  border:1px solid var(--sys-card-border)!important;
  box-shadow:none!important;
}
.btn:hover,.btn-mini:hover,button:hover,label.btn:hover{ filter:none; transform:none!important; }
.btn.primary,.btn.btn-primary,.topbar button.primary,#header .get-started-btn{
  background:var(--sys-primary)!important;
  color:#fff!important;
  border:1px solid var(--sys-primary)!important;
}
.btn.danger,.danger,button.danger{ background:#fff5f5!important; color:#dc2626!important; border:1px solid #fecaca!important; }
.btn.warn,.warn,button.warn{ background:#fff8eb!important; color:#b45309!important; border:1px solid #fcd34d!important; }

/* Inputs */
select,input,textarea,.input,.input-control,.url-input,.topbar-theme-select{
  background:#fff!important;
  color:var(--sys-header-text)!important;
  border:1px solid var(--sys-card-border)!important;
  box-shadow:none!important;
  border-radius:10px!important;
}

/* Panels/cards */
.surface-panel,.surface-card,.panel,.card,.panel-h,.hero-card,
.pane,#palette,#rightbar,.ocr-panel,.ocr-form-card,.ocr-map-wrap,.ocr-json-wrap,
.schema-bar,.main-tabs,.builder-left,.builder-toolbox,.builder-right,
.published-page-card,.toolbox-parent-selector,.theme-manager-card,.properties-panel{
  border-color:var(--sys-card-border)!important;
  box-shadow:var(--sys-card-shadow)!important;
}

/* Light shell feel for specific studio pages without destroying custom backgrounds */
.app-main,.main,#center,#viewport,#stageIA,.wrap{ color:inherit; }

/* Home page header/nav overrides */
#header{ background:#fff!important; border-bottom:1px solid var(--sys-header-border)!important; }
#header .logo img{ max-height:40px; }
#header .navbar ul{ gap:6px; }
#header .navbar li{ display:flex; align-items:center; }
#header .navbar a{ padding:9px 12px!important; }


/* Tools alignment */
body.sysimple-shell,
body[data-sysimple-shell="true"]{
  background:linear-gradient(180deg,#f6f9fc 0%, #edf3f9 100%) !important;
  color:var(--sys-header-text) !important;
}

.app,.workspace,.main,.content,.workspace-content{
  background:transparent !important;
}

.sidebar,
#sidebar,
aside.sidebar,
.panel,
.right-zone,
.editor-zone,
.preview-zone,
header.topbar.panel,
.topbar.panel{
  background:var(--sys-surface) !important;
  border:1px solid var(--sys-card-border) !important;
  box-shadow:var(--sys-card-shadow) !important;
  border-radius:14px !important;
}

.brand-logo{
  background:linear-gradient(135deg,#2a7cf7,#1653bf) !important;
  color:#fff !important;
  border-radius:12px !important;
}

.sidebar,.panel,.topbar,.panel-header,.section-head,.sidebar-section{
  color:var(--sys-header-text) !important;
}

input,select,textarea,.input,.control{
  background:#ffffff !important;
  color:var(--sys-header-text) !important;
  border:1px solid var(--sys-card-border) !important;
  box-shadow:none !important;
}

.badge,.status-pill,.pill,.chip{
  background:#f6f9fc !important;
  border:1px solid var(--sys-card-border) !important;
  color:var(--sys-muted) !important;
}


/* Tools should use the same topbar classes as Intranet */
body.sysimple-shell,
body[data-sysimple-shell="true"]{
  overflow:auto !important;
}

body.sysimple-shell .app,
body[data-sysimple-shell="true"] .app-shell{
  min-height:calc(100vh - 62px);
  height:calc(100vh - 62px);
}

/* Ensure logo image behaves like Intranet header */
.brand-logo-image{
  width:40px;
  height:40px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 6px 18px rgba(21,111,240,.18));
}

/* Header theme compatibility in dark mode */
body[data-theme="dark"] .app-topbar{
  background:#0f1728 !important;
  border-bottom-color:#223651 !important;
}
body[data-theme="dark"] .topbar-brand-panel .brand-title{
  color:#e7eef9 !important;
}
body[data-theme="dark"] .topbar-brand-panel .brand-subtitle,
body[data-theme="dark"] .topbar-theme-picker{
  color:#93a8c3 !important;
}
body[data-theme="dark"] .topbar-theme-select{
  background:#111b2f !important;
  color:#e7eef9 !important;
  border-color:#233651 !important;
}


/* More visible tool header distinction by theme */
body[data-theme="sysimple"] .app-topbar{
  background:linear-gradient(180deg,#ffffff 0%, #eef4ff 100%) !important;
  border-bottom-color:#cfe0ff !important;
}
body[data-theme="sysimple"] .topbar-brand-panel .brand-subtitle,
body[data-theme="sysimple"] .topbar-theme-picker{
  color:#5d7394 !important;
}
body[data-theme="light"] .app-topbar{
  background:#ffffff !important;
  border-bottom-color:#d9e0e8 !important;
}
body[data-theme="light"] .topbar-brand-panel .brand-subtitle,
body[data-theme="light"] .topbar-theme-picker{
  color:#74859b !important;
}


/* ===== Sysimple UX Foundation compatibility patch ===== */
:root{--adm-radius:7px;--sys-radius:7px;--radius:10px;--radius-sm:7px;}