/* ==========================================================================
   DTE ADOPT LAYER — retheme third-party apps to the DTE brand guideline
   Injected by nginx sub_filter into: Twenty (CRM), Plane (PM), Mattermost,
   Open-WebUI (AI), Outline (Docs).
   --------------------------------------------------------------------------
   Strategy: override each app's OWN design tokens. Token names are unique per
   app, so a single shared file is inherently self-scoping and safe everywhere.
   Loaded AFTER dte-core.css (which supplies --dte-* and the fonts).
   ========================================================================== */

/* ==========================================================================
   0. UNIVERSAL — typography + chrome for every app
   ========================================================================== */
html, body {
  font-family: var(--dte-font-body) !important;
  background-color: var(--dte-void) !important;
  color: var(--dte-text);
}

/* Headings pick up the technical display face */
h1, h2, h3, h4, .title, [class*="Title"], [class*="title"] {
  font-family: var(--dte-font-display) !important;
  letter-spacing: 0.012em;
}

/* Code / numeric / tabular content gets the mono face */
code, pre, kbd, samp, [class*="mono"], [class*="Mono"] {
  font-family: var(--dte-font-mono) !important;
}

/* Scrollbars + selection, everywhere */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--dte-bg); }
::-webkit-scrollbar-thumb { background: var(--dte-line-2); border: 2px solid var(--dte-bg); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--dte-line-hot); }
::selection { background: var(--dte-accent); color: #fff; }
* { scrollbar-color: var(--dte-line-2) var(--dte-bg); }

/* ==========================================================================
   1. PLANE  (pm.dte.com.vn) — Tailwind v4 token ramp
   Dark-direction neutral scale: 100 = darkest .. 1200 = lightest text
   ========================================================================== */
:root, .dark, [data-theme="dark"], [data-theme="dark-contrast"] {
  --neutral-white:  #ffffff;
  --neutral-100:    #000000;   /* canvas */
  --neutral-200:    #050506;   /* layer-1  */
  --neutral-300:    #0A0A0C;   /* surface  */
  --neutral-400:    #101013;
  --neutral-500:    #16161A;
  --neutral-600:    #1C1C21;   /* borders  */
  --neutral-700:    #26262C;
  --neutral-800:    #3A3A43;
  --neutral-900:    #55555E;
  --neutral-1000:   #7E7E89;   /* muted text */
  --neutral-1100:   #B9B9C2;
  --neutral-1200:   #FFFFFF;   /* primary text */

  /* Plane brand -> DTE signal orange */
  --brand-default:  #E8622C;
  --brand-hover:    #FF8A4C;
  --brand-active:   #CF5522;
  --bg-accent-primary:        #E8622C;
  --bg-accent-primary-hover:  #FF8A4C;
  --bg-accent-primary-active: #CF5522;
  --background-color-accent-primary:       #E8622C;
  --background-color-accent-primary-hover: #FF8A4C;
  --border-accent-strong:     #E8622C;
  --border-color-accent-strong: #E8622C;
  --bg-canvas:   #000000;
  --bg-backdrop: rgba(0,0,0,.78);
}

/* ==========================================================================
   2. MATTERMOST  (chat.dte.com.vn)
   ========================================================================== */
:root {
  --center-channel-bg:        0,0,0;
  --center-channel-color:     255,255,255;
  --sidebar-bg:               5,5,6;
  --sidebar-text:             185,185,194;
  --sidebar-header-bg:        10,10,12;
  --sidebar-header-text-color:255,255,255;
  --sidebar-teambar-bg:       0,0,0;
  --sidebar-text-hover-bg:    22,22,26;
  --sidebar-text-active-border:232,98,44;
  --sidebar-text-active-color:255,255,255;
  --sidebar-unread-text:      255,255,255;
  --button-bg:                232,98,44;
  --button-color:             255,255,255;
  --link-color:               255,138,76;
  --mention-bg:               232,98,44;
  --mention-color:            255,255,255;
  --mention-highlight-bg:     138,58,26;
  --mention-highlight-link:   255,138,76;
  --new-message-separator:    232,98,44;
  --online-indicator:         74,222,128;
  --away-indicator:           227,179,65;
  --dnd-indicator:            240,85,63;
  --error-text:               240,85,63;
  --center-channel-divider:   28,28,33;
}
/* Mattermost surfaces that are hard-coded */
#root .app__body, .app__content, .channel__wrap, .post-list__table,
.sidebar--left, .sidebar--right, .channel-header, .post-create__container {
  background-color: var(--dte-void) !important;
  color: var(--dte-text);
}
.post:hover, .post.post--hovered { background-color: rgba(255,255,255,.022) !important; }

/* ==========================================================================
   3. OUTLINE / DTE Docs  (docs.dte.com.vn)
   ========================================================================== */
:root {
  --background:        #000000;
  --secondaryBackground:#0A0A0C;
  --sidebarBackground: #050506;
  --sidebarActiveBackground: #16161A;
  --sidebarText:       #B9B9C2;
  --text:              #FFFFFF;
  --textSecondary:     #B9B9C2;
  --textTertiary:      #7E7E89;
  --placeholder:       #55555E;
  --divider:           #1C1C21;
  --inputBorder:       #26262C;
  --inputBorderFocused:#E8622C;
  --primary:           #E8622C;
  --accent:            #E8622C;
  --accentText:        #FFFFFF;
  --link:              #FF8A4C;
  --listItemHoverBackground: #101013;
  --menuBackground:    #0A0A0C;
  --tableDivider:      #1C1C21;
  --codeBackground:    #0A0A0C;
  --codeBorder:        #1C1C21;
}

/* ==========================================================================
   4. OPEN-WEBUI / DTE AI  (ai.dte.com.vn) — Tailwind gray scale
   ========================================================================== */
:root {
  --color-gray-50:  #B9B9C2;
  --color-gray-100: #7E7E89;
  --color-gray-200: #55555E;
  --color-gray-300: #3A3A43;
  --color-gray-400: #26262C;
  --color-gray-500: #1C1C21;
  --color-gray-600: #16161A;
  --color-gray-700: #101013;
  --color-gray-800: #0A0A0C;
  --color-gray-850: #050506;
  --color-gray-900: #000000;
  --color-gray-950: #000000;
}
/* Open-WebUI hard-coded dark surfaces */
.dark body, .dark #app, .dark .chat-container { background-color: var(--dte-void) !important; }

/* ==========================================================================
   5. TWENTY / DTE CRM  (crm.dte.com.vn) — styled-components theme
   ========================================================================== */
:root {
  --twentycrm-background-primary:   #000000;
  --twentycrm-background-secondary: #0A0A0C;
  --twentycrm-background-tertiary:  #101013;
  --twentycrm-font-color-primary:   #FFFFFF;
  --twentycrm-font-color-secondary: #B9B9C2;
  --twentycrm-border-color-light:   #1C1C21;
  --twentycrm-accent-primary:       #E8622C;
}
/* Twenty paints most surfaces inline; normalise the shell */
#root > div, [class*="StyledLayout"], [class*="StyledContainer"],
[class*="MainContainer"], [class*="StyledPageContainer"] {
  background-color: var(--dte-void) !important;
}

/* ==========================================================================
   6. CROSS-APP POLISH — make every app feel like one product
   ========================================================================== */

/* Primary actions adopt the signal orange */
button[type="submit"], .btn-primary, [class*="PrimaryButton"],
[data-variant="primary"], .Button--primary {
  background-color: var(--dte-accent) !important;
  border-color: var(--dte-accent) !important;
  color: #fff !important;
  transition: background-color var(--dte-fast) var(--dte-ease), transform var(--dte-fast) var(--dte-ease);
}
button[type="submit"]:hover, .btn-primary:hover, [class*="PrimaryButton"]:hover {
  background-color: var(--dte-accent-2) !important;
  border-color: var(--dte-accent-2) !important;
}
button, a, [role="button"] { transition: color var(--dte-fast) var(--dte-ease), background-color var(--dte-fast) var(--dte-ease), border-color var(--dte-fast) var(--dte-ease); }
button:active, [role="button"]:active { transform: translateY(0.5px); }

/* Inputs get the DTE focus signature */
input:focus-visible, textarea:focus-visible, select:focus-visible,
input:focus, textarea:focus {
  outline: none !important;
  border-color: var(--dte-accent) !important;
  box-shadow: 0 0 0 3px var(--dte-accent-glow) !important;
}

/* Cards / panels across apps get hairline treatment */
[class*="card"], [class*="Card"], [class*="panel"], [class*="Panel"] {
  border-color: var(--dte-line);
}

/* Links */
a { color: inherit; }
a:hover { color: var(--dte-accent-2); }

/* Soften any pure-white surfaces that slip through (light-mode leftovers) */
[style*="background-color: rgb(255, 255, 255)"],
[style*="background: rgb(255, 255, 255)"],
[style*="background-color:#fff"], [style*="background-color: #fff"] {
  background-color: var(--dte-panel) !important;
  color: var(--dte-text) !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}


/* ==========================================================================
   7. KEYCLOAK SSO LOGIN (sso.dte.com.vn)
   Served here because Keycloak will not serve the bind-mounted theme's
   own resources (parent theme 200, custom theme 404). Selectors are
   Keycloak-specific so this block is inert in every other app.
   ========================================================================== */
:root{
  --dte-void:#000; --dte-panel:#0A0A0C; --dte-raised:#101013;
  --dte-line:#1C1C21; --dte-line-2:#26262C;
  --dte-text:#fff; --dte-muted:#7E7E89; --dte-dim:#55555E;
  --dte-accent:#E8622C; --dte-accent-2:#FF8A4C; --dte-glow:rgba(232,98,44,.3);
  --dte-ok:#4ADE80; --dte-err:#F0553F;
  --dte-ease:cubic-bezier(.22,1,.36,1);
}

/* ---- page shell: black + technical grid ---------------------------------- */
html,body{height:100%;}
body.login-pf, .login-pf body, #kc-container, .login-pf-page{
  background:#000 !important;
  color:var(--dte-text);
  font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
}
body.login-pf::before, .login-pf-page::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:48px 48px;
}
body.login-pf::after, .login-pf-page::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% -10%, rgba(232,98,44,.07), transparent 55%),
             radial-gradient(ellipse at 50% 100%, transparent 40%, rgba(0,0,0,.9) 100%);
}
.login-pf-page{position:relative; z-index:1; padding-top:0 !important;}

