* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", "Sarabun", Tahoma, sans-serif;
  background: #f0f3f8;
  color: #1c2430;
}
header {
  background: #0f766e;
  color: #fff;
  padding: 14px 28px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.brand-en { font-size: 18px; font-weight: 700; letter-spacing: .4px; }
.brand-th { font-size: 13px; opacity: .85; margin-top: 2px; }
.home-link {
  display: inline-block;
  color: #cdeae6;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}
.home-link:hover { color: #fff; text-decoration: underline; }
.home-link.tpl-link { margin-left: 14px; }

/* ---- Home hub ---- */
.home-main { max-width: 1100px; margin: 36px auto; padding: 0 20px; display: block; }
.home-intro { text-align: center; margin-bottom: 30px; }
.home-intro h1 { font-size: 26px; color: #0f766e; margin: 0 0 8px; }
.home-intro p { color: #6b7686; font-size: 15px; margin: 0; }
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.home-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e1e7f0;
  border-radius: 12px;
  box-shadow: 0 1px 6px rgba(15,118,110,.08);
  padding: 22px 22px 18px;
  text-decoration: none;
  color: inherit;
  transition: .16s;
}
a.home-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(15,118,110,.16);
  border-color: #0d9488;
}
.home-card-icon { font-size: 34px; line-height: 1; margin-bottom: 14px; }
.home-card-body { flex: 1; }
.home-card-title { font-size: 18px; font-weight: 700; color: #0f766e; }
.home-card-en { font-size: 12px; color: #0d9488; font-weight: 600; margin-top: 2px; }
.home-card-desc { font-size: 13px; color: #6b7686; margin-top: 10px; line-height: 1.5; }
.home-card-go {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 700;
  color: #0f766e;
}
.home-card-soon {
  margin-top: 16px;
  font-size: 12px;
  font-weight: 700;
  color: #a0a9b8;
  background: #f0f2f6;
  border-radius: 20px;
  padding: 3px 12px;
  align-self: flex-start;
}
.home-card.disabled { opacity: .72; cursor: default; }

main {
  display: grid;
  grid-template-columns: minmax(330px, 0.78fr) 2fr;
  gap: 20px;
  max-width: 1560px;
  margin: 22px auto;
  padding: 0 20px;
  align-items: start;
}
@media (max-width: 900px) { main { grid-template-columns: 1fr; } }

.panel {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 6px rgba(15,118,110,.08);
  padding: 20px 22px;
}
.panel h1 { font-size: 19px; margin: 0 0 16px; color: #0f766e; }
.panel h1 small { font-size: 13px; font-weight: 400; color: #6b7686; }

fieldset {
  border: 1px solid #e1e7f0;
  border-radius: 8px;
  margin: 0 0 16px;
  padding: 12px 14px 4px;
}
legend { font-weight: 700; color: #2E5395; padding: 0 6px; font-size: 14px; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } }
label { display: flex; flex-direction: column; font-size: 13px; color: #45505f; gap: 4px; margin-bottom: 8px; }
label.full, label.col-span-2 { grid-column: 1 / -1; }
.req { color: #d23; }
.hint { color: #8a94a3; font-size: 11px; font-weight: 400; }

input, select {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid #cdd6e2;
  border-radius: 6px;
  background: #fbfcfe;
}
input:focus, select:focus { outline: none; border-color: #0d9488; box-shadow: 0 0 0 3px rgba(46,117,182,.15); }

.pos-row { display: flex; gap: 6px; align-items: stretch; }
.pos-row select { flex: 1; min-width: 0; }
.mini {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid #0f766e;
  background: #fff;
  color: #0f766e;
  cursor: pointer;
}
.mini:hover { background: #eef3fa; }
.mini.danger { border-color: #f0c5c0; color: #c0271a; }
.mini.danger:hover { background: #fdecea; }
.auto-tag {
  font-size: 10px;
  font-weight: 600;
  color: #0d9488;
  background: #e6f6f3;
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 4px;
}

.actions { display: flex; gap: 10px; margin-top: 6px; }
.btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 7px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: .15s;
}
.btn.primary { background: #0f766e; color: #fff; }
.btn.primary:hover { background: #14b8a6; }
.btn.ghost { background: #fff; color: #0f766e; border-color: #0f766e; }
.btn.ghost:hover { background: #eef3fa; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.msg { margin-top: 12px; font-size: 13px; min-height: 18px; }
.msg.ok { color: #1a7a3c; }
.msg.err { color: #c0271a; }

.tabs { display: flex; gap: 4px; border-bottom: 2px solid #e1e7f0; margin-bottom: 14px; }
.tab {
  font-family: inherit; font-size: 14px; font-weight: 600;
  padding: 8px 14px; border: none; background: none; cursor: pointer;
  color: #6b7686; border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.tab.active { color: #0f766e; border-bottom-color: #0d9488; }
.tab:hover { color: #0f766e; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.preview-frame {
  width: 100%; height: 88vh; min-height: 640px; border: 1px solid #e1e7f0; border-radius: 8px; background: #e8ebf0;
}
.history-list { display: flex; flex-direction: column; gap: 10px; max-height: 70vh; overflow-y: auto; }
.empty { color: #8a94a3; font-size: 14px; }
.card {
  border: 1px solid #e1e7f0;
  border-radius: 8px;
  padding: 11px 13px;
  background: #fbfcfe;
}
.card .name { font-weight: 700; color: #0f766e; font-size: 15px; }
.card .meta { font-size: 12px; color: #6b7686; margin-top: 2px; }
.card .row { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.card a, .card button.link {
  font-size: 12px;
  font-family: inherit;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid #cdd6e2;
  background: #fff;
  color: #2E5395;
  cursor: pointer;
}
.card a:hover, .card button.link:hover { background: #eef3fa; }
.card button.del { color: #c0271a; border-color: #f0c5c0; }
.card button.del:hover { background: #fdecea; }
.card button.link.on { color: #1a7a3c; border-color: #b6e0c4; background: #f1faf4; }

/* ---- Template editor ---- */
.tpl-main {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  max-width: 1360px;
  margin: 22px auto;
  padding: 0 20px;
  align-items: start;
}
@media (max-width: 900px) { .tpl-main { grid-template-columns: 1fr; } }

.tpl-side-actions { margin: 4px 0 14px; }
.tpl-side-actions .btn { width: 100%; }
.tpl-active-note {
  font-size: 13px; font-weight: 600; border-radius: 6px;
  padding: 8px 10px; margin: 4px 0 12px;
}
.tpl-active-note.on { color: #1a7a3c; background: #f1faf4; border: 1px solid #b6e0c4; }
.tpl-active-note.off { color: #6b7686; background: #f4f6fa; border: 1px solid #e1e7f0; }

.version-list { display: flex; flex-direction: column; gap: 10px; max-height: 64vh; overflow-y: auto; }
.card.ver.active { border-color: #b6e0c4; box-shadow: 0 0 0 2px rgba(26,122,60,.12); }
.card.ver.editing { border-color: #0d9488; box-shadow: 0 0 0 2px rgba(46,117,182,.15); }
.card .meta.note { color: #8a7a3a; font-style: italic; margin-top: 4px; }

.tpl-editor-head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.tpl-label {
  flex: 1; font-size: 16px; font-weight: 700; color: #0f766e;
  padding: 8px 10px; border: 1px solid #cdd6e2; border-radius: 6px; background: #fbfcfe;
}
.tpl-editor-actions { display: flex; gap: 8px; }
.tpl-note {
  width: 100%; font-size: 13px; color: #45505f;
  padding: 7px 10px; border: 1px solid #cdd6e2; border-radius: 6px; background: #fbfcfe;
  margin-bottom: 12px;
}

.tpl-toolbar {
  display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
  background: #f4f6fa; border: 1px solid #e1e7f0; border-radius: 8px 8px 0 0;
  padding: 6px 8px;
}
.tpl-toolbar button {
  font-family: inherit; font-size: 13px; min-width: 30px;
  padding: 5px 9px; border: 1px solid #cdd6e2; border-radius: 5px;
  background: #fff; color: #1c2430; cursor: pointer;
}
.tpl-toolbar button:hover { background: #eef3fa; border-color: #0d9488; }
.tb-sep { width: 1px; align-self: stretch; background: #d6dce6; margin: 2px 4px; }

.tpl-token-bar {
  display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap;
  background: #eef3fa; border: 1px solid #e1e7f0; border-top: none;
  padding: 8px 10px;
}
.tpl-token-label { font-size: 12px; font-weight: 700; color: #2E5395; white-space: nowrap; padding-top: 3px; }
.token-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.token-chip {
  font-family: inherit; font-size: 12px; font-weight: 600;
  padding: 3px 9px; border: 1px solid #b9cdec; border-radius: 20px;
  background: #fff; color: #0f766e; cursor: pointer;
}
.token-chip:hover { background: #0f766e; color: #fff; border-color: #0f766e; }

.tpl-doc {
  border: 1px solid #e1e7f0; border-top: none; border-radius: 0 0 8px 8px;
  background: #fff; padding: 28px 34px; min-height: 60vh; max-height: 74vh;
  overflow-y: auto; font-family: "Sarabun", "Segoe UI", Tahoma, sans-serif;
  font-size: 15px; line-height: 1.7; color: #1c2430;
}
.tpl-doc:focus { outline: none; box-shadow: inset 0 0 0 2px rgba(46,117,182,.18); }
.tpl-doc table { border-collapse: collapse; width: 100%; margin: 8px 0; }
.tpl-doc td, .tpl-doc th { border: 1px solid #d6dce6; padding: 6px 8px; }
.tpl-doc img { max-width: 160px; height: auto; }
/* highlight {{tokens}} visually so editors can spot auto-filled fields */
.tpl-doc .val, .tpl-doc .blank { background: #fff6da; border-radius: 3px; padding: 0 2px; }

/* ───── Alert dashboard (probation/contract milestone tracker) ───── */
.alert-badge {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 2px;
  background: #e0392b; color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-align: center; line-height: 18px;
}
.alerts-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-weight: 700; color: #2E5395; padding: 4px 2px 12px; font-size: 14px;
}
.alerts-today { font-weight: 400; color: #8a94a3; font-size: 12px; }
.alerts-body { display: flex; flex-direction: column; gap: 14px; }

.alert-card { border: 1px solid #e1e7f0; border-radius: 10px; padding: 14px 16px; background: #fff; }
.alert-card.warn   { border-top: 3px solid #e6a417; }
.alert-card.danger { border-top: 3px solid #e0392b; }
.alert-card.info   { border-top: 3px solid #0d9488; }
.alert-card-head { display: flex; justify-content: space-between; align-items: center; }
.alert-card-title { font-weight: 700; font-size: 14px; color: #2b3442; }
.alert-card-count {
  min-width: 24px; padding: 1px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 700; text-align: center; background: #eef4f2; color: #45505f;
}
.alert-card.warn   .alert-card-count { background: #fcf2db; color: #9a6b06; }
.alert-card.danger .alert-card-count { background: #fbe3e0; color: #b02a1d; }
.alert-card.info   .alert-card-count { background: #e6f6f3; color: #1f5fa0; }
.alert-card-hint { color: #8a94a3; font-size: 11.5px; margin: 2px 0 8px; }

.alert-list { list-style: none; padding: 0; margin: 0; }
.alert-list li {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 9px 0; border-top: 1px solid #eef1f6;
}
.alert-list li:first-child { border-top: 0; }
.alert-list li.none { color: #aab2bf; font-size: 12.5px; justify-content: flex-start; padding: 6px 0; }
.alert-list .who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.alert-list .who strong { font-size: 13.5px; color: #2b3442; }
.alert-list .who small { font-size: 11px; color: #8a94a3; }
.alert-list .due { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; white-space: nowrap; }
.alert-list .due-date { font-size: 12.5px; color: #45505f; }
.alert-list .due-days { font-size: 11px; color: #8a94a3; font-weight: 600; }
.alert-list li.urgent  .due-days { color: #9a6b06; }
.alert-list li.overdue .due-days { color: #b02a1d; }
.alert-list li.has-act { flex-wrap: wrap; }
.alert-list .act { flex-basis: 100%; display: flex; justify-content: flex-end; margin-top: 2px; }
.alert-list .mini-btn { border: 1.5px solid #0d9488; background: #e9f7f4; color: #0f766e; border-radius: 8px;
  padding: 5px 12px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.alert-list .mini-btn:hover { background: #d5f0eb; }
.alert-list .mini-btn[disabled] { opacity: .6; cursor: default; }
.alert-list .mini-ok { font-size: 11.5px; font-weight: 700; color: #16a34a; text-decoration: none; }
.alert-list .mini-ok:hover { text-decoration: underline; }

/* ============================================================
   Creative Director refinement layer — navy brand, restraint
   Tightens type, spacing, depth & states without touching
   structure or JS. Later-in-cascade so it refines base rules.
   ============================================================ */
:root {
  --cd-navy: #0f766e; --cd-navy-600: #14b8a6; --cd-blue: #0d9488;
  --cd-line: #e4e9f1; --cd-canvas: #eef2f7;
  --cd-shadow-sm: 0 1px 2px rgba(15,118,110,.06);
  --cd-shadow:    0 2px 12px rgba(15,118,110,.07);
  --cd-shadow-lg: 0 12px 32px rgba(15,118,110,.14);
}
body { background: var(--cd-canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Header — solid navy with a refined hairline accent under it */
header { padding: 16px 28px; background: linear-gradient(180deg, #115e59, #0f766e); border-bottom: 3px solid var(--cd-blue); }
.brand-en { letter-spacing: .3px; }

/* Panels — unified radius, soft layered depth, hairline border */
.panel { border: 1px solid var(--cd-line); border-radius: 14px; box-shadow: var(--cd-shadow); padding: 22px 24px; }
.panel h1 { font-size: 20px; letter-spacing: -.01em; }

/* Fieldset — quiet grouped container; legend reads as an eyebrow */
fieldset { border: 1px solid var(--cd-line); border-radius: 10px; padding: 15px 16px 5px; margin-bottom: 14px; background: #fcfdfe; }
legend { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cd-blue); padding: 0 6px; }

/* Labels + inputs — consistent height, hover + focus polish */
label { font-size: 12.5px; color: #45505f; font-weight: 500; }
input, select { min-height: 40px; border: 1px solid #d3dbe6; border-radius: 8px; transition: border-color .15s, box-shadow .15s; }
input:hover, select:hover { border-color: #b6c2d4; }
input:focus, select:focus { border-color: var(--cd-blue); box-shadow: 0 0 0 3px rgba(46,117,182,.16); }
input::placeholder { color: #aab3c0; }

/* Buttons — refined depth + hover lift */
.btn { border-radius: 8px; font-weight: 600; }
.btn.primary { background: var(--cd-navy); box-shadow: var(--cd-shadow-sm); }
.btn.primary:hover { background: var(--cd-navy-600); box-shadow: var(--cd-shadow); }
.btn.ghost { border-color: #cdd6e2; color: var(--cd-navy); }
.btn.ghost:hover { background: #eef3fa; border-color: var(--cd-blue); }

/* Tabs — clearer active state with a faint wash */
.tabs { border-bottom: 1.5px solid var(--cd-line); gap: 2px; }
.tab { font-size: 13.5px; padding: 9px 14px; border-radius: 8px 8px 0 0; }
.tab.active { color: var(--cd-navy); border-bottom-color: var(--cd-blue); background: linear-gradient(180deg, rgba(46,117,182,.07), transparent); }

/* History cards — hairline + hover */
.card { border: 1px solid var(--cd-line); border-radius: 10px; box-shadow: var(--cd-shadow-sm); transition: box-shadow .15s, border-color .15s; }
.card:hover { box-shadow: var(--cd-shadow); border-color: #cfd9e8; }
.card .name { color: var(--cd-navy); }

/* small chips */
.auto-tag { background: #e6f6f3; color: var(--cd-blue); font-weight: 600; }

/* home-card icons — brand SVG line icons replacing emoji (anti-slop) */
.home-card-icon { color: var(--cd-navy); margin-bottom: 14px; line-height: 0; }
.home-card-icon svg { width: 32px; height: 32px; display: block; }
.home-card.disabled .home-card-icon { color: #9aa4b2; }
a.home-card:hover .home-card-icon { color: var(--cd-blue); }
.alert-list li.overdue .due-date { color: #b02a1d; }

/* ============================================================
   ✦ SPACE GOLD THEME ✦ — cosmic dark canvas + metallic gold
   Final cascade layer: restyles shared chrome (header, panels,
   inputs, buttons, tabs, cards, alerts, template editor) across
   every page. Document surfaces (.tpl-doc, preview iframe) stay
   light paper for print fidelity.
   ============================================================ */
:root {
  --gold:#d4af37; --gold-bright:#f3d36b; --gold-deep:#b8902e;
  --gold-grad:linear-gradient(135deg,#f6da77 0%,#d4af37 46%,#b8902e 100%);
  --space-0:#05070f; --space-1:#0a0e1c; --space-2:#0f1730;
  --glass:rgba(18,26,48,.66); --glass-2:rgba(24,33,58,.78);
  --glass-line:rgba(212,175,55,.22); --hair:rgba(255,255,255,.08);
  --txt:#eaeefb; --txt-muted:#98a2bd; --txt-dim:#6b7596;
  /* remap legacy CD vars so older rules inherit the new theme */
  --cd-navy:#d4af37; --cd-navy-600:#f3d36b; --cd-blue:#f3d36b;
  --cd-line:rgba(212,175,55,.22); --cd-canvas:#0a0e1c;
  --cd-shadow-sm:0 1px 2px rgba(0,0,0,.45);
  --cd-shadow:0 6px 22px rgba(0,0,0,.5);
  --cd-shadow-lg:0 18px 48px rgba(0,0,0,.62);
}

body {
  color:var(--txt);
  background-color:var(--space-0);
  background-image:
    radial-gradient(1200px 620px at 82% -12%, rgba(212,175,55,.14), transparent 60%),
    radial-gradient(940px 560px at 6% 6%, rgba(74,98,180,.16), transparent 58%),
    radial-gradient(1000px 720px at 50% 122%, rgba(120,86,200,.13), transparent 60%),
    radial-gradient(2px 2px at 12% 22%, rgba(255,255,255,.75), transparent 40%),
    radial-gradient(2px 2px at 28% 64%, rgba(255,255,255,.5), transparent 40%),
    radial-gradient(1.5px 1.5px at 46% 18%, rgba(255,255,255,.6), transparent 40%),
    radial-gradient(1.5px 1.5px at 67% 52%, rgba(255,255,255,.45), transparent 40%),
    radial-gradient(2px 2px at 84% 34%, rgba(255,255,255,.6), transparent 40%),
    radial-gradient(1px 1px at 92% 76%, rgba(255,255,255,.5), transparent 40%),
    radial-gradient(1px 1px at 18% 88%, rgba(255,255,255,.45), transparent 40%),
    radial-gradient(1.5px 1.5px at 58% 84%, rgba(255,255,255,.4), transparent 40%);
  background-attachment:fixed; background-repeat:no-repeat;
}

/* Header — deep glass bar with a glowing gold underline */
header {
  background:linear-gradient(180deg, rgba(15,23,48,.94), rgba(8,11,24,.94));
  border-bottom:1px solid var(--gold);
  box-shadow:0 2px 24px rgba(0,0,0,.5), 0 1px 0 rgba(212,175,55,.35);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.brand-en { color:#fff; }
.brand-th { color:#c7cee0; opacity:1; }
.home-link { color:var(--gold-bright); }
.home-link:hover { color:#fff; }

/* Home hub (legacy .home-* variant) text on dark */
.home-intro h1 { color:var(--gold-bright); }
.home-intro p { color:var(--txt-muted); }
.home-card { background:var(--glass-2); border-color:var(--hair); box-shadow:var(--cd-shadow-sm); color:var(--txt); }
a.home-card:hover { border-color:var(--glass-line); box-shadow:var(--cd-shadow); }
.home-card-title { color:var(--gold-bright); }
.home-card-en { color:var(--gold); }
.home-card-desc { color:var(--txt-muted); }
.home-card-go { color:var(--gold-bright); }
.home-card-soon { background:rgba(255,255,255,.06); color:var(--txt-dim); }

/* Panels — frosted glass with gold hairline */
.panel {
  background:var(--glass); border:1px solid var(--glass-line);
  box-shadow:var(--cd-shadow); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:var(--txt);
}
.panel h1 { color:var(--gold-bright); }
.panel h1 small { color:var(--txt-muted); }

/* Fieldsets */
fieldset { background:rgba(255,255,255,.025); border:1px solid var(--hair); }
legend { color:var(--gold); }

/* Labels + inputs — dark fields, gold focus ring */
label { color:#c2cae0; }
.hint, .alerts-today { color:var(--txt-dim); }
input, select, .tpl-label, .tpl-note {
  background:rgba(6,10,22,.62); border:1px solid rgba(255,255,255,.13); color:var(--txt);
}
input::placeholder { color:#6b7596; }
input:hover, select:hover { border-color:rgba(212,175,55,.45); }
input:focus, select:focus, .tpl-doc:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,175,55,.22); }
select option { background:#0f1730; color:var(--txt); }

/* Buttons — primary = molten gold; ghost = gold outline */
.btn.primary { background:var(--gold-grad); color:#1a1404; border:none; box-shadow:0 4px 16px rgba(212,175,55,.32); }
.btn.primary:hover { filter:brightness(1.08); box-shadow:0 6px 22px rgba(212,175,55,.44); }
.btn.ghost { background:transparent; color:var(--gold-bright); border-color:var(--gold); }
.btn.ghost:hover { background:rgba(212,175,55,.12); border-color:var(--gold-bright); }
.mini { background:transparent; color:var(--gold-bright); border-color:var(--gold); }
.mini:hover { background:rgba(212,175,55,.12); }
.mini.danger { border-color:#7a2f28; color:#ff8a7a; }
.mini.danger:hover { background:rgba(192,39,26,.18); }
.auto-tag { background:rgba(212,175,55,.16); color:var(--gold-bright); }

/* Tabs */
.tabs { border-bottom-color:var(--hair); }
.tab { color:var(--txt-muted); }
.tab:hover { color:#fff; }
.tab.active { color:var(--gold-bright); border-bottom-color:var(--gold); background:linear-gradient(180deg, rgba(212,175,55,.12), transparent); }

/* History / generic cards */
.card { background:var(--glass-2); border:1px solid var(--hair); box-shadow:var(--cd-shadow-sm); color:var(--txt); }
.card:hover { border-color:var(--glass-line); box-shadow:var(--cd-shadow); }
.card .name { color:var(--gold-bright); }
.card .meta { color:var(--txt-muted); }
.card a, .card button.link { background:rgba(6,10,22,.55); color:var(--gold-bright); border-color:rgba(255,255,255,.14); }
.card a:hover, .card button.link:hover { background:rgba(212,175,55,.12); }
.card button.del { color:#ff8a7a; border-color:#7a2f28; }
.card button.del:hover { background:rgba(192,39,26,.18); }
.card button.link.on { color:#62d496; border-color:#2f6b46; background:rgba(26,122,60,.16); }

.empty { color:var(--txt-dim); }
.preview-frame { background:#11161f; border-color:var(--hair); }
.msg.ok { color:#62d496; }
.msg.err { color:#ff8a7a; }

/* Template editor chrome (the .tpl-doc paper stays white) */
.tpl-active-note.on { color:#62d496; background:rgba(26,122,60,.16); border-color:#2f6b46; }
.tpl-active-note.off { background:rgba(255,255,255,.04); border-color:var(--hair); color:var(--txt-muted); }
.tpl-label { color:var(--gold-bright); }
.tpl-toolbar { background:rgba(6,10,22,.5); border-color:var(--hair); }
.tpl-toolbar button { background:rgba(255,255,255,.04); color:var(--txt); border-color:rgba(255,255,255,.13); }
.tpl-toolbar button:hover { background:rgba(212,175,55,.14); border-color:var(--gold); }
.tb-sep { background:rgba(255,255,255,.13); }
.tpl-token-bar { background:rgba(6,10,22,.42); border-color:var(--hair); }
.tpl-token-label { color:var(--gold); }
.token-chip { background:rgba(6,10,22,.55); color:var(--gold-bright); border-color:rgba(212,175,55,.32); }
.token-chip:hover { background:var(--gold); color:#1a1404; border-color:var(--gold); }
.card .meta.note { color:#cbb06a; }

/* Alert dashboard cards on glass */
.alerts-head { color:var(--gold); }
.alert-card { background:var(--glass-2); border-color:var(--hair); }
.alert-card-title { color:#eaeefb; }
.alert-card-hint { color:var(--txt-dim); }
.alert-card-count { background:rgba(255,255,255,.07); color:#c2cae0; }
.alert-list li { border-top-color:rgba(255,255,255,.07); }
.alert-list .who strong { color:#eaeefb; }
.alert-list .who small, .alert-list .due-date, .alert-list .due-days { color:var(--txt-muted); }
.alert-list li.none { color:var(--txt-dim); }

/* home-card icon color */
.home-card-icon { color:var(--gold); }
a.home-card:hover .home-card-icon { color:var(--gold-bright); }

/* ============================================================
   Per-company page background (lighter) — home + company-scoped
   sub-pages (contracts / certificates / warning) set body[data-co].
   ============================================================ */
body[data-co] { background-attachment:fixed; background-repeat:no-repeat; transition:background-color .4s ease; }
body[data-co="airportels"] { background-color:#221d13;
  background-image:
    radial-gradient(1200px 660px at 82% -14%, rgba(212,175,55,.32), transparent 60%),
    radial-gradient(900px 640px at 8% 116%, rgba(212,175,55,.13), transparent 60%),
    radial-gradient(1100px 760px at 50% 44%, rgba(255,248,230,.05), transparent 72%); }
body[data-co="makesend"] { background-color:#251710;
  background-image:
    radial-gradient(1200px 660px at 82% -14%, rgba(242,106,33,.32), transparent 60%),
    radial-gradient(900px 640px at 8% 116%, rgba(242,106,33,.14), transparent 60%),
    radial-gradient(1100px 760px at 50% 44%, rgba(255,240,230,.05), transparent 72%); }
body[data-co="siripong"] { background-color:#181e28;
  background-image:
    radial-gradient(1200px 660px at 82% -14%, rgba(96,140,200,.32), transparent 60%),
    radial-gradient(900px 640px at 8% 116%, rgba(120,160,210,.13), transparent 60%),
    radial-gradient(1100px 760px at 50% 44%, rgba(235,242,255,.05), transparent 72%); }

/* ============================================================
   📅 ไอคอนปฏิทิน/นาฬิกาในช่อง date/time — ให้เด่นบนพื้นมืด (ไม่กลืน)
   ============================================================ */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator {
  filter: invert(78%) sepia(48%) saturate(560%) hue-rotate(2deg) brightness(1.02);
  opacity: 1; cursor: pointer;
}

/* ปุ่มสลับไลต์/ดาร์กโหมด (ลอยมุมขวาล่าง · โผล่ทุกหน้าในระบบ) */
#themeToggle {
  position: fixed; right: 18px; bottom: 18px; z-index: 9999;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--gold, #d4af37);
  background: var(--glass-2, rgba(24,33,58,.92)); color: var(--gold-bright, #f3d36b);
  box-shadow: 0 4px 18px rgba(0,0,0,.4);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: filter .15s, transform .15s;
}
#themeToggle:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* ============================================================
   ☀️ LIGHT MODE — เปิดด้วยปุ่ม #themeToggle (ตั้ง html[data-theme="light"])
   ค่าเริ่มต้น (ไม่มี attribute) = ธีม SPACE GOLD (ดาร์ก) ด้านบน
   โหมดไลต์ remap ตัวแปรธีมกลับเป็นกรมท่า/ขาว + ทับพื้นผิวที่ hardcode สีมืดไว้
   ============================================================ */
html[data-theme="light"] {
  --gold:#0f766e; --gold-bright:#0f766e; --gold-deep:#16294a;
  --gold-grad:linear-gradient(135deg,#14b8a6 0%,#0f766e 100%);
  --space-0:#eef2f7; --space-1:#f0f3f8; --space-2:#e8ecf4;
  --glass:#ffffff; --glass-2:#ffffff;
  --glass-line:#e1e7f0; --hair:#e4e9f1;
  --txt:#1c2430; --txt-muted:#5a6474; --txt-dim:#8a94a3;
  --cd-navy:#0f766e; --cd-navy-600:#14b8a6; --cd-blue:#0d9488;
  --cd-line:#e1e7f0; --cd-canvas:#eef2f7;
}
html[data-theme="light"] body { color:#1c2430; background-color:#eef2f7; background-image:none; }
html[data-theme="light"] body[data-co] { background-image:none; }
html[data-theme="light"] body[data-co="airportels"] { background-color:#f2f5fa; }
html[data-theme="light"] body[data-co="makesend"]  { background-color:#f7f3ef; }
html[data-theme="light"] body[data-co="siripong"]  { background-color:#eef4f2; }

html[data-theme="light"] header {
  background:linear-gradient(180deg,#115e59,#0f766e);
  border-bottom:3px solid #0d9488; box-shadow:0 2px 10px rgba(15,118,110,.18);
}
html[data-theme="light"] .brand-en { color:#fff; }
html[data-theme="light"] .brand-th { color:#cdeae6; opacity:1; }

html[data-theme="light"] .panel { background:#fff; border-color:#e1e7f0; box-shadow:0 2px 12px rgba(15,118,110,.08); }
html[data-theme="light"] .panel h1 { color:#0f766e; }
html[data-theme="light"] .home-card { background:#fff; border-color:#e1e7f0; }
html[data-theme="light"] .home-intro h1, html[data-theme="light"] .home-card-title { color:#0f766e; }
html[data-theme="light"] .home-card-desc { color:#6b7686; }

html[data-theme="light"] fieldset { background:#fcfdfe; border-color:#e1e7f0; }
html[data-theme="light"] label { color:#45505f; }
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] .tpl-label,
html[data-theme="light"] .tpl-note {
  background:#fbfcfe; border-color:#cdd6e2; color:#1c2430;
}
html[data-theme="light"] input::placeholder { color:#aab3c0; }
html[data-theme="light"] select option { background:#fff; color:#1c2430; }
html[data-theme="light"] input[type=date]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type=time]::-webkit-calendar-picker-indicator { filter:none; }

html[data-theme="light"] .btn.primary { color:#fff; box-shadow:0 2px 8px rgba(15,118,110,.2); }
html[data-theme="light"] .btn.primary:hover { filter:none; }
html[data-theme="light"] .btn.ghost { color:#0f766e; }
html[data-theme="light"] .mini { color:#0f766e; }

html[data-theme="light"] .card { background:#fbfcfe; border-color:#e1e7f0; }
html[data-theme="light"] .card .name { color:#0f766e; }
html[data-theme="light"] .card .meta { color:#6b7686; }
html[data-theme="light"] .card a, html[data-theme="light"] .card button.link { background:#fff; color:#2E5395; border-color:#cdd6e2; }
html[data-theme="light"] .preview-frame { background:#e8ebf0; border-color:#e1e7f0; }

html[data-theme="light"] .tpl-toolbar { background:#f4f6fa; border-color:#e1e7f0; }
html[data-theme="light"] .tpl-toolbar button { background:#fff; color:#1c2430; border-color:#cdd6e2; }
html[data-theme="light"] .tpl-token-bar { background:#eef3fa; border-color:#e1e7f0; }
html[data-theme="light"] .token-chip { background:#fff; color:#0f766e; border-color:#b9cdec; }

html[data-theme="light"] .alerts-head, html[data-theme="light"] .alert-card-title { color:#2b3442; }
html[data-theme="light"] .alert-card, html[data-theme="light"] .me-card { background:#fff; border-color:#e1e7f0; }
html[data-theme="light"] .me-card .who, html[data-theme="light"] .me-round { color:#0f766e; }
html[data-theme="light"] .alert-list .who strong { color:#2b3442; }
html[data-theme="light"] .empty, html[data-theme="light"] .hint { color:#6b7686; }

/* ============================================================
   ✦ REFRESH LAYER (2026-08) — โปร่งขึ้น + เร็วขึ้น (ลด blur/gradient)
   แก้เฉพาะการนำเสนอ (ไม่แตะ HTML/JS/ข้อมูล) · geometry เป็นกลางทั้ง 2 โหมด
   ส่วนสี/พื้นหลัง scope ไว้เฉพาะดาร์กด้วย html:not([data-theme="light"]) เพื่อไม่ทับไลต์โหมด
   ============================================================ */
/* --- geometry / ลำดับความสำคัญ (ใช้ทั้งดาร์ก+ไลต์) --- */
header { -webkit-backdrop-filter:none; backdrop-filter:none; padding:14px 26px; }
.brand-en { font-size:19px; }
.panel { -webkit-backdrop-filter:none; backdrop-filter:none; border-radius:16px; padding:22px 24px; }
.panel h1 { font-size:21px; font-weight:800; letter-spacing:-.01em; margin-bottom:14px; }
input, select { min-height:42px; border-radius:10px; }
.btn { border-radius:11px; padding:11px 18px; }
.card { border-radius:12px; }
#themeToggle { opacity:.85; } #themeToggle:hover { opacity:1; }

/* --- ดาร์กเท่านั้น: พื้นหลังเรียบ/เบา (เลิก starfield + ลด gradient 11→2 ชั้น + เอา fixed ออก → repaint ตอน scroll เบาลง) --- */
html:not([data-theme="light"]) body {
  background-color:#0a0e1a;
  background-image:
    radial-gradient(1100px 560px at 84% -12%, rgba(212,175,55,.10), transparent 62%),
    radial-gradient(900px 520px at 0% 8%, rgba(60,90,170,.12), transparent 60%);
  background-attachment:scroll;
}
html:not([data-theme="light"]) body[data-co="airportels"] { background-color:#14110b; background-image:radial-gradient(1100px 600px at 84% -12%, rgba(212,175,55,.17), transparent 60%); }
html:not([data-theme="light"]) body[data-co="makesend"]  { background-color:#17110b; background-image:radial-gradient(1100px 600px at 84% -12%, rgba(242,106,33,.17), transparent 60%); }
html:not([data-theme="light"]) body[data-co="siripong"]  { background-color:#0e131c; background-image:radial-gradient(1100px 600px at 84% -12%, rgba(96,140,200,.17), transparent 60%); }
/* พื้นผิวทึบโปร่ง (แทน glass+blur) → คมขึ้น + เร็วขึ้น */
html:not([data-theme="light"]) header { background:linear-gradient(180deg,#0f1730,#0a0e1c); }
html:not([data-theme="light"]) .panel { background:#101a2f; border-color:rgba(255,255,255,.09); }
html:not([data-theme="light"]) .card  { background:#131d33; border-color:rgba(255,255,255,.09); }
html:not([data-theme="light"]) .card:hover { border-color:var(--glass-line); }

/* === PeoplePulse HR — ธีมทอง-ขาว (ค่าเริ่มต้น = light) : เปลี่ยนสีรวมทั้งระบบ ไม่แตะโครงสร้าง/ลอจิก === */
html[data-theme="light"]{ --gold:#c99a2e; --gold-bright:#e6b94a; --cd-navy:#c99a2e; --cd-navy-600:#a97f1e; --cd-blue:#c99a2e; }
html[data-theme="light"] body{ background:#faf7ef; }
html[data-theme="light"] header{ background:linear-gradient(135deg,#e8c25a,#c99a2e); }
html[data-theme="light"] .brand-en{ color:#3a2c05; }
html[data-theme="light"] .brand-th{ color:#5a4708; opacity:1; }
html[data-theme="light"] .home-link{ color:#5a4708; }
html[data-theme="light"] .home-link:hover{ color:#1e1a10; }
html[data-theme="light"] .btn.primary{ background:linear-gradient(135deg,#e8c25a,#c99a2e); color:#3a2c05; border:0; }
html[data-theme="light"] .btn.primary:hover{ filter:brightness(1.05); }
html[data-theme="light"] .btn.ghost{ color:#a97f1e; border-color:#e0cf9a; background:#fff; }
html[data-theme="light"] .home-intro h1, html[data-theme="light"] .panel h1, html[data-theme="light"] legend{ color:#a97f1e; }
html[data-theme="light"] a.home-card:hover{ border-color:#e0cf9a; }

/* === PeoplePulse HR — บังคับธีมทอง-ขาวเป็นค่าเริ่มต้นทุกหน้า (แม้หน้าไม่มี co-theme.js) ; ดาร์กเฉพาะเมื่อ data-theme="dark" === */
html:not([data-theme="dark"]) body{ background:#faf7ef!important; background-image:none!important; color:#1e1a10; }
html:not([data-theme="dark"]){ --glass:#ffffff; --glass-2:#ffffff; --glass-line:#efe8d8; --hair:#efe8d8; --txt:#1e1a10; --txt-muted:#6b6350; --txt-dim:#a49a82; --cd-navy:#c99a2e; --cd-navy-600:#a97f1e; --cd-blue:#c99a2e; --gold:#c99a2e; --gold-bright:#e6b94a; }
html:not([data-theme="dark"]) header{ background:linear-gradient(135deg,#e8c25a,#c99a2e)!important; }
html:not([data-theme="dark"]) .brand-en{ color:#3a2c05; }
html:not([data-theme="dark"]) .brand-th{ color:#5a4708; opacity:1; }
html:not([data-theme="dark"]) .home-link{ color:#5a4708; }
html:not([data-theme="dark"]) .home-link:hover{ color:#1e1a10; }
html:not([data-theme="dark"]) .panel{ background:#fff!important; border-color:#efe8d8!important; box-shadow:0 2px 12px rgba(60,48,16,.06)!important; }
html:not([data-theme="dark"]) .card{ background:#fff!important; border-color:#efe8d8!important; color:#1e1a10; }
html:not([data-theme="dark"]) .panel h1, html:not([data-theme="dark"]) .home-intro h1, html:not([data-theme="dark"]) legend{ color:#a97f1e; }
html:not([data-theme="dark"]) fieldset{ background:#fbf8f1; border-color:#efe8d8; }
html:not([data-theme="dark"]) input, html:not([data-theme="dark"]) select, html:not([data-theme="dark"]) textarea{ background:#fff; border-color:#e6ddc9; color:#1e1a10; }
html:not([data-theme="dark"]) .btn.primary{ background:linear-gradient(135deg,#e8c25a,#c99a2e)!important; color:#3a2c05!important; border:0!important; }
html:not([data-theme="dark"]) .btn.ghost{ color:#a97f1e; border-color:#e0cf9a; background:#fff; }
html:not([data-theme="dark"]) a.home-card:hover{ border-color:#e0cf9a; }
html:not([data-theme="dark"]) .home-card{ background:#fff; border-color:#efe8d8; color:#1e1a10; }