/* Tâm Da Family 2.3.3 — Single dark design system.
   Inspired by the reference's low-glare charcoal surfaces, clean Inter type,
   subtle borders and muted semantic color. Loaded LAST on all three pages. */
:root,
html[data-appearance="dark"],
html[data-home-theme="dark"] {
  color-scheme: dark;
  --mm-bg: #111214;
  --mm-sidebar: #101113;
  --mm-panel: #1a1b1e;
  --mm-soft: #232428;
  --mm-elevated: #26272b;
  --mm-line: #2c2e33;
  --mm-ink: #e7e8ea;
  --mm-muted: #a1a3a9;
  --mm-quiet: #797c83;
  --mm-active: #27282c;
  --mm-on-active: #e9eaec;
  --paper: var(--mm-bg) !important;
  --shell: var(--mm-soft) !important;
  --white: var(--mm-panel) !important;
  --ink: var(--mm-ink) !important;
  --muted: var(--mm-muted) !important;
  --muted2: var(--mm-quiet) !important;
  --border: var(--mm-line) !important;
  --accent: #a6a7ad !important;
  --accent-soft: var(--mm-soft) !important;
  --shadow: 0 8px 24px #00000026 !important;
  background: var(--mm-bg);
  color: var(--mm-ink);
  font-family: var(--family-font, Inter, system-ui, sans-serif);
}
html, body { background:var(--mm-bg)!important;color:var(--mm-ink)!important; }
body { background-image:none!important; }
.appearance-picker { display:none!important; }