/* ---- header: DTE logo instead of realm name ------------------------------ */
#kc-header, .login-pf-page-header{ text-align:center; margin:0 auto 26px; }
#kc-header-wrapper{
  font-size:0 !important; color:transparent !important; padding:0 !important;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
#kc-header-wrapper::before{
  content:""; display:block; width:150px; height:58px;
  background:url('../img/dte-logo.svg') center/contain no-repeat;
  animation:dte-in .7s var(--dte-ease) both;
}
#kc-header-wrapper::after{
  content:"ĐĂNG NHẬP MỘT LẦN"; display:block;
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.3em;
  color:var(--dte-muted); animation:dte-in .7s .1s var(--dte-ease) both;
}

/* ---- the card ------------------------------------------------------------ */
.card-pf, .login-pf-page .card-pf, #kc-form-wrapper, .login-pf-header + .card-pf{
  background:var(--dte-panel) !important;
  border:1px solid var(--dte-line) !important;
  border-radius:3px !important;
  box-shadow:0 24px 70px rgba(0,0,0,.75) !important;
  padding:34px 32px !important;
  max-width:430px; margin:0 auto;
  position:relative;
  animation:dte-card .75s var(--dte-ease) both;
}
/* corner registration ticks */
.card-pf::before, .card-pf::after{
  content:""; position:absolute; width:9px; height:9px; border-color:var(--dte-accent); opacity:.7;
}
.card-pf::before{ top:-1px; left:-1px; border-top:1px solid; border-left:1px solid; }
.card-pf::after { bottom:-1px; right:-1px; border-bottom:1px solid; border-right:1px solid; }

