/* ตั้งค่า + ธีมมืด */
.st-wrap { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: start; }
@media (max-width: 800px) { .st-wrap { grid-template-columns: 1fr; } }
.st-tabs { display: flex; flex-direction: column; gap: 4px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 8px; position: sticky; top: 0; }
.st-tab { display: flex; align-items: center; gap: 9px; border: 0; background: none; padding: 9px 12px; border-radius: 9px; font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer; text-align: left; }
.st-tab .ms { font-size: 19px; color: var(--text-3); } .st-tab:hover { background: var(--bg); } .st-tab.on { background: var(--primary-l); color: var(--primary); font-weight: 600; } .st-tab.on .ms { color: var(--primary); }
.st-body { min-width: 0; max-width: 820px; }
.st-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 2px; border-top: 1px solid var(--border); font-size: 13px; cursor: default; }
.data-card-head + .st-row { border-top: 0; }
.st-row > span:first-child { display: flex; flex-direction: column; min-width: 0; } .st-row b { font-weight: 500; } .st-row small { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.st-seg { display: inline-flex; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; flex: none; }
.st-seg button { border: 0; background: none; padding: 5px 14px; border-radius: 7px; font: inherit; font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.st-seg button.on { background: var(--primary); color: #fff; }
.st-accents { display: inline-flex; gap: 8px; flex: none; }
.st-accents button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 2px var(--card); } .st-accents button.on { border-color: var(--text); }
.st-switch { position: relative; width: 40px; height: 22px; flex: none; } .st-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.st-switch i { position: absolute; inset: 0; border-radius: 999px; background: #c9ced8; transition: .2s; } .st-switch i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: .2s; }
.st-switch input:checked + i { background: var(--primary); } .st-switch input:checked + i::after { left: 20px; }
.st-note { font-size: 11.5px; color: var(--text-3); margin: 2px 4px 14px; }
.st-p { font-size: 13px; color: var(--text-2); margin: 4px 0 8px; } .st-p code { background: var(--bg); padding: 1px 6px; border-radius: 5px; }
.st-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.st-warn { display: flex; align-items: center; gap: 8px; background: #fff7e6; border: 1px solid #f5d79a; color: #8a5a00; border-radius: 10px; padding: 9px 12px; font-size: 12px; margin-top: 8px; } .st-warn .ms { font-size: 18px; }
.st-ok { display: flex; align-items: center; gap: 10px; background: #ecfdf5; border: 1px solid #a7e8cb; color: #046c4e; border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-top: 12px; word-break: break-all; } .st-ok small { display: block; font-size: 11px; opacity: .85; }
.st-prog { height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; margin: 12px 0 6px; } .st-prog i { display: block; height: 100%; width: 40%; background: var(--primary); animation: stSlide 1.1s ease-in-out infinite; }
@keyframes stSlide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
.st-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.st-logo-prev { width: 72px; height: 72px; border-radius: 14px; background: var(--bg); border: 1px solid var(--border); display: grid; place-items: center; font-size: 28px; flex: none; }
.st-logo-prev.has-pic, .sb-logo.has-pic { background-size: cover; background-position: center; color: transparent; }
.field-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.st-disk { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 10px; } .st-disk b { font-size: 22px; display: block; } .st-disk small { font-size: 11.5px; color: var(--text-3); }
.st-bar { height: 10px; border-radius: 6px; background: var(--border); overflow: hidden; margin-bottom: 4px; } .st-bar i { display: block; height: 100%; background: var(--primary-grad); border-radius: 6px; } .st-bar.sm { height: 7px; margin: 0; }
body.no-cal-notify .tb-btn[title="การแจ้งเตือน"] .tb-count { display: none !important; }

/* ── ธีมมืด ── */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #12141a; --card: #1b1e26; --border: #2a2e39; --border-2: #343947;
    --text: #e8eaf0; --text-2: #c5cad6; --text-3: #98a0b2; --text-4: #6c7488;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.35); --shadow-hover: 0 10px 26px -8px rgba(0,0,0,.6);
}
[data-theme="dark"] .content::-webkit-scrollbar-thumb { background: #3a3f4d; }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { color: var(--text); }
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--text-4); }
[data-theme="dark"] .field-box, [data-theme="dark"] .tool-search, [data-theme="dark"] .tool-select, [data-theme="dark"] .topbar .search,
[data-theme="dark"] .st-seg, [data-theme="dark"] .ch-search, [data-theme="dark"] .ch-comp textarea { background: #232731 !important; border-color: var(--border) !important; color: var(--text) !important; }
[data-theme="dark"] .data-table th { background: #20242d; color: var(--text-2); }
[data-theme="dark"] .data-table td, [data-theme="dark"] .data-table th { border-color: var(--border); }
[data-theme="dark"] .data-table tbody tr:hover { background: #222632; }
[data-theme="dark"] .btn-ghost { background: #232731; color: var(--text-2); border-color: var(--border); }
[data-theme="dark"] .user-menu, [data-theme="dark"] .nt-pop, [data-theme="dark"] .user-modal-card { background: var(--card); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .user-menu-item:hover, [data-theme="dark"] .m-sub-item:hover { background: #232731; }
[data-theme="dark"] .ch-main { background: #161920; } [data-theme="dark"] .ch-b { background: #262a35; color: var(--text); }
[data-theme="dark"] .ch-b.mine { background: var(--primary-l); border-color: transparent; }
[data-theme="dark"] .ch-ci:hover, [data-theme="dark"] .ch-pu:hover, [data-theme="dark"] .pa-user:hover, [data-theme="dark"] .pa-proj:hover { background: #232731; }
[data-theme="dark"] .ch-pend { background: #1b1e26; } [data-theme="dark"] .ch-emo { background: var(--card); } [data-theme="dark"] .ch-emo-g button:hover { background: #2a2e39; }
[data-theme="dark"] .st-warn { background: #3a2f12; border-color: #6b5420; color: #f3d38a; } [data-theme="dark"] .st-ok { background: #0f3326; border-color: #1f6a4d; color: #7ee2b8; }
[data-theme="dark"] .st-switch i { background: #475066; }
[data-theme="dark"] .st-accents button { box-shadow: inset 0 0 0 2px var(--card); }

/* Logfile */
.au-sub { display: block; font-size: 10.5px; color: var(--text-3); }
.au-detail { font-size: 12px; color: var(--text-2); word-break: break-word; }
tr.au-fail td { background: rgba(239,68,68,.06); }
.au-pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px; font-size: 12.5px; color: var(--text-2); }
.page-meta { display: flex; gap: 8px; }