/* Main navigation: one neutral selected state, no luminous purple halo. */
.sidebar, html[data-appearance="dark"] .sidebar {
  background:var(--mm-sidebar)!important;
  border-right:1px solid var(--mm-line)!important;
  box-shadow:none!important;
}
.topbar, html[data-appearance="dark"] .topbar {
  background:#151619!important;
  border-color:var(--mm-line)!important;
}
.sidebar .nav-link, .sidebar .area-link { color:#9699a1!important;font-size:12.5px;font-weight:450!important; }
.sidebar :is(.nav-link,.area-link).active,
html[data-appearance="dark"] .sidebar :is(.nav-link,.area-link).active {
  background:#27282c!important;
  color:var(--mm-ink)!important;
  border:1px solid #35373b!important;
  border-radius:9px!important;
  box-shadow:none!important;
}
.sidebar :is(.nav-link,.area-link).active span,
html[data-appearance="dark"] .sidebar :is(.nav-link,.area-link).active span { color:var(--mm-ink)!important; }
.sidebar :is(.nav-link,.area-link).active:before { display:none!important; }
.sidebar :is(.nav-link,.area-link):hover:not(.active) { background:#1b1c20!important; }
.brand-symbol { background:#242528!important;color:#d2d4d8!important;border-color:#35363a!important; }
.side-caption,.brand-copy small,.breadcrumbs,.eyebrow {color:var(--mm-quiet)!important;}

/* Calm cards: flat surfaces and nearly invisible borders, not shiny panels. */
.hero, html[data-appearance="dark"] .hero,
:is(.stat-card,.area-card,.product-card,.place-card,.history-list,.empty-state),
html[data-appearance="dark"] :is(.stat-card,.area-card,.product-card,.place-card,.td-family section) {
  background:var(--mm-panel)!important;
  border:1px solid var(--mm-line)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
:is(.stat-card,.area-card,.product-card,.place-card):hover {
  transform:none!important;
  background:#1e1f22!important;
  border-color:#3a3b41!important;
  box-shadow:none!important;
}
.hero { border-radius:13px!important; }
.stat-card,.area-card,.product-card,.place-card { border-radius:12px!important; }
.stat-icon,.stat-card.danger .stat-icon {color:#91949c!important;opacity:.72;}
.stat-card.danger .stat-num,.stat-num {color:#e8e9eb!important;}
.product-media,.product-media img,.drawer-image,.drawer-image img {background:#222429!important;}
.product-footer,.history-line,.card {border-color:var(--mm-line)!important;}
.history-symbol,.drawer-stat,.banner-muted,.notice {background:var(--mm-soft)!important;color:var(--mm-muted)!important;}
.stat-label,.area-card small,.product-info small,.history-main small,.product-footer,.section-heading .sub {color:var(--mm-muted)!important;}

/* Typeface: remove the feeling that every label is shouting. */
:where(.headline,.hero h2,.section-heading h2,.drawer-title,.modal h3,.td-family h1,.td-family h2,.td-family h3) {
  color:var(--mm-ink)!important;
  font-family:var(--family-font, Inter, system-ui, sans-serif)!important;
  font-weight:500!important;
  letter-spacing:-.025em!important;
}
.headline {font-size:clamp(25px,2.4vw,31px)!important;line-height:1.3!important;}
.section-heading h2 {font-size:19px!important;}
.hero h2 {font-size:25px!important;}
.stat-num {font-size:29px!important;font-weight:500!important;letter-spacing:-.03em!important;}
:where(p,.subline,.intro,.muted) {line-height:1.65;}
.product-info strong,.history-main strong {font-weight:500!important;}

/* Functional controls: no bright-white buttons or glossy gradients. */
:is(.round-button,.search-wrap,.drawer-action,.neutral-btn,.secondary-btn),
html[data-appearance="dark"] :is(.round-button,.secondary-btn,.neutral-btn,.td-family .secondary) {
  background:var(--mm-soft)!important;
  color:var(--mm-ink)!important;
  border:1px solid #34363b!important;
  box-shadow:none!important;
}
.primary-btn,.family-entry,
html[data-appearance="dark"] .primary-btn,
html[data-appearance="dark"] .td-family button:not(.secondary):not(.danger),
html[data-appearance="dark"] .family-entry {
  background:#303238!important;
  color:#e9eaec!important;
  border:1px solid #43464c!important;
  box-shadow:none!important;
}
html[data-appearance="dark"] :is(.primary-btn,.family-entry) span {color:#e9eaec!important;}
:is(.round-button,.primary-btn,.family-entry,.drawer-action):hover:not(:disabled) {
  background:#393b42!important; border-color:#50535b!important;
}
.search-wrap input {background:transparent!important;border:none!important;outline:none!important;}
:is(input,textarea,select),.form-field :is(input,textarea,select),
.td-family :is(input,textarea,select) {
  background:#202125!important;
  border:1px solid #393a40!important;
  color:var(--mm-ink)!important;
}
:is(input,textarea,select)::placeholder {color:#82858d!important;opacity:1;}
:is(input,textarea,select):focus-visible,
button:focus-visible {outline:2px solid #777d89!important;outline-offset:2px;}

/* Drawers, dialogs, login and notification panels also use dark surfaces. */
:is(.drawer,.modal,.login-panel,.notifications-panel,.notice-panel),
html[data-appearance="dark"] :is(.drawer,.modal,.notifications-panel,.notice-panel) {
  background:var(--mm-panel)!important;
  color:var(--mm-ink)!important;
  border-color:var(--mm-line)!important;
  box-shadow:0 12px 36px #0006!important;
}
.drawer-action.edit-item-action {background:#303238!important;color:#e9eaec!important;border-color:#44464b!important;}
.drawer-stat {background:#222428!important;}
.drawer-photo-edit,.drawer-close,.modal-close {background:#2c2e33!important;color:#dcdde0!important;border-color:#404148!important;}
.modal p,.login-panel p,.drawer-stat small {color:var(--mm-muted)!important;}
.login-screen,.login-art {background:#111214!important;}
.login-panel {background:#18191c!important;}
.login-house {color:#383a3f!important;}
.login-art p,.login-panel h1 {color:#e4e5e7!important;}
.login-caption,.login-eyebrow {color:var(--mm-quiet)!important;}
.mobile-tabs,.mobile-nav {background:#17181b!important;border-color:var(--mm-line)!important;}
.mobile-tab,.mobile-tab small {color:#8c8e96!important;}
.mobile-tab.active,.mobile-tab.active small {color:#e6e7e9!important;}
.notice-entry {border-color:var(--mm-line)!important;}
.notice-entry small,.notice-empty {color:var(--mm-muted)!important;}

/* Semantic colors are recognisable, but tinted instead of neon. */
:is(.pill--low,.pill--late,.tag--rejected) {--state-bg:#38282d!important;--state-ink:#e9a2ac!important;--state-stroke:#584048!important;}
:is(.pill--ok,.tag--received) {--state-bg:#26372e!important;--state-ink:#a5d4b4!important;--state-stroke:#3a5643!important;}
:is(.pill--need,.tag--approved) {--state-bg:#302a3d!important;--state-ink:#cfb9e5!important;--state-stroke:#50415f!important;}
:is(.pill--shipping,.pill--due,.tag--ordered,.tag--changes) {--state-bg:#3b3428!important;--state-ink:#dfc48f!important;--state-stroke:#57492f!important;}
:is(.pill--ordered,.tag--pending) {--state-bg:#293342!important;--state-ink:#afc5de!important;--state-stroke:#40536b!important;}
.pill[class*="pill--"],.td-family .tag[class*="tag--"] {font-weight:500!important;letter-spacing:0;}

/* Keep colorful categories, with muted ink for lower eye strain. */
.room-icon--kitchen{--room-ink:#dfad83!important;--room-surface:#332923!important;}
.room-icon--box{--room-ink:#9bbfc2!important;--room-surface:#243235!important;}
.room-icon--bath{--room-ink:#a3bddd!important;--room-surface:#283343!important;}
.room-icon--work{--room-ink:#baa9d9!important;--room-surface:#302a3d!important;}
.room-icon--bed{--room-ink:#d8a8bc!important;--room-surface:#362a31!important;}
.room-icon--sofa{--room-ink:#dcc095!important;--room-surface:#3a3227!important;}
.room-icon--leaf{--room-ink:#a5cbb4!important;--room-surface:#27382f!important;}
.room-icon--pets{--room-ink:#d9a5a3!important;--room-surface:#382a2b!important;}

/* Family purchase workflow. */
.td-family section {background:var(--mm-panel)!important;}
.td-family .pending,.td-family #notice:not(:empty),.td-family .approval {background:var(--mm-soft)!important;border-color:var(--mm-line)!important;color:var(--mm-ink)!important;}
.td-family .tag {color:var(--mm-muted);background:var(--mm-soft);border-color:var(--mm-line);}
.td-family .secondary,.td-family .danger {background:var(--mm-soft)!important;color:var(--mm-ink)!important;border-color:var(--mm-line)!important;}
.td-family a {color:#c7c8cf!important;}

/* Studio editor chrome: fixed dark even when editing a draft from an older theme. */
.studio-shell,.studio-top,.panel,.workspace,.studio-shell .workspace,
.login-wrap,.login-card {color:var(--mm-ink)!important;background:var(--mm-bg)!important;}
.studio-top,.panel {background:#17181b!important;border-color:var(--mm-line)!important;}
.studio-shell .workspace {background:#111214!important;}
.studio-logo small,.hint,.section-title,.footer-hint,.fake-url,.message {color:var(--mm-muted)!important;}
.studio-shell :is(h1,h2,strong) {font-family:var(--family-font, Inter, system-ui, sans-serif)!important;}
.studio-logo .mark {background:#2c2e32!important;color:#e2e3e5!important;}
.studio-shell :is(.component,.blockrow,.info-box,.alert,.device-note,.button-row),
.login-card {background:#202125!important;color:var(--mm-ink)!important;border-color:#35363c!important;}
.studio-shell :is(.component.selected,.component:hover,.tabbar button.active) {background:#2d2f34!important;color:#e7e8e9!important;border-color:#50525b!important;}
.studio-shell :is(.action,.blockrow button,.button-row button,.history-item button,.segmented button),
.login-card .action {background:#26272b!important;color:#d7d9dc!important;border:1px solid #3a3c42!important;box-shadow:none!important;}
.studio-shell .action.primary,.login-card .action.primary {background:#36383d!important;color:#f1f2f3!important;border-color:#484a52!important;}
.studio-shell :is(input,textarea,select),.login-card input {background:#222429!important;color:#e8e9eb!important;border-color:#3e4046!important;}
.studio-shell .segmented,.browser-frame {background:#1b1c20!important;border-color:#37393e!important;box-shadow:none!important;}
.studio-shell .browser-frame iframe {background:#111214!important;}
.studio-shell .property label,.studio-shell .component small,.studio-shell .tabbar button {color:#a8abb2!important;}
.studio-shell :is(.tabbar,.history-item){border-color:var(--mm-line)!important;}
.login-wrap{background:#111214!important;}
.login-card h1 {font-family:var(--family-font, Inter, system-ui, sans-serif)!important;font-size:29px;font-weight:500;}
.layout-editor-shell {background:#111214!important;color:var(--mm-ink)!important;}

@media (max-width:600px) {
 .headline {font-size:25px!important;}
 .hero h2 {font-size:22px!important;}
 .stat-num {font-size:27px!important;}
 .sidebar .nav-link,.sidebar .area-link {font-size:12px;}
}
@media (prefers-reduced-motion:reduce) {
 *,*::before,*::after {animation-duration:.01ms!important;transition-duration:.01ms!important;}
}