@keyframes dte-card{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }
@keyframes dte-in{ from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none} }

/* ---- headings ------------------------------------------------------------ */
#kc-page-title{
  font-family:'Chakra Petch','Be Vietnam Pro',sans-serif !important;
  font-weight:500 !important; font-size:21px !important; color:var(--dte-text) !important;
  letter-spacing:.012em; margin:0 0 22px; text-align:left;
}
#kc-page-title::before{
  content:""; display:block; width:26px; height:2px; background:var(--dte-accent); margin-bottom:12px;
}

/* ---- labels + inputs ----------------------------------------------------- */
.pf-c-form__label, label, .control-label, .pf-v5-c-form__label-text{
  font-family:'JetBrains Mono',monospace !important;
  font-size:10px !important; letter-spacing:.2em !important; text-transform:uppercase;
  color:var(--dte-muted) !important; font-weight:500 !important; margin-bottom:7px !important;
}
input[type="text"], input[type="password"], input[type="email"],
.pf-c-form-control, .pf-v5-c-form-control, #kc-form-login input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]){
  width:100% !important; background:#050506 !important; color:var(--dte-text) !important;
  border:1px solid var(--dte-line-2) !important; border-radius:2px !important;
  padding:11px 13px !important; font-family:'Be Vietnam Pro',sans-serif !important;
  font-size:14px !important; box-shadow:none !important;
  transition:border-color .16s var(--dte-ease), box-shadow .16s var(--dte-ease);
}
input::placeholder{ color:var(--dte-dim) !important; }
input:focus, .pf-c-form-control:focus{
  outline:none !important; border-color:var(--dte-accent) !important;
  box-shadow:0 0 0 3px var(--dte-glow) !important;
}
/* kill PatternFly's bottom-border-only look */
.pf-c-form-control, .pf-v5-c-form-control{ --pf-c-form-control--BorderBottomColor:var(--dte-line-2); }

