@import url("/assets/prompt.css?v=1.2.25");

/* TEEDD360 v1.0.4 — shared typography + navigation tokens */
:root{
  --td-font:"Prompt","Noto Sans Thai",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --td-fs-xs:12px;
  --td-fs-sm:13px;
  --td-fs-md:14px;
  --td-fs-lg:16px;
  --td-fs-xl:20px;
  --td-fs-2xl:28px;
  --td-line:1.55;
}
html,body,button,input,select,textarea{font-family:var(--td-font)!important}
body{font-size:var(--td-fs-md);line-height:1.55}
/* Keep micro labels readable, never sub-10px in production UI */
.eyebrow,.nav-section,.version-pill,.nav-badge,.phase-card>span,.tag-row span,.section-label,.status-version,.inspector-status,.mode-pill{font-size:11px!important}
/* Standard navigation / controls */
.workspace-tabs a,.app-nav a,.app-nav button,.back-link,.btn,.dash-btn{font-size:13px!important}
.workspace-topbar .topbar-left strong,.app-brand strong{font-size:15px!important}
.workspace-topbar .topbar-left small,.app-brand small{font-size:12px!important}
.workspace-hero p,.phase-card small,.panel p,.panel li,.status-note{font-size:13px!important}
.panel h3,.phase-card>strong{font-size:15px!important}
/* Skin */
.skin-panel-head strong{font-size:16px!important}.skin-panel-head small{font-size:12px!important}
.skin-section-label{font-size:11px!important}.skin-component span{font-size:13px!important}
.skin-layer-item,.skin-empty,.skin-save-state{font-size:12px!important}
.skin-inspector-empty{font-size:13px!important}.skin-inspector-empty strong{font-size:17px!important}
.skin-form label{font-size:12px!important}.skin-form input,.skin-form select{font-size:13px!important}
.skin-inspector-actions button{font-size:12px!important}.skin-foundation-note{font-size:11px!important}
/* Dashboard */
.app-topbar>div:first-child strong{font-size:17px!important}
.dashboard-hero p,.section-head p,.project-card small{font-size:13px!important}
/* Editor */
.brand-copy strong{font-size:20px!important}.brand-copy small{font-size:12px!important}
.panel-title strong{font-size:16px!important}.panel-title small{font-size:12px!important}
.btn.small{font-size:13px!important}
.hint{font-size:13px!important}
.empty-state{font-size:13px!important}.empty-state strong{font-size:16px!important}
.inspector-form label{font-size:12px!important}.inspector-form input,.inspector-form select{font-size:13px!important}
.add-element-menu strong{font-size:13px!important}.add-element-menu small{font-size:11px!important}
.sidebar-footer-btn{font-size:13px!important}
/* Explicit project navigation inside Tour Editor */
.projects-back-btn{height:36px;display:inline-flex;align-items:center;gap:6px;padding:0 11px;border:1px solid #1a4d79;border-radius:9px;color:#bfe7ff;text-decoration:none;background:rgba(4,27,56,.68);white-space:nowrap;font-size:13px;font-weight:600}
.projects-back-btn:hover{border-color:#2d8cd2;background:#082b52;color:#fff}
.projects-footer-link{text-decoration:none}
/* Scene creation buttons */
.scene-upload-actions{flex-wrap:wrap}
.scene-upload-actions .btn{min-height:40px}
#createEmptySceneBtn{border-color:#1f67a0;color:#cbeaff;background:rgba(9,41,78,.72)}
#createEmptySceneBtn:hover{background:#0c3768;border-color:#2da6e9}
@media(max-width:1100px){.projects-back-btn span{display:none}.projects-back-btn{width:38px;padding:0;justify-content:center}}

/* ==========================================================================
   v1.0.7 — Deep Navy + Light Theme Design Tokens
   ========================================================================== */
:root,
:root[data-theme="dark"],
:root[data-theme="graphite"]{
  --td-bg:#010817;
  --td-bg-2:#021126;
  --td-panel:#05162e;
  --td-panel-2:#082044;
  --td-panel-3:#0a2854;
  --td-line:#164b7f;
  --td-line-soft:rgba(56,146,214,.22);
  --td-text:#eff8ff;
  --td-muted:#8fb0ca;
  --td-muted-2:#587792;
  --td-accent:#10d9ff;
  --td-accent-2:#1592ff;
  --td-accent-3:#1fe0d0;
  --td-danger:#ff6f83;
  --td-shadow:0 18px 54px rgba(0,0,0,.34);
  --td-grid-line:rgba(22,148,230,.14);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --td-bg:#eef7fc;
  --td-bg-2:#f8fcff;
  --td-panel:#ffffff;
  --td-panel-2:#eef7ff;
  --td-panel-3:#e0f0fb;
  --td-line:#a9c9df;
  --td-line-soft:rgba(49,110,151,.18);
  --td-text:#09213a;
  --td-muted:#58758d;
  --td-muted-2:#8299aa;
  --td-accent:#007fc7;
  --td-accent-2:#00a8d7;
  --td-accent-3:#008f89;
  --td-danger:#c84558;
  --td-shadow:0 18px 54px rgba(21,65,93,.13);
  --td-grid-line:rgba(36,125,180,.12);
  color-scheme:light;
}
html,body{background:var(--td-bg);color:var(--td-text)}
.theme-toggle{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 12px;border:1px solid var(--td-line);border-radius:10px;background:color-mix(in srgb,var(--td-panel) 88%,transparent);color:var(--td-text);cursor:pointer}
.theme-toggle:hover{border-color:var(--td-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--td-accent) 12%,transparent)}
.theme-toggle [data-theme-icon]{font-size:16px;color:var(--td-accent)}
.theme-toggle [data-theme-label]{font-size:12px;font-weight:650}
:root[data-theme="light"] img.app-brand-logo,
:root[data-theme="light"] img.brand-logo{filter:drop-shadow(0 7px 16px rgba(0,108,168,.12))}


/* ==========================================================================
   v1.1.7 — Graphite Black Theme
   Dark neutral workspace for long editing sessions.
   ========================================================================== */
:root[data-theme="graphite"]{
  --td-bg:#07080a;
  --td-bg-2:#0d0f12;
  --td-panel:#121519;
  --td-panel-2:#171b20;
  --td-panel-3:#1d2329;
  --td-line:#343b43;
  --td-line-soft:rgba(138,154,168,.16);
  --td-text:#f1f5f7;
  --td-muted:#a2adb5;
  --td-muted-2:#707b84;
  --td-accent:#16c8dc;
  --td-accent-2:#4ca7ff;
  --td-accent-3:#39d8b6;
  --td-danger:#ff7183;
  --td-shadow:0 20px 58px rgba(0,0,0,.52);
  --td-grid-line:rgba(121,144,163,.10);
  color-scheme:dark;
}
:root[data-theme="graphite"] body{
  background:
    radial-gradient(circle at 46% -8%,rgba(22,200,220,.075),transparent 34%),
    linear-gradient(180deg,#090b0e 0%,#07080a 55%,#050607 100%);
}
:root[data-theme="graphite"] .theme-toggle{
  background:linear-gradient(180deg,#181c21,#111419);
  border-color:#3b444d;
}
:root[data-theme="graphite"] .theme-toggle:hover{
  border-color:#16c8dc;
  box-shadow:0 0 0 2px rgba(22,200,220,.10);
}

/* v1.2.0 shared chrome consistency */
:root[data-theme="graphite"] body{background:#0b0d10;color:var(--td-text,#edf0f3)}
:root[data-theme="graphite"] body::before{opacity:.03}
:root[data-theme="graphite"] .workspace-topbar,:root[data-theme="graphite"] .workspace-tabs,
:root[data-theme="graphite"] .workspace-hero>div,:root[data-theme="graphite"] .panel{background:#15191e;border-color:#343b44}