/* ---- primary button ------------------------------------------------------ */
#kc-form-login input#kc-login, input#kc-login, input[type="submit"], .pf-c-button.pf-m-primary, .btn-primary, button[type="submit"]{
  width:100%; background:var(--dte-accent) !important; border:1px solid var(--dte-accent) !important;
  color:#fff !important; border-radius:2px !important;
  font-family:'JetBrains Mono',monospace !important; font-size:12px !important;
  letter-spacing:.16em !important; text-transform:uppercase; font-weight:500 !important;
  padding:12px 18px !important; cursor:pointer;
  transition:background .16s var(--dte-ease), transform .12s var(--dte-ease), box-shadow .2s var(--dte-ease);
}
input[type="submit"]:hover, #kc-login:hover, .pf-c-button.pf-m-primary:hover{
  background:var(--dte-accent-2) !important; border-color:var(--dte-accent-2) !important;
  box-shadow:0 0 22px var(--dte-glow) !important;
}
input[type="submit"]:active, #kc-login:active{ transform:translateY(1px); }

/* ---- links --------------------------------------------------------------- */
a, #kc-registration a, #kc-form-options a, .login-pf-settings a{
  color:var(--dte-accent-2) !important; text-decoration:none;
  transition:color .16s var(--dte-ease);
}
a:hover{ color:var(--dte-accent) !important; text-decoration:underline; }

/* ---- checkbox ------------------------------------------------------------ */
input[type="checkbox"]{ accent-color:var(--dte-accent); }
#kc-form-options, .checkbox label{ color:var(--dte-muted) !important; font-size:13px; }

/* ---- alerts -------------------------------------------------------------- */
.alert, .pf-c-alert, .alert-error, .pf-m-danger{
  background:rgba(240,85,63,.09) !important; border:1px solid rgba(240,85,63,.4) !important;
  color:#FFC9C0 !important; border-radius:2px !important; font-size:13px;
}
.alert-success, .pf-m-success{
  background:rgba(74,222,128,.09) !important; border:1px solid rgba(74,222,128,.4) !important;
  color:#BBF7D0 !important;
}
.alert-warning, .pf-m-warning{
  background:rgba(227,179,65,.09) !important; border:1px solid rgba(227,179,65,.4) !important;
  color:#FDE68A !important;
}

/* ---- social / identity providers ----------------------------------------- */
#kc-social-providers a, .pf-c-button.pf-m-control{
  background:transparent !important; border:1px solid var(--dte-line-2) !important;
  color:var(--dte-text) !important; border-radius:2px !important;
  font-family:'JetBrains Mono',monospace !important; font-size:11px !important;
  letter-spacing:.14em; text-transform:uppercase;
}
#kc-social-providers a:hover{ border-color:var(--dte-accent) !important; }

/* ---- language picker ----------------------------------------------------- */
#kc-locale, .login-pf-page .login-pf-signup{ font-family:'JetBrains Mono',monospace; font-size:11px; }
#kc-locale-dropdown a{ color:var(--dte-muted) !important; }

/* ---- footer -------------------------------------------------------------- */
#kc-info, #kc-info-wrapper, .login-pf-signup{
  color:var(--dte-dim) !important; font-size:12.5px;
}
.card-pf + *, #kc-content-wrapper{ color:var(--dte-muted); }

/* a tagline under the card */
#kc-content::after{
  content:"© 2026 Kỷ Nguyên Số · Kiến tạo giá trị số";
  display:block; text-align:center; margin-top:26px;
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dte-dim);
}

/* ---- misc PatternFly surfaces that default to white ---------------------- */
.pf-c-login__main, .pf-v5-c-login__main, .login-pf-page .card-pf *{ background-color:transparent; }
select, textarea{ background:#050506 !important; color:var(--dte-text) !important; border:1px solid var(--dte-line-2) !important; }
::selection{ background:var(--dte-accent); color:#fff; }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#050506; }
::-webkit-scrollbar-thumb{ background:var(--dte-line-2); border-radius:6px; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* KC extras — checkbox alignment, locale picker, misc */
#kc-form-options .checkbox { display:flex; align-items:center; gap:9px; }
#kc-form-options .checkbox label{
  display:flex !important; align-items:center; gap:9px; margin:0 !important;
  letter-spacing:.14em !important; cursor:pointer;
}
#kc-form-options input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; width:14px; height:14px; flex:0 0 14px;
  border:1px solid var(--dte-line-2); border-radius:2px; background:#050506; position:static;
  margin:0 !important; cursor:pointer; transition:all .15s var(--dte-ease);
}
#kc-form-options input[type="checkbox"]:checked{
  background:var(--dte-accent); border-color:var(--dte-accent);
  box-shadow:inset 0 0 0 2px #0A0A0C;
}
#kc-locale, .kns-locale{
  display:flex; justify-content:flex-end; margin-bottom:6px;
}
#kc-locale select, .kns-locale select{
  background:#050506 !important; color:var(--dte-muted) !important;
  border:1px solid var(--dte-line) !important; border-radius:2px !important;
  font-family:'JetBrains Mono',monospace !important; font-size:10px !important;
  letter-spacing:.12em; padding:5px 8px !important; text-transform:uppercase;
}
#kc-locale::before, .kns-locale::before{ content:none !important; }
#kc-form-options a{ font-size:12.5px; letter-spacing:0; }
/* remove the nested inner box so the card reads as one surface */
#kc-form-login, #kc-form-wrapper{ background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; }

/* hide orphaned pficon glyphs (missing icon font) */
#kc-locale .pficon, #kc-locale .fa, .kns-locale .pficon, .kns-locale .fa,
#kc-locale-wrapper .pficon { display:none !important; } /* pficon glyph */

/* Plane semantic hard-override — their light theme maps surfaces to
   --neutral-white, so the ramp alone is not enough. Pin the semantics. */
:root, html, html[data-theme], html[data-theme="light"], html[data-theme="dark"],
.dark, [data-theme="light"], [data-theme="dark"], [data-theme="dark-contrast"] {
  --bg-canvas:      #000000;
  --bg-surface-1:   #050506;
  --bg-surface-2:   #0A0A0C;
  --bg-layer-1:     #0A0A0C;
  --bg-layer-1-hover:#101013;
  --bg-layer-2:     #101013;
  --bg-layer-3:     #16161A;
  --bg-inverse:     #FFFFFF;
  --bg-backdrop:    rgba(0,0,0,.8);
  --background-color-layer-1:   #0A0A0C;
  --background-color-layer-2:   #101013;
  --background-color-surface-1: #050506;
  --txt-primary:    #FFFFFF;
  --txt-secondary:  #B9B9C2;
  --txt-tertiary:   #7E7E89;
  --txt-placeholder:#55555E;
  --text-color-primary:   #FFFFFF;
  --text-color-secondary: #B9B9C2;
  --border-subtle-1:#1C1C21;
  --border-subtle-2:#26262C;
  --border-strong:  #3A3A43;
}
/* Tailwind utility leftovers on Plane's auth screens */
.bg-surface-1, .bg-surface-2, .bg-layer-1, .bg-layer-2, .bg-canvas { background-color:#000 !important; }
.bg-white { background-color:#0A0A0C !important; }

/* hide third-party vendor marketing on login screens (not our brand) */
[class*="DIVIDER"] ~ div:has(> img[alt*="zerodha" i]),
div:has(> img[alt*="sony" i]), div:has(> img[alt*="dolby" i]),
div:has(> img[alt*="accenture" i]), div:has(> img[alt*="zerodha" i]) { display:none !important; }
/* generic: the customer-logo strip + "Join N teams" line */
.text-center:has(img[src*="logos"]), [class*="customer"], [class*="Customer"] { display:none !important; }

/* the theme's globe emoji has no glyph in our Vietnamese font set -> hide it */
.kns-locale-icon { display:none !important; }
.kns-locale, #kc-locale { display:flex; justify-content:flex-end; align-items:center; margin-bottom:4px; }
.kns-locale-select { max-width:170px; }


/* ==========================================================================
   8. DTE SHEETS (sheets.dte.com.vn)
   Its own dark theme is gated behind @media (prefers-color-scheme: dark), so
   it never applied for users on a light OS. Pin the tokens unconditionally.
   ========================================================================== */
:root, :root.dark, html, body {
  --gray-50:  #B9B9C2;  --gray-100: #7E7E89; --gray-200: #55555E;
  --gray-300: #3A3A43;  --gray-400: #26262C; --gray-500: #1C1C21;
  --gray-600: #16161A;  --gray-700: #101013; --gray-800: #0A0A0C;
  --gray-900: #000000;  --gray-950: #000000;

  --bg-app:      #000000;
  --bg-subtle:   #050506;
  --bg-surface:  #0A0A0C;
  --bg-elevated: #101013;
  --bg-muted:    #0A0A0C;
  --border-default: #1C1C21;
  --border-muted:   #141418;
  --border-strong:  #26262C;
  --border-focus:   #E8622C;

  /* brand / primary / accent -> DTE signal orange */
  --primary-50:#2A1206; --primary-100:#3D1A09; --primary-200:#5C260D;
  --primary-300:#8A3A1A; --primary-400:#CF5522; --primary-500:#E8622C;
  --primary-600:#FF8A4C; --primary-700:#FF9D66; --primary-800:#FFB183; --primary-900:#FFC6A3;
  --brand-400:#CF5522; --brand-500:#E8622C; --brand-600:#FF8A4C;
  --accent-400:#CF5522; --accent-500:#E8622C; --accent-600:#FF8A4C;

  --surface-1:#000000; --surface-2:#0A0A0C; --surface-3:#101013;
  --font-2026: 'Be Vietnam Pro', system-ui, sans-serif;
}
/* grid + chrome */
body[class*="dte-scope"] #root { background:#000; color:#fff; }