:root {
--rail-w: 190px;
--rail-w-collapsed: 60px;
--font-ui: var(--font);
--rail-bg: rgba(14, 14, 22, 0.72);
--glass: rgba(22, 22, 31, 0.55);
--glass-brd: var(--hairline);
--glow: 0 0 0 1px var(--glass-brd), var(--shadow-2);
--rail-anim: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
--topbar-h: 52px;
}


:root[data-theme="light"] {
--rail-bg: rgba(255, 255, 255, 0.82);
--glass: rgba(255, 255, 255, 0.72);
}



.hud-top { position: relative; z-index: 45; }

body.in-console .hud-actions { display: none; }


.rail {
position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
width: var(--rail-w);
display: flex; flex-direction: column; align-items: stretch;
padding: 10px 8px; gap: 0;
background: var(--rail-bg);
backdrop-filter: blur(18px) saturate(1.2);
-webkit-backdrop-filter: blur(18px) saturate(1.2);
border-right: 1px solid var(--glass-brd);
}
.rail-top { flex: 0 0 auto; }
.rail-nav {
flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
display: flex; flex-direction: column; gap: 4px; padding: 6px 0;
}
.rail-nav::-webkit-scrollbar { width: 0; }
.rail-nav { scrollbar-width: none; }

.rail-group { display: flex; flex-direction: column; }
.rail-group.foot { margin-top: auto; }
.rail-grp-lbl {
display: flex; align-items: center; width: 100%;
background: transparent; border: 0; cursor: pointer;
font-family: var(--font-ui); font-size: var(--mm-fs-13); font-weight: 600; letter-spacing: 0.2px;
color: var(--text2); text-align: left; white-space: nowrap;
padding: 8px 8px 8px 5px; border-radius: var(--mm-r-btn); user-select: none;
transition: color var(--rail-anim), background var(--rail-anim);
}
.rail-grp-lbl::before {
content: ""; flex: 0 0 auto; margin-right: 6px;
width: 0; height: 0; border-left: 4px solid currentColor;
border-top: 4px solid transparent; border-bottom: 4px solid transparent;
opacity: 0.55; transition: transform var(--rail-anim);
}
.rail-grp-ico { flex: 0 0 auto; display: flex; align-items: center; margin-right: 9px; opacity: 0.8; }
.rail-grp-ico svg { width: 17px; height: 17px; }
.rail-group.open > .rail-grp-lbl::before { transform: rotate(90deg); }
.rail-grp-lbl:hover { color: var(--text); background: var(--surface-2); }
.rail-group.has-active:not(.open) > .rail-grp-lbl { color: var(--accent); }
.rail-group.foot .rail-grp-lbl { border-top: 1px solid var(--glass-brd); border-radius: 0; margin-top: 6px; padding-top: 12px; }

.rail-grp-items {
display: flex; flex-direction: column; gap: 2px;
max-height: 0; overflow: hidden; opacity: 0;
transition: max-height var(--rail-anim), opacity var(--rail-anim);
}
.rail-group.open > .rail-grp-items { max-height: 340px; opacity: 1; padding: 2px 0 4px; }
.rail-brand {
height: 42px; display: flex; align-items: center; justify-content: center; gap: 9px;
color: var(--accent); font-size: var(--mm-fs-20);
}



.rail-brand .brand-mark {
display: flex; flex: none;
filter: drop-shadow(0 0 8px rgba(255, 107, 43, 0.55));
}


.rail-brand-text {
font-family: var(--font); font-size: var(--mm-fs-14); font-weight: 700; letter-spacing: 2.5px;
color: var(--text); white-space: nowrap; filter: none;
}
.rail-brand-text i { font-style: normal; font-weight: 400; color: var(--text3); }
.rail-item {
position: relative; background: transparent; border: 0; cursor: pointer;
color: var(--text3); border-radius: var(--mm-r-btn); padding: 7px 8px 7px 16px;
display: flex; flex-direction: row; align-items: center; gap: 10px;
transition: color var(--rail-anim), background var(--rail-anim);
}
.rail-item .rail-ico { flex: 0 0 auto; line-height: 0; display: flex; align-items: center; justify-content: center; }
.rail-item .rail-ico svg { width: 19px; height: 19px; }
.rail-item .rail-lbl {
font-family: var(--font-ui); font-size: var(--mm-fs-14); letter-spacing: 0.1px; opacity: 0.95;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-item:hover { color: var(--text); background: var(--surface-2); }
.rail-item.active { color: var(--accent); background: var(--accent-wash-2); }
.rail-item.active::before {
content: ""; position: absolute; left: -8px; top: 18%; bottom: 18%;
width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
box-shadow: 0 0 10px var(--accent);
}

.hud-top .navbar-brain { position: static; z-index: auto; gap: 8px; }
.hud-top .navbar-brain .graph-select { max-width: 200px; }


.navbar-brain .brain-select-ico { color: var(--accent); font-size: var(--mm-fs-16); }
@media (max-width: 860px) {
.hud-top .navbar-brain .graph-stats { display: none; }
}


.js-lbl { display: block; font-size: var(--mm-fs-13); color: var(--text2); margin: 12px 0 5px; font-family: var(--font); }
.js-lbl .dim { color: var(--green); }
.js-input {
width: 100%; background: var(--sunken); border: 1px solid var(--glass-brd);
color: var(--text); border-radius: var(--mm-r-btn); padding: 9px 11px; font-size: var(--mm-fs-16); margin-bottom: 4px;
}
.js-input:focus { outline: none; border-color: var(--accent); }
.js-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; font-size: var(--mm-fs-16); }
.js-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }




.gcard-btn.ghost { background: transparent; border-color: var(--glass-brd); color: var(--text2); }
.gcard-btn.ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--text2); }
.gcard-btn { width: auto; padding: 9px 16px; }
.gcard .gcard-btn { width: 100%; }
.js-actions .gcard-btn { width: auto; }


.prov-list { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.prov-card {
background: var(--glass); border: 1px solid var(--glass-brd); border-radius: var(--mm-r-field);
padding: 14px 16px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
transition: border-color 0.18s;
}
.prov-card.main { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-line); }
.prov-head { display: flex; align-items: center; gap: 12px; }
.prov-shield { color: var(--text3); flex: 0 0 auto; display: flex; }
.prov-shield svg { width: 22px; height: 22px; }
.prov-shield.on { color: var(--green); filter: drop-shadow(0 0 6px rgba(34,197,94,0.45)); }
.prov-info { flex: 1; min-width: 0; }
.prov-name { font-family: var(--font); font-weight: 700; font-size: var(--mm-fs-16); }
.prov-kind { font-size: var(--mm-fs-12); padding: 2px 6px; border-radius: var(--mm-r-chip); background: var(--accent2-wash-2); color: var(--accent2-ink); text-transform: uppercase; letter-spacing: 0.5px; margin-left: 6px; vertical-align: middle; }
.prov-status { font-family: var(--font); font-size: var(--mm-fs-13); color: var(--text3); margin-top: 3px; }
.prov-status.on { color: var(--green); }
.prov-badge { font-family: var(--font); font-size: var(--mm-fs-12); letter-spacing: 1px; color: var(--accent); border: 1px solid var(--accent); border-radius: var(--mm-r-chip); padding: 2px 6px; }
.prov-action { display: flex; gap: 8px; margin-top: 12px; }
.prov-action .js-input { margin-bottom: 0; flex: 1; }
.prov-action .gcard-btn { width: auto; flex: 0 0 auto; }
.prov-note { font-size: var(--mm-fs-13); color: var(--text3); margin-top: 8px; opacity: 0.7; }


.prov-note.warn { color: var(--yellow); opacity: 1; }
.prov-note.warn code { background: var(--bg3); padding: 1px 5px; border-radius: var(--mm-r-chip); font-size: var(--mm-fs-13); }

.prov-steps { font-size: var(--mm-fs-13); color: var(--text2); margin-top: 8px; line-height: 1.75; }
.prov-steps code { background: var(--bg3); padding: 1px 6px; border-radius: var(--mm-r-chip);
font-size: var(--mm-fs-13); word-break: break-all; }

.prov-auth { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--glass-brd); }
.prov-auth-title { font-family: var(--font); font-size: var(--mm-fs-12); letter-spacing: 1px; text-transform: uppercase; color: var(--text3); margin-bottom: 8px; }



.prov-auth-note { font-size: var(--mm-fs-13); line-height: 1.6; color: var(--text2); margin-bottom: 10px; }
.prov-auth-opt { display: flex; gap: 8px; align-items: flex-start; font-size: var(--mm-fs-13); color: var(--text2); line-height: 1.5; margin-bottom: 6px; cursor: pointer; }
.prov-auth-opt input { margin-top: 3px; flex: 0 0 auto; }
.prov-auth-opt b { color: var(--text); font-weight: 600; }
.prov-auth-opt i { color: var(--text3); }
.prov-auth-warn { font-size: var(--mm-fs-13); line-height: 1.55; color: var(--warn-ink); background: var(--warn-wash); border: 1px solid var(--warn-line); border-radius: var(--mm-r-chip); padding: 8px 10px; margin-top: 8px; }


.aux-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.aux-chip {
background: var(--surface-2); border: 1px solid var(--glass-brd); color: var(--text2);
border-radius: var(--mm-r-btn); padding: 8px 14px; font-family: var(--font); font-size: var(--mm-fs-14); cursor: pointer; transition: all 0.15s;
}
.aux-chip:hover { color: var(--text); border-color: var(--text2); }
.aux-chip.sel { background: var(--accent-wash-2); border-color: var(--accent); color: var(--accent); }



.aux-card { max-width: 660px; }




.gcard.aux-card:hover { transform: none; border-color: var(--glass-brd); }
.aux-now {
display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
margin-top: 12px; padding: 12px 14px;
background: var(--surface-1); border: 1px solid var(--glass-brd); border-radius: var(--mm-r-btn);
}
.aux-now-txt { min-width: 0; }
.aux-now-model { font-family: var(--font); font-size: var(--mm-fs-16); color: var(--accent);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aux-now-prov { font-size: var(--mm-fs-13); color: var(--text3); margin-top: 3px; }
.aux-now-act { display: flex; gap: 8px; flex-shrink: 0; }
.aux-card .aux-now-act .gcard-btn { width: auto; }
.aux-warn { color: var(--yellow); }

.aux-note { margin-top: 10px; font-size: var(--mm-fs-13); line-height: 1.5; color: var(--text3); }
.aux-note.warn { color: var(--yellow); }



.seg { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 12px; padding: 3px;
background: var(--surface-1); border: 1px solid var(--glass-brd); border-radius: var(--mm-r-btn); }
.seg-btn { flex: 1 1 90px; display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 8px 10px; border: 1px solid transparent; border-radius: var(--mm-r-btn); cursor: pointer;
background: transparent; color: var(--text2); font-family: inherit; transition: all 0.15s; }
.seg-btn:hover { background: var(--surface-2); color: var(--text); }
.seg-btn.sel { background: var(--accent-wash-2); border-color: var(--accent); color: var(--accent); }
.seg-lb { font-size: var(--mm-fs-14); font-weight: 600; }
.seg-d { font-size: var(--mm-fs-12); opacity: 0.7; white-space: nowrap; }
@media (max-width: 640px) {
.seg-btn { flex-basis: 70px; padding: 7px 6px; }
.seg-d { display: none; }
}


.mp-overlay {
display: none; position: fixed; inset: 0; z-index: 200;
background: var(--scrim); backdrop-filter: blur(6px);
align-items: center; justify-content: center;
}
.mp-overlay.open { display: flex; animation: fadeIn 0.15s ease; }
.mp-box {
width: 760px; max-width: 94vw; max-height: 86vh; display: flex; flex-direction: column;
background: var(--bg2); border: 1px solid var(--glass-brd); border-radius: var(--mm-r-field); box-shadow: var(--glow);
}
.mp-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 20px 12px; }
.mp-title { font-family: var(--font); font-weight: 700; font-size: var(--mm-fs-16); letter-spacing: 1px; }
.mp-sub { font-size: var(--mm-fs-14); color: var(--text2); margin-top: 3px; }
.mp-x { background: var(--bg3); border: 1px solid var(--border); color: var(--text2); width: 30px; height: 30px; border-radius: var(--mm-r-chip); cursor: pointer; }
.mp-filter { margin: 0 20px 12px; background: var(--sunken); border: 1px solid var(--glass-brd); color: var(--text); padding: 10px 12px; border-radius: var(--mm-r-btn); font-size: var(--mm-fs-16); }
.mp-filter:focus { outline: none; border-color: var(--accent); }
.mp-body { display: grid; grid-template-columns: 260px 1fr; gap: 0; flex: 1; overflow: hidden; border-top: 1px solid var(--glass-brd); }
.mp-provs { border-right: 1px solid var(--glass-brd); overflow-y: auto; padding: 8px; }
.mp-prov { display: block; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; color: var(--text2); border-radius: var(--mm-r-btn); padding: 9px 11px; cursor: pointer; margin-bottom: 2px; }
.mp-prov:hover { background: var(--surface-2); color: var(--text); }
.mp-prov.active { background: var(--accent2-wash); border-color: var(--accent2-line); color: var(--text); }
.mp-prov-l { font-size: var(--mm-fs-16); font-weight: 600; }
.mp-prov-c { font-family: var(--font); font-size: var(--mm-fs-12); color: var(--text3); margin-top: 2px; }
.mp-models { overflow-y: auto; padding: 8px 12px; }
.mp-model { display: block; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; color: var(--text); border-radius: var(--mm-r-btn); padding: 11px 12px; cursor: pointer; font-family: var(--font); font-size: var(--mm-fs-16); }
.mp-model:hover { background: var(--surface-2); }
.mp-model.sel { background: var(--accent-wash-2); border-color: var(--accent); }

.mp-bac, .mb-bac { font-size: var(--mm-fs-badge); letter-spacing: .3px; padding: 1px 7px; border-radius: var(--mm-r-pill); margin-left: 6px;
border: 1px solid var(--glass-brd); color: var(--text3); white-space: nowrap; vertical-align: middle; }
.mp-bac-nang, .mb-bac-nang { color: var(--accent2); border-color: var(--accent2-line); background: var(--accent2-wash); }
.mp-bac-vua, .mb-bac-vua { color: var(--text2); }
.mp-bac-nhe, .mb-bac-nhe { color: var(--ok, #3a3); }
.mp-cur { float: right; font-size: var(--mm-fs-12); color: var(--accent2); letter-spacing: 1px; }
.mp-empty { color: var(--text3); font-size: var(--mm-fs-14); padding: 16px; }
.mp-foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid var(--glass-brd); }
.mp-foot .mp-note { max-height: 84px; overflow-y: auto; }
.mp-note { font-size: var(--mm-fs-13); color: var(--text3); }
.mp-btn { background: var(--bg3); border: 1px solid var(--border); color: var(--text); padding: 9px 18px; border-radius: var(--mm-r-btn); cursor: pointer; font-size: var(--mm-fs-16); margin-left: 8px; }
.mp-btn.primary { background: var(--accent-solid); border-color: var(--accent-solid); color: var(--on-accent); font-weight: 600; }
.mp-btn.primary:disabled { opacity: 0.4; cursor: not-allowed; }


.mp-btn.danger { border-color: var(--danger-ink, #b3261e); color: var(--danger-ink, #b3261e);
font-weight: 600; }
.mp-btn.danger:hover { background: color-mix(in srgb, var(--danger-ink, #b3261e) 12%, transparent); }
@media (max-width: 860px) {
.mp-body { grid-template-columns: 1fr; }



.mp-provs { border-right: 0; border-bottom: 1px solid var(--glass-brd); max-height: 46vh; }
}


.sk-group { margin-bottom: 22px; }
.sk-group-head { font-family: var(--font); font-size: var(--mm-fs-16); color: var(--accent2); margin-bottom: 10px; font-weight: 700; }
.sk-group-head .dim { color: var(--text3); font-weight: 400; margin-left: 6px; }

.rail-spacer { flex: 1; }
.rail-lang {
display: flex; align-items: center; gap: 6px; padding: 8px 6px 0;
border-top: 1px solid var(--glass-brd); color: var(--text3);
}
.rail-lang svg { width: 14px; height: 14px; flex: 0 0 auto; }
.rail-lang-sel {
flex: 1; min-width: 0; background: transparent; color: var(--text2);
border: 1px solid var(--glass-brd); border-radius: var(--mm-r-chip);
font-family: var(--font-ui); font-size: var(--mm-fs-12); padding: 4px 6px; cursor: pointer;
}
.rail-lang-sel:hover { color: var(--text); background: var(--surface-2); }
.rail-lang-sel option { background: var(--panel-solid); color: var(--text); }
.rail-foot {
font-family: var(--font); line-height: 1.35; padding: 8px 6px 0;
border-top: 1px solid var(--glass-brd);
display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px;
}
.rail-collapse-btn {
order: 2; display: flex; align-items: center; justify-content: center;
width: 32px; height: 28px; padding: 0; flex: 0 0 auto;
background: transparent; border: 1px solid var(--glass-brd); border-radius: var(--mm-r-chip);
color: var(--text3); cursor: pointer;
transition: color var(--rail-anim), background var(--rail-anim);
}
.rail-collapse-btn:hover { color: var(--text); background: var(--surface-2); }
.rail-collapse-btn svg { width: 18px; height: 18px; }
.rail-foot .rf-meta { order: 1; text-align: left; min-width: 0; }
.rail-foot .rf-ver { font-size: var(--mm-fs-12); color: var(--text2); }
.rail-foot .rf-author { display: block; margin-top: 2px; font-size: 8.5px; color: var(--accent); text-decoration: none; }
.rail-foot .rf-author:hover { text-decoration: underline; }


.rail-tip {
position: fixed; z-index: 200; pointer-events: none;
background: var(--panel-solid); color: var(--text);
border: 1px solid var(--glass-brd); border-radius: var(--mm-r-chip);
padding: 5px 10px; font-size: var(--mm-fs-13); font-family: var(--font-ui); white-space: nowrap;
box-shadow: var(--shadow-2);
opacity: 0; transform: translateY(-50%) translateX(-4px);
transition: opacity 0.1s, transform 0.1s;
}
.rail-tip.show { opacity: 1; transform: translateY(-50%) translateX(0); }


@media (min-width: 861px) {
body.rail-collapsed { --rail-w: var(--rail-w-collapsed); }
.rail.collapsed .rail-grp-lbl { display: none; }
.rail.collapsed .rail-grp-items {
max-height: none; opacity: 1; overflow: visible; padding: 0;
}
.rail.collapsed .rail-group + .rail-group > .rail-grp-items {
border-top: 1px solid var(--glass-brd); margin-top: 5px; padding-top: 5px;
}
.rail.collapsed .rail-item { justify-content: center; padding: 9px 0; gap: 0; }
.rail.collapsed .rail-item .rail-lbl { display: none; }
.rail.collapsed .rail-brand-text { display: none; }
.rail.collapsed .rf-meta { display: none; }
.rail.collapsed .rail-lang { display: none; }
.rail.collapsed .rail-foot { justify-content: center; }
}


body.has-rail .hud { margin-left: var(--rail-w); width: calc(100% - var(--rail-w)); }


.cview {
position: fixed; top: var(--topbar-h); right: 0; bottom: 0; left: var(--rail-w); z-index: 40;
display: flex; flex-direction: column;
background:
radial-gradient(1200px 600px at 80% -10%, var(--accent2-wash), transparent 60%),
radial-gradient(900px 500px at -10% 110%, var(--accent-wash), transparent 60%),
var(--bg);
overflow: hidden;
}
.cview-head {
display: flex; align-items: center; gap: 12px;
padding: 16px 26px; border-bottom: 1px solid var(--glass-brd);
}
.cview-title { font-family: var(--font); font-size: var(--mm-fs-20); font-weight: 700; letter-spacing: 1px; }
.cview-title .ico { color: var(--accent); margin-right: 8px; }
.cview-sub { font-size: var(--mm-fs-14); color: var(--text2); }
.cview-body { flex: 1; overflow-y: auto; padding: 24px 26px; }


.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.gcard {
background: var(--glass); border: 1px solid var(--glass-brd); border-radius: var(--mm-r-field);
padding: 18px; box-shadow: var(--glow);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
transition: transform 0.18s, border-color 0.18s;
}
.gcard:hover { transform: translateY(-2px); border-color: var(--accent-line); }
.gcard.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 8px 30px rgba(255, 107, 43, 0.18); }
.gcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gcard-name { font-family: var(--font); font-weight: 700; font-size: var(--mm-fs-16); }
.gcard-tag {
font-family: var(--font); font-size: var(--mm-fs-12); padding: 3px 7px; border-radius: var(--mm-r-chip);
background: var(--accent2-wash-2); color: var(--accent2-ink); text-transform: uppercase; letter-spacing: 0.5px;
}
.gcard-meta { margin-top: 8px; font-size: var(--mm-fs-14); color: var(--text2); }



.tk-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.tk-row {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 10px 12px; border-radius: var(--mm-r-btn); background: var(--surface-2);
border: 1px solid var(--glass-brd);
}
.tk-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tk-meta { font-size: var(--mm-fs-12); color: var(--text2); }
.tk-row .gcard-btn { margin-top: 0; width: auto; padding: 6px 12px; font-size: var(--mm-fs-13); flex: none; }
.tk-new {
margin-top: 14px; padding: 12px; border-radius: var(--mm-r-btn);
background: var(--accent2-wash-2); border: 1px solid var(--accent-solid);
}
.tk-new-hd { font-weight: 700; font-size: var(--mm-fs-14); margin-bottom: 8px; }
.tk-code {
display: block; padding: 10px; border-radius: var(--mm-r-chip); background: var(--surface);
border: 1px solid var(--glass-brd); font-size: var(--mm-fs-13); word-break: break-all;
user-select: all;
}


.tk-docs {
display: flex; gap: 12px; flex-wrap: wrap;
margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--surface-3);
}
.tk-docs a, .tk-doclink { font-size: var(--mm-fs-13); color: var(--link-ink); text-decoration: none; }
.tk-docs a:hover, .tk-doclink:hover { text-decoration: underline; }
.gcard-btn {
margin-top: 14px; width: 100%; padding: 9px; border-radius: var(--mm-r-btn); cursor: pointer;
background: var(--surface-2); border: 1px solid var(--glass-brd); color: var(--text);
font-family: var(--font); font-size: var(--mm-fs-14); transition: all 0.18s;
}
.gcard-btn:hover { background: var(--accent-solid); border-color: var(--accent-solid); color: var(--on-accent); }


.gcard-btn:disabled { cursor: not-allowed; }
.gcard-btn:disabled:hover { background: var(--surface-2); border-color: var(--glass-brd); color: var(--text); }
.gcard-btn.ghost:disabled:hover { background: transparent; color: var(--text2); }
.gcard.current .gcard-btn { background: var(--accent-wash-2); border-color: var(--accent); color: var(--accent); }

.cview-section { margin-bottom: 28px; }
.cview-section h3 {
font-family: var(--font); font-size: var(--mm-fs-14); letter-spacing: 1px; text-transform: uppercase;
color: var(--text2); margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}


.settings-page { width: min(100%, 960px); margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.cview-body:has(> .settings-tabs-page) { padding-top: 0; }
.settings-tabs-page { width: 100%; margin: 0; min-width: 0; }
.vt-create-menu { position: fixed; margin: 0; padding: 5px; width: 204px; max-width: calc(100vw - 16px); border: 1px solid var(--border); border-radius: var(--mm-r-btn); background: var(--bg); color: var(--text); box-shadow: var(--shadow-1); }
.vt-create-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px; border: 0; border-radius: var(--mm-r-chip); background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.vt-create-menu button:hover, .vt-create-menu button:focus-visible { background: var(--surface-2); }
.ne-location-side { display: flex; flex-direction: column; flex: 0 0 280px; min-height: 0; max-width: 75vw; border-right: 1px solid var(--border); padding-right: 10px; }
.ne-location-side > button { align-self: flex-end; }
@media (max-width: 700px) { .fm-edit > .ne-location-side { position: absolute; inset: 0 auto 0 0; z-index: 5; width: 280px; background: var(--bg); } }
.settings-tab-content > .settings-page,
.settings-tab-content > .cl-wrap { margin-left: 0; margin-right: 0; }
.settings-tabs {
display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin;
position: sticky; top: 0; z-index: 3; padding: 6px 0;
margin-bottom: 14px; background: var(--bg); border-bottom: 1px solid var(--glass-brd);
}
.settings-tabs [role="tab"] {
flex: 0 0 auto; border: 1px solid transparent; border-radius: var(--mm-r-btn);
padding: 10px 16px; background: transparent; color: var(--text2);
font: inherit; font-size: var(--mm-fs-14); font-weight: 600; cursor: pointer; white-space: nowrap;
}
.settings-tabs [role="tab"]:hover { background: var(--glass); color: var(--text); }
.settings-tabs [aria-selected="true"] { color: var(--accent-ink); background: var(--accent-wash-2); border-color: var(--accent-line); }
.settings-tabs [role="tab"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.settings-tab-content { min-width: 0; }
.settings-tab-content[data-settings-tab="general"] [data-settings-section="voice"],
.settings-tab-content[data-settings-tab="voice"] [data-settings-section="general"] { display: none !important; }
@media (max-width: 700px) {
.settings-tabs { margin-bottom: 12px; }
.settings-tabs [role="tab"] { padding: 10px 12px; font-size: var(--mm-fs-13); }
}
.settings-group {
border: 1px solid var(--glass-brd); border-radius: var(--mm-r-field); overflow: hidden;
background: var(--glass); box-shadow: var(--shadow-1);
}
.settings-group > summary {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 16px 18px; cursor: pointer; list-style: none; user-select: none;
}
.settings-group > summary::-webkit-details-marker { display: none; }
.settings-group > summary span:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.settings-group > summary b { font-family: var(--font); font-size: var(--mm-fs-16); color: var(--text); }
.settings-group > summary small { font-size: var(--mm-fs-13); color: var(--text3); font-weight: 400; }
.settings-caret { color: var(--text3); font-size: var(--mm-fs-20); transition: transform .18s ease; }
.settings-group:not([open]) .settings-caret { transform: rotate(-90deg); }
.settings-group-body { padding: 0 18px 18px; border-top: 1px solid var(--hairline); }
.settings-status-grid {
display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px;
margin: 0 -18px 16px; background: var(--surface-2);
}
.settings-status-grid > div { min-width: 0; padding: 13px 16px; background: var(--bg2); }
.settings-status-grid span { display: block; color: var(--text3); font-size: var(--mm-fs-12); text-transform: uppercase; letter-spacing: .7px; }
.settings-status-grid b { display: block; margin-top: 5px; color: var(--text); font-size: var(--mm-fs-13); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-links { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.settings-links button {
display: grid; grid-template-columns: 24px 1fr; grid-template-rows: auto auto; column-gap: 7px;
padding: 11px; text-align: left; color: var(--text); background: var(--surface-1);
border: 1px solid var(--glass-brd); border-radius: var(--mm-r-btn); cursor: pointer;
}
.settings-links button:hover { border-color: var(--accent-line); background: var(--accent-wash); }
.settings-links button > span { grid-row: 1 / 3; align-self: center; color: var(--accent); }
.settings-links button b { font-size: var(--mm-fs-13); }
.settings-links button small { color: var(--text3); font-size: var(--mm-fs-12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-two-col { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding-top: 16px; }





.pet-page-body { display: flex; flex-direction: column; gap: 12px; padding-top: 16px;
width: min(100%, 620px); }
.settings-card { min-width: 0; padding: 14px; border: 1px solid var(--glass-brd); border-radius: var(--mm-r-btn); background: var(--surface-1); }
.settings-card.compact { max-width: 520px; margin-top: 16px; }






.share-search { width: 100%; box-sizing: border-box; margin-top: 12px; padding: 9px 12px;
border: 1px solid var(--border); border-radius: var(--mm-r-btn); background: var(--bg2);
color: var(--text-hi); font-size: var(--mm-fs-16); }
.share-search:focus { outline: none; border-color: var(--accent-line); }
.share-count { margin-top: 6px; min-height: 1.2em; font-size: var(--mm-fs-13); color: var(--text3); }
.share-empty { padding: 14px 2px; color: var(--text2); }
.share-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.share-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
justify-content: space-between; padding: 12px 14px; border: 1px solid var(--glass-brd);
border-radius: var(--mm-r-btn); background: var(--surface-2); }
.share-info { min-width: 0; flex: 1 1 260px; }
.share-name { font-weight: 600; color: var(--text-hi); overflow-wrap: anywhere; }
.share-path { font-size: var(--mm-fs-12); color: var(--text2); margin-top: 2px; overflow-wrap: anywhere; }
.share-url { display: inline-block; margin-top: 6px; font-size: var(--mm-fs-12); color: var(--accent);
overflow-wrap: anywhere; }
.share-acts { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 900px) {
.share-path, .share-url, .share-count { font-size: var(--mm-fs-14); }
.share-acts .gcard-btn { font-size: var(--mm-fs-16); padding: 8px 12px; }
}
.settings-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.settings-card p { margin: 8px 0 0; color: var(--text2); font-size: var(--mm-fs-13); line-height: 1.5; }
.settings-card .gcard-btn { width: auto; }
.cview-placeholder {
display: flex; flex-direction: column; align-items: center; justify-content: center;
height: 100%; gap: 10px; color: var(--text3); text-align: center;
}
.cview-placeholder .ph-ico { font-size: 44px; opacity: 0.5; }


@media (prefers-reduced-motion: no-preference) {
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.26s; }
}
.cview[hidden] { display: none !important; }
[x-cloak] { display: none !important; }


.run-drawer { z-index: 430; }



.hud-top .brand,
.hud-top .studio-open-btn,
.hud-top #settingsBtn { display: none; }

.cview-body .stab-panel { max-width: 1100px; margin: 0; }






.cview-body.cview-flush { padding: 0; overflow: hidden; }
.code-page { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.code-panel { flex: 1; min-height: 0; display: flex; }
.code-empty {
flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px; text-align: center; color: var(--text2); padding: 24px;
}
.code-empty svg { color: var(--text3); }
.code-dim { font-size: var(--mm-fs-13); color: var(--text3); max-width: 460px; line-height: 1.6; }
.code-dim code, .term-note code {
background: var(--surface-2); padding: 1px 5px; border-radius: var(--mm-r-chip); font-family: var(--mono);
}


.term-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; }


.term-tabs {
display: flex; align-items: center; gap: 4px; flex: 0 0 auto;
padding: 8px 12px 0; overflow-x: auto; scrollbar-width: thin;
}
.term-tab {
display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
padding: 5px 5px 5px 10px; border-radius: var(--mm-r-chip) var(--mm-r-chip) 0 0; cursor: pointer;
border: 1px solid var(--glass-brd); border-bottom: none;
background: var(--surface-1); color: var(--text2);
font-size: var(--mm-fs-12); font-weight: 600; white-space: nowrap; user-select: none;
}
.term-tab:hover { color: var(--text); border-color: var(--accent-line); }
.term-tab.act { background: var(--surface-2); color: var(--text); border-color: var(--accent-line); }
.term-tab svg { width: 13px; height: 13px; flex: 0 0 auto; }
.term-tab-x {
display: inline-flex; align-items: center; justify-content: center;
border: none; background: none; color: var(--text3); cursor: pointer;
padding: 2px; border-radius: var(--mm-r-chip);
}
.term-tab-x:hover { color: var(--red); background: var(--surface-1); }
.term-tab-x svg { width: 11px; height: 11px; }
.term-tab-add {
display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
width: 26px; height: 26px; border-radius: var(--mm-r-chip); cursor: pointer;
border: 1px dashed var(--glass-brd); background: none; color: var(--text2);
}
.term-tab-add:hover { color: var(--text); border-color: var(--accent-line); }
.term-tab-add:disabled { opacity: 0.45; cursor: not-allowed; }
.term-tab-add svg { width: 14px; height: 14px; }
.term-bar {
display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
padding: 8px 16px; border-bottom: 1px solid var(--glass-brd);
font-size: var(--mm-fs-13); color: var(--text2);
}
.term-sp { flex: 1; }
.term-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text3); flex: 0 0 auto; }
.term-dot.ok { background: var(--green); box-shadow: 0 0 8px var(--green); }
.term-dot.err { background: var(--red); }
.term-dot.off { background: var(--text3); }
.term-st { font-weight: 600; color: var(--text); }

.term-cwd {
display: inline-flex; align-items: center; gap: 5px; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-family: var(--mono); font-size: var(--mm-fs-12); color: var(--text3);
}
.term-cwd svg { width: 13px; height: 13px; flex: 0 0 auto; }
.term-btn {
display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
padding: 5px 10px; border-radius: var(--mm-r-chip); cursor: pointer;
border: 1px solid var(--glass-brd); background: var(--surface-1);
color: var(--text2); font-family: var(--font-ui); font-size: var(--mm-fs-12); font-weight: 600;
}
.term-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--accent-line); }
.term-btn svg { width: 13px; height: 13px; }
.term-note {
flex: 0 0 auto; padding: 8px 16px; font-size: var(--mm-fs-13); line-height: 1.55;
color: var(--text2); background: var(--accent-wash); border-bottom: 1px solid var(--glass-brd);
}
.term-note svg { width: 14px; height: 14px; vertical-align: -2px; }

.term-host { flex: 1; min-height: 0; min-width: 0; padding: 8px 4px 8px 12px; overflow: hidden; }
.term-host .xterm { height: 100%; }
.term-host .xterm-viewport { scrollbar-width: thin; }


.term-hosts { flex: 1; min-height: 0; min-width: 0; position: relative; }
.term-hosts .term-host { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.term-hosts .term-host:not(.act) { visibility: hidden; }

@media (max-width: 860px) {
.term-bar { padding: 7px 10px; gap: 8px; flex-wrap: wrap; }
.term-cwd { display: none; }
.term-tabs { padding: 6px 8px 0; }
.term-host { padding: 6px 2px 6px 8px; }
}





.nav-toggle-btn, .new-chat-btn { display: none; }

@media (max-width: 860px) {
:root {
--rail-w: 0px;
--topbar-h: calc(46px + env(safe-area-inset-top, 0px));
}


.nav-toggle-btn, .new-chat-btn { display: inline-flex; }

.hud-top { position: fixed; top: 0; left: 0; right: 0; height: 46px; z-index: 55;
background: var(--bg2); border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: 6px; padding: 0 8px; }
.hud-top-left, .hud-top-right { display: none; }
.hud-top .brand, .hud-top .navbar-brain,
.hud-top #themeToggle, .hud-top #studioOpenBtn,
.hud-top #settingsBtn, .hud-top #ttsToggle, .hud-top #resetBtn { display: none; }
.hud-center-title { display: none; }
.hud-top #mbOpen { display: inline-flex; margin-left: auto; margin-right: auto; }
.hud-top .notification-trigger {
flex: 0 0 34px; width: 34px; min-width: 34px; height: 34px; padding: 0;
}
.hud-top .notification-trigger-label { display: none; }
.hud-top .notification-badge {
position: absolute; top: -4px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px;
}
.notification-panel {
top: calc(52px + env(safe-area-inset-top, 0px)); right: 8px;
width: calc(100vw - 16px);
max-height: min(72dvh, calc(100dvh - 76px - env(safe-area-inset-bottom, 0px)));
border-radius: var(--mm-r-field);
}
.notification-shade { background: var(--scrim); backdrop-filter: blur(2px); }
.noti-head { padding: 14px 13px 12px; }
.noti-list { padding: 7px; }
.hud-top #mbPop { position: fixed; top: calc(50px + env(safe-area-inset-top, 0px)); bottom: auto; left: 50%; transform: translateX(-50%);
width: min(340px, 92vw); z-index: 200; max-height: 70vh; }
.model-bar { display: none; }
#jv-sess-btn { display: none; }


.rail {
top: 0; left: 0; bottom: 0; right: auto; width: min(280px, 82vw); height: 100vh;
height: 100dvh;
flex-direction: column;
padding: max(10px, env(safe-area-inset-top, 0px)) 8px max(10px, env(safe-area-inset-bottom, 0px));
gap: 4px;
border-top: 0; border-right: 1px solid var(--glass-brd);
transform: translateX(-100%); transition: transform .22s ease; z-index: 60; overflow-y: auto;
}
body.nav-open .rail { transform: translateX(0); box-shadow: 8px 0 40px var(--shadow-veil); }
.rail-top, .rail-foot { display: flex; }
.rail-nav { flex-direction: column; overflow-x: hidden; overflow-y: auto; gap: 2px; padding: 0; }
.rail-group, .rail-grp-items { display: block; }
.rail-grp-lbl { display: flex; }
.rail-item { flex: none; flex-direction: row; gap: 10px; padding: 9px 10px; border-radius: var(--mm-r-btn); }
.rail-item .rail-lbl { font-size: var(--mm-fs-13); }
.rail-item.active::before { left: 0; right: auto; top: 15%; bottom: 15%; width: 3px; height: auto; }


.rail-sys { margin-top: 8px; padding: 10px 6px 4px; border-top: 1px solid var(--glass-brd);
display: flex; flex-direction: column; gap: 10px; }
.rail-sys-lbl { font-size: var(--mm-fs-12); letter-spacing: 1px; text-transform: uppercase; color: var(--text3); }
.rail-sys .navbar-brain { position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rail-sys .graph-select { flex: 1 1 auto; min-width: 0; max-width: 100%; }
.rail-sys-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rail-sys-btns .hud-icon-btn { display: inline-flex; }

.rail-sys-btns #hudLaunchBtn { width: auto; padding: 0 12px; }
.rail-sys-btns #hudLaunchBtn .install-app-label { display: inline; }


.nav-backdrop { position: fixed; inset: 0; background: var(--scrim); z-index: 55; }
.nav-backdrop[hidden] { display: none; }
body.nav-open .nav-backdrop { display: block; }


body.has-rail .hud {
margin-left: 0; width: 100%;
height: 100vh; height: 100dvh;
}
.cview { left: 0; bottom: 0; }
.cview-body { padding: 16px 14px; }
.cgrid { grid-template-columns: 1fr; }
.settings-page { width: 100%; gap: 10px; }
.settings-group > summary { padding: 14px; }
.settings-group-body { padding: 0 14px 14px; }
.settings-status-grid { grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0 -14px 14px; }
.settings-links { grid-template-columns: repeat(2,minmax(0,1fr)); }
.settings-two-col { grid-template-columns: 1fr; padding-top: 14px; }


html, body { width: 100%; height: 100%; overflow: hidden; }
body.in-console .hud-body { visibility: hidden; }
.hud {
height: 100vh; height: 100dvh;
grid-template-rows: minmax(0, 1fr) auto auto;
padding-top: calc(46px + env(safe-area-inset-top, 0px));
}
.hud-top {
height: calc(46px + env(safe-area-inset-top, 0px));
padding-top: env(safe-area-inset-top, 0px);
}
.hud-body { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.hud-left { display: none; }
.hud-center {
flex: 0 0 auto;
height: 30vh;
height: clamp(210px, 31dvh, 300px);
min-height: 0;
}



body.brain-max .hud-center { flex: 1 1 auto; height: auto; min-height: 0; }
body.brain-max .hud-right { display: none; }



body.brain-max .bg-strip { display: none; }
.hud-right {
flex: 1 1 auto; min-height: 0; overflow: hidden;
padding: 8px 10px 4px;
border-top: 1px solid var(--border);
}
.hud-right .panel-label {
flex: 0 0 auto;
min-height: 22px;
margin-bottom: 4px;
font-size: var(--mm-fs-badge);
letter-spacing: 1.2px;




justify-content: flex-start;
gap: 8px;
}


.hud-right .panel-label .proj-chip-host:not(:empty) { flex: 1 0 100%; order: 3; }


.hud-right .transcript {
flex: 1 1 auto;
min-height: 0;
max-height: none;
padding-right: 2px;
}


.concept-label .cl-name { font-size: var(--mm-fs-badge); letter-spacing: 1.2px; }
.concept-label .cl-meta { font-size: 8px; letter-spacing: .5px; margin-top: 0; }



.concept-label { max-width: 32vw; }
.concept-label .cl-name, .concept-label .cl-meta {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.orb-overlay { bottom: 40px; }
.orb-state { font-size: var(--mm-fs-12); letter-spacing: 2px; }
.orb-interim {
max-width: calc(100vw - 28px);
margin-top: 3px;
min-height: 14px;
font-size: var(--mm-fs-13);
}
.brain-overlay-toggle {
top: 7px; right: 7px;
width: 32px; height: 32px; padding: 7px; border-radius: var(--mm-r-btn);
}
.brain-overlay-toggle svg { width: 17px; height: 17px; }





.graph-timelapse-btn { top: 46px; }
.brain-max-btn { top: 85px; }




.brain-stats {
bottom: 6px;
width: min(420px, calc(100% - 20px));
padding: 2px;
border-radius: var(--mm-r-btn);
}
.bstat { flex: 1 1 0; flex-direction: row; align-items: baseline; justify-content: center;
gap: 4px; padding: 4px 5px; border-radius: var(--mm-r-chip); }
.bstat-num { font-size: var(--mm-fs-14); }
.bstat-lbl { margin-top: 0; font-size: 8px; letter-spacing: .8px; }
.bstat-sep { margin: 4px 0; }


.brain-max-btn { display: grid; }
.brain-max-btn .bmx-out { display: none; }
body.brain-max .brain-max-btn .bmx-in { display: none; }
body.brain-max .brain-max-btn .bmx-out { display: block; }
body.brain-max .brain-max-btn { color: var(--accent-ink); border-color: var(--accent-line); }


.hud-voice {
min-width: 0;
margin: 5px 8px max(7px, env(safe-area-inset-bottom, 0px));
}
.hud-voice .voice-input { min-width: 0; }



.cview .hud-voice { margin-bottom: 0; }
.cview .chatpage-main, .cview .ws-main { padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); }










body.kb-open .hud {
position: relative; top: var(--vv-ptop, 0px);
height: var(--vv-h, 100dvh);
}
body.kb-open .hud-top { top: var(--vv-top, 0px); }
body.kb-open .cview {
top: calc(var(--vv-top, 0px) + var(--topbar-h)); bottom: auto;
height: calc(var(--vv-h, 100dvh) - var(--topbar-h));
}
body.kb-open .hud-voice { margin-bottom: 6px; }
body.kb-open .cview .hud-voice { margin-bottom: 0; }
body.kb-open .cview .chatpage-main, body.kb-open .cview .ws-main { padding-bottom: 6px; }
.cview-head { padding: 14px 16px; }
.cview-title { font-size: var(--mm-fs-16); }
}

@media (max-width: 860px) and (max-height: 620px) {
.hud-center { height: clamp(160px, 27dvh, 210px); }
.concept-label .cl-meta { display: none; }

.graph-timelapse-btn { top: 42px; }
.brain-max-btn { top: 77px; }
}


.conn-card .conn-ico { font-size: var(--mm-fs-24); width: 40px; text-align: center; flex-shrink: 0; }
.conn-accounts { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px 14px; }
.conn-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--mm-r-field);
border: 1px solid var(--border); background: var(--surface-2); color: inherit;
font-size: var(--mm-fs-13); cursor: pointer; }
.conn-chip:hover { background: var(--surface-3); }
.conn-chip.off { opacity: .45; }
.conn-chip.add { border-style: dashed; opacity: .75; }
.conn-chip .cdot { color: var(--text3); font-size: var(--mm-fs-badge); }
.conn-chip .cdot.on { color: var(--green); }

.conn-chip .cdot.hok { color: var(--green); }
.conn-chip .cdot.herr { color: var(--red); }
.conn-chip .cdot.hunk { color: var(--warn-ink); }
.conn-chip.conn-fix { border-color: var(--danger-line); color: var(--red); background: var(--danger-wash); }
.conn-chip.conn-fix:hover { background: var(--danger-wash); }
.conn-chip .cstar { color: var(--warn-ink); }

.gico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
border-radius: var(--mm-r-btn); background: #fff; color: #4285f4; font-weight: 800; font-size: var(--mm-fs-20);
font-family: Arial, sans-serif; }
.conn-steps { margin: 4px 0 10px; padding-left: 22px; display: flex; flex-direction: column; gap: 9px;
font-size: var(--mm-fs-14); line-height: 1.5; }
.conn-steps li::marker { color: var(--accent); font-weight: 700; }
.conn-steps .step-link { margin-left: 6px; padding: 2px 9px; font-size: var(--mm-fs-12); vertical-align: 1px; }
.conn-steps .wiz-copy { margin-top: 6px; }
.gp-row { display: flex; align-items: center; gap: 10px; text-align: left; }
.gp-ico { flex: 0 0 auto; width: 30px; display: inline-flex; justify-content: center; font-size: var(--mm-fs-20); }
.gp-ico .ico-img { width: 24px; height: 24px; object-fit: contain; }
.gp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gp-name { font-weight: 600; }
.json-drop { border: 1.5px dashed var(--border); border-radius: var(--mm-r-btn); padding: 12px 14px;
font-size: var(--mm-fs-13); opacity: .85; cursor: pointer; margin: 2px 0 6px; transition: border-color .15s, background .15s; }
.json-drop:hover, .json-drop.over { border-color: var(--accent); background: var(--info-wash); opacity: 1; }
.json-drop.ok { border-color: var(--green); color: var(--green); opacity: 1; }
.json-drop.bad { border-color: var(--red); color: var(--red); opacity: 1; }
.reuse-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 6px;
padding: 9px 12px; border: 1px solid var(--ok-line); border-radius: var(--mm-r-btn); background: var(--ok-wash); }
.reuse-row select { max-width: 200px; }




.engine-banner { display: inline-flex; align-items: center; gap: 5px; max-width: 46vw;
padding: 3px 12px; cursor: pointer;
border: 1px solid var(--danger-line); border-radius: var(--mm-r-field); background: var(--danger-wash);
color: var(--red); font-size: var(--mm-fs-13); white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; transition: background 0.15s, border-color 0.15s; }
.engine-banner:hover { background: var(--danger-wash); border-color: var(--red); }


.engine-banner[hidden] { display: none; }
@media (max-width: 700px) { .engine-banner { max-width: 70vw; font-size: var(--mm-fs-12); } }

.amb-details summary { cursor: pointer; list-style: none; }
.amb-details summary::-webkit-details-marker { display: none; }
.amb-details summary h3::before { content: "▸ "; opacity: .6; }
.amb-details[open] summary h3::before { content: "▾ "; }
@media (max-width: 700px) {
.cat-grid { grid-template-columns: 1fr; }
.conn-accounts { flex-wrap: wrap; }
.conn-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reuse-row select { max-width: 100%; }
}
.perm-chip { font-size: var(--mm-fs-12); border: 1px solid; border-radius: var(--mm-r-btn); padding: 1px 7px; opacity: .9; }
.cat-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0 4px; }
.cat-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-chip { border: 1px solid var(--border); background: transparent; color: inherit;
border-radius: var(--mm-r-field); padding: 4px 12px; font-size: var(--mm-fs-13); cursor: pointer; opacity: .8; }
.cat-chip.on { border-color: var(--accent); color: var(--accent); opacity: 1; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px; margin-top: 12px; max-width: 980px; }
.cat-card { border: 1px solid var(--border); border-radius: var(--mm-r-btn); padding: 14px;
background: var(--surface-1); display: flex; flex-direction: column; gap: 8px; }
.cat-card.soon { opacity: .55; }



.cat-card { position: relative; }
.cat-x { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; padding: 0;
display: grid; place-items: center; border: 0; border-radius: var(--mm-r-chip); cursor: pointer;
background: transparent; color: var(--ink-3, #8a8a8a); opacity: 0; transition: opacity .12s; }
.cat-card:hover .cat-x, .cat-x:focus-visible { opacity: 1; }
.cat-x:hover { background: var(--danger-bg, #f5dcdc); color: var(--danger-ink, #b3261e); }
.cat-x svg { width: 14px; height: 14px; }
.cat-ico { font-size: 30px; height: 34px; display: flex; align-items: center; }
.ico-img { width: 32px; height: 32px; object-fit: contain; border-radius: 0; vertical-align: middle; }
.conn-card .conn-ico .ico-img { display: block; margin: 0 auto; }
.cat-name { font-weight: 600; font-size: var(--mm-fs-14); }
.cat-desc { font-size: var(--mm-fs-13); opacity: .7; flex: 1; line-height: 1.45; }
.cat-doc { font-size: var(--mm-fs-12); opacity: .7; }
.conn-form { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
.conn-form::-webkit-scrollbar { width: 10px; }
.conn-form::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--mm-r-chip); border: 2px solid transparent; background-clip: content-box; }
.conn-form::-webkit-scrollbar-thumb:hover { background: var(--accent); background-clip: content-box; }
.conn-form .mcp-lb { display: flex; flex-direction: column; gap: 4px; font-size: var(--mm-fs-14); opacity: .85; }



.conn-guide { font-size: var(--mm-fs-13); opacity: .8; background: var(--info-wash);
border: 1px solid var(--info-line); border-radius: var(--mm-r-chip); padding: 9px 12px; line-height: 1.6;
white-space: pre-line; overflow-wrap: anywhere; }
.conn-tram { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--info-line);
border-radius: var(--mm-r-chip); padding: 12px; background: var(--info-wash); }
.conn-tram .mp-btn { align-self: flex-start; }
.conn-risk { font-size: var(--mm-fs-13); background: var(--warn-wash); border: 1px solid var(--warn-line);
border-radius: var(--mm-r-chip); padding: 10px 12px; line-height: 1.55;
white-space: pre-line; overflow-wrap: anywhere; }
.conn-wizard { display: flex; flex-direction: column; gap: 10px; }
.wiz-links { display: flex; flex-wrap: wrap; gap: 8px; }
.wiz-links .wiz-open { margin-left: 0; font-size: var(--mm-fs-13); padding: 7px 12px; }
.wiz-copy { display: flex; gap: 8px; align-items: stretch; }
.wiz-copy input { flex: 1 1 auto; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--mm-fs-13); }
.wiz-copy .wiz-copy-btn { margin-left: 0; white-space: nowrap; }
.conn-ok { font-size: var(--mm-fs-14); padding: 8px 2px; color: var(--green); }
.conn-hint { margin-top: 8px; font-size: var(--mm-fs-13); color: var(--warn-ink); }
.qr-img { width: 240px; height: 240px; border-radius: var(--mm-r-btn); background: #fff; padding: 8px;
display: block; margin: 10px auto 4px; }
.conn-menu { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; }
.conn-menu-btn { text-align: left; border: 1px solid var(--border); background: var(--surface-1);
color: inherit; border-radius: var(--mm-r-chip); padding: 9px 12px; font-size: var(--mm-fs-14); cursor: pointer;
display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.conn-menu-btn:hover:not(:disabled) { background: var(--surface-3); }
.conn-menu-btn:disabled { opacity: .4; cursor: default; }
.conn-menu-btn.danger { color: var(--red); }
.conn-audit { max-height: 380px; overflow-y: auto; padding: 10px 16px; font-size: var(--mm-fs-13); }
.aud-row { padding: 6px 0; border-bottom: 1px solid var(--surface-2); }
.aud-row.bad { color: var(--red); }
.aud-ts { opacity: .55; font-size: var(--mm-fs-12); margin-right: 6px; }
.aud-err { font-size: var(--mm-fs-12); opacity: .8; margin-top: 2px; }



.tfa-card .tfa-warn { color: var(--warn-ink); font-weight: 600; }
.tfa-steps { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.tfa-step { font-size: var(--mm-fs-13); line-height: 1.55; color: var(--text2); }
.tfa-step b { color: var(--text); }
.tfa-qr { align-self: flex-start; background: #fff; padding: 10px; border-radius: var(--mm-r-btn); border: 1px solid var(--glass-brd); }




.tfa-qr svg { display: block; width: auto; max-width: 100%; height: auto; }
.tfa-secret { display: inline-block; font-family: var(--font-mono, monospace); font-size: var(--mm-fs-13); letter-spacing: 1px; background: var(--surface-2); border: 1px solid var(--glass-brd); border-radius: var(--mm-r-chip); padding: 3px 8px; margin-left: 4px; user-select: all; word-break: break-all; }
.tfa-rec { margin-top: 10px; }
.tfa-rec-note { font-size: var(--mm-fs-13); line-height: 1.55; color: var(--warn-ink); background: var(--warn-wash); border: 1px solid var(--warn-line); border-radius: var(--mm-r-chip); padding: 9px 11px; margin-bottom: 10px; }
.tfa-rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 7px; margin-bottom: 12px; }
.tfa-rec-grid code { font-family: var(--font-mono, monospace); font-size: var(--mm-fs-13); letter-spacing: 1px; text-align: center; background: var(--surface-2); border: 1px solid var(--glass-brd); border-radius: var(--mm-r-chip); padding: 6px 4px; user-select: all; }


.set-tfa { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: var(--mm-fs-13); line-height: 1.55; color: var(--text2); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--glass-brd); }
.set-tfa .tfa-on { color: var(--green); }
.set-tfa .tfa-off { color: var(--text); }
.set-tfa .tfa-low { color: var(--warn-ink); }
.set-tfa button { margin-left: auto; flex: 0 0 auto; }


.mtabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--glass-brd); }
.mtab { display: inline-flex; align-items: center; gap: 7px; padding: 11px 16px; cursor: pointer;
border: 0; background: none; color: var(--text3); font-family: var(--font);
font-size: var(--mm-fs-14); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mtab:hover { color: var(--text2); }
.mtab.act { color: var(--accent); border-bottom-color: var(--accent); }


.ol-sect { margin-bottom: 26px; }
.ol-h { display: flex; align-items: center; gap: 8px; font-size: var(--mm-fs-13); letter-spacing: 1px;
text-transform: uppercase; color: var(--text2); margin: 0 0 12px; font-weight: 700; }
.ol-h-sub { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text3);
font-size: var(--mm-fs-13); margin-left: auto; }
.ol-hint { font-size: var(--mm-fs-12); color: var(--text3); margin-top: 8px; line-height: 1.55; }
.ol-empty-line { padding: 16px 4px; color: var(--text3); font-size: var(--mm-fs-14); }



.ol-empty { text-align: center; max-width: 620px; margin: 10px auto; padding: 34px 26px; }
.ol-empty-ico { color: var(--accent); margin-bottom: 12px; }
.ol-empty-title { font-size: var(--mm-fs-20); font-weight: 700; margin-bottom: 8px; }
.ol-empty-desc { font-size: var(--mm-fs-14); color: var(--text2); line-height: 1.6; margin-bottom: 16px; }
.ol-step { text-align: left; font-size: var(--mm-fs-13); font-weight: 600; color: var(--text2);
margin: 16px 0 7px; }
.ol-cmd { display: flex; align-items: center; gap: 8px; text-align: left;
background: var(--bg3); border: 1px solid var(--border); border-radius: var(--mm-r-btn); padding: 9px 11px; }
.ol-cmd code { flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap;
font-family: var(--mono, ui-monospace, monospace); font-size: var(--mm-fs-13); color: var(--text2); }
.ol-row { display: flex; gap: 8px; align-items: center; }
.ol-in { flex: 1 1 auto; min-width: 0; padding: 9px 12px; border-radius: var(--mm-r-btn);
border: 1px solid var(--border); background: var(--field-bg); color: var(--text);
font-family: var(--font); font-size: var(--mm-fs-14); outline: none; }
.ol-in:focus { border-color: var(--accent-line); }
.ol-note, .ol-err { display: flex; align-items: flex-start; gap: 8px; text-align: left;
border-radius: var(--mm-r-btn); padding: 10px 12px; font-size: var(--mm-fs-13); line-height: 1.55; }
.ol-note { background: var(--info-wash); border: 1px solid var(--info-line); color: var(--text2); }
.ol-err { background: var(--warn-wash); border: 1px solid var(--warn-line);
color: var(--warn-ink); margin-top: 12px; }
.ol-note .ic, .ol-err .ic { flex: none; margin-top: 2px; }

.ol-conn { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.ol-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--text3); }
.ol-dot.on { background: var(--green); box-shadow: 0 0 0 3px var(--ok-wash); }
.ol-conn-name { font-weight: 700; font-size: var(--mm-fs-14); }
.ol-conn-ep { font-size: var(--mm-fs-13); color: var(--text3); margin-top: 2px;
font-family: var(--mono, ui-monospace, monospace); }

.ol-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ol-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
border-radius: var(--mm-r-btn); background: var(--surface-2); border: 1px solid var(--glass-brd);
font-size: var(--mm-fs-13); color: var(--text2); }
.ol-chip .ic { color: var(--accent); }
.ol-specs-form { margin-top: 10px; }

.ol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ol-card { display: flex; flex-direction: column; gap: 8px; padding: 14px;
border-radius: var(--mm-r-field); background: var(--glass); border: 1px solid var(--glass-brd); }
.ol-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ol-card-name { font-weight: 700; font-size: var(--mm-fs-14); overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
.ol-card-size { flex: none; font-size: var(--mm-fs-12); color: var(--text3); }
.ol-card-desc { font-size: var(--mm-fs-13); color: var(--text2); line-height: 1.5; flex: 1 1 auto; }


.ol-card-note { font-size: var(--mm-fs-12); color: var(--accent-ink); }
.ol-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.ol-tag { font-size: var(--mm-fs-badge); padding: 2px 7px; border-radius: var(--mm-r-card);
background: var(--surface-2); border: 1px solid var(--glass-brd); color: var(--text3); }
.ol-card-act { display: flex; }
.ol-card-act .gcard-btn { flex: 1 1 auto; justify-content: center; }
.ol-done { display: inline-flex; align-items: center; gap: 5px; font-size: var(--mm-fs-13);
color: var(--green); font-weight: 600; }

.ol-prog { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.ol-prog-track { height: 6px; border-radius: var(--mm-r-card); background: var(--surface-3); overflow: hidden; }
.ol-prog-fill { height: 100%; width: 0; background: var(--accent); border-radius: var(--mm-r-card);
transition: width .2s; }
.ol-prog-lbl { display: flex; align-items: center; justify-content: space-between; gap: 8px;
font-size: var(--mm-fs-12); color: var(--text3); }

.ol-list { display: flex; flex-direction: column; gap: 7px; }
.ol-row-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
border-radius: var(--mm-r-btn); background: var(--surface-2); border: 1px solid var(--glass-brd); }
.ol-row-ico { flex: none; display: inline-flex; color: var(--text3); }
.ol-row-name { display: block; font-weight: 600; font-size: var(--mm-fs-14); }
.ol-row-meta { display: block; font-size: var(--mm-fs-12); color: var(--text3); margin-top: 2px; }


.ol-row-note { display: inline-flex; align-items: center; gap: 6px; font-size: var(--mm-fs-12);
color: var(--text3); max-width: 60%; text-align: left; line-height: 1.35; }
.ol-row-note svg { flex: none; }
.ol-badge { margin-left: 7px; font-size: var(--mm-fs-badge); padding: 1px 7px; border-radius: var(--mm-r-card);
background: var(--ok-wash); border: 1px solid var(--ok-line); color: var(--green);
font-weight: 600; }
.ol-badge-main { background: var(--accent, #6d5dfc); color: #fff; }
.ol-hint.ol-ok { color: var(--ok, #1a8f4a); }
.ol-fchip { padding: 6px 13px; border-radius: var(--mm-r-card); cursor: pointer;
border: 1px solid var(--border); background: transparent; color: var(--text2);
font-family: var(--font); font-size: var(--mm-fs-13); }
.ol-fchip.on { border-color: var(--accent-line); color: var(--accent); background: var(--accent-wash); }



.ol-buoc { font-size: var(--mm-fs-14); color: var(--text2); line-height: 1.6; margin: 8px 0 4px; }
.ol-note.ol-warn { border: 1px solid var(--warn-line); background: var(--warn-wash);
border-radius: var(--mm-r-btn); padding: 9px 11px; margin: 10px 0; }
.ol-note.ol-warn .ic { color: var(--warn-ink); }






.kho-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border);
margin-bottom: 18px; overflow-x: auto; }



.kho-tab { white-space: nowrap; padding: 11px 16px; font: inherit; font-size: var(--mm-fs-16);
font-weight: 500; color: var(--text2); background: none; border: 0;
border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
display: flex; align-items: center; gap: 6px; }
.kho-tab.on { color: var(--accent); font-weight: 700; border-bottom-color: var(--accent); }
.kho-dem { font-size: var(--mm-fs-12); font-weight: 600; padding: 1px 8px; border-radius: var(--mm-r-pill);
background: var(--surface-2); color: var(--text3); }
.kho-tab.on .kho-dem { background: color-mix(in srgb, var(--accent) 14%, transparent);
color: var(--accent); }

.kho-than { display: flex; gap: 26px; align-items: flex-start; }
.kho-cot { width: 190px; flex: none; display: flex; flex-direction: column; gap: 2px; }
.kho-cot-tieu { font-size: var(--mm-fs-12); font-weight: 700; letter-spacing: .08em; color: var(--text3);
padding: 4px 10px 8px; text-transform: uppercase; }
.kho-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px;
padding: 9px 11px; border-radius: var(--mm-r-btn); font: inherit; font-size: var(--mm-fs-14); text-align: left;
color: var(--text2); background: none; border: 0; cursor: pointer; }
.kho-nav:hover { background: var(--surface-2); }
.kho-nav.on { color: var(--accent); font-weight: 600;
background: color-mix(in srgb, var(--accent) 10%, transparent); }

.kho-nav.ngan { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.kho-navdem { font-size: var(--mm-fs-12); color: var(--text3); }
.kho-chinh { flex: 1; min-width: 0; }

.kho-the { gap: 10px; }
.kho-dau { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.kho-nhom { font-size: var(--mm-fs-12); color: var(--text3); border: 1px solid var(--border);
border-radius: var(--mm-r-chip); padding: 2px 8px; white-space: nowrap; }
.kho-ten { font-weight: 700; font-size: var(--mm-fs-16); display: flex; align-items: center; gap: 6px;
flex-wrap: wrap; }
.kho-ava { width: 40px; height: 40px; flex: none; border-radius: var(--mm-r-btn); display: grid;
place-items: center; font-weight: 700; font-size: var(--mm-fs-16); color: #fff; letter-spacing: -.02em; }

.kho-ava-img { background: none; }
.kho-ava-img svg, .kho-ava-img img { width: 34px; height: 34px; object-fit: contain; }
.kho-daicai { display: flex; align-items: center; gap: 6px; font-size: var(--mm-fs-13); font-weight: 600;
color: var(--ok-ink, #2f855a); }


.kho-daicai.moi { color: var(--accent); }
.kho-daicai.moi svg { width: 14px; height: 14px; }


.kho-bao-moi { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
margin-bottom: 12px; padding: 10px 14px; border-radius: var(--mm-r-btn); font-size: var(--mm-fs-16);
color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
background: color-mix(in srgb, var(--accent) 8%, transparent); }
.kho-bao-moi svg { width: 18px; height: 18px; flex: none; }
.kho-bao-moi > span { margin-right: auto; }
.kho-chip { padding: 5px 12px; border-radius: var(--mm-r-pill); font: inherit; font-size: var(--mm-fs-14);
font-weight: 600; cursor: pointer; color: var(--accent); background: var(--surface);
border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.kho-chip:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }


.kho-dem.moi { color: var(--accent);
background: color-mix(in srgb, var(--accent) 16%, transparent) !important; }
.kho-nut { display: flex; gap: 8px; }
.kho-btn { flex: 1; padding: 11px; border-radius: var(--mm-r-btn); font: inherit; font-size: var(--mm-fs-14);
font-weight: 600; cursor: pointer; border: 1px solid transparent; }

.kho-btn-phu { flex: none; padding: 11px 16px; background: var(--surface-2); color: var(--text2);
border-color: var(--border); }
.kho-btn-chinh { background: var(--accent); color: #fff; }
.kho-btn-go { background: transparent; color: var(--danger-ink, #b3261e);
border-color: var(--border); }
.kho-btn-go:hover { border-color: var(--danger-ink, #b3261e); }

.kho-trang { display: flex; align-items: center; gap: 6px; margin-top: 22px; padding-top: 16px;
border-top: 1px solid var(--border); flex-wrap: wrap; }
.kho-so { min-width: 36px; height: 36px; padding: 0 11px; border-radius: var(--mm-r-chip);
border: 1px solid var(--border); background: var(--surface-1); color: inherit;
font: inherit; font-size: var(--mm-fs-14); cursor: pointer; }



.kho-the .cat-desc { font-size: var(--mm-fs-14); opacity: .82; }
.kho-the .prov-meta { font-size: var(--mm-fs-13); }


.kho-quaylai { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
padding: 8px 15px; border-radius: var(--mm-r-pill); border: 1px solid var(--border);
background: var(--surface-1); color: var(--accent); font: inherit; font-size: var(--mm-fs-14);
font-weight: 600; cursor: pointer; }
.kho-quaylai:hover { border-color: var(--accent); }
.kho-so.on { border-color: var(--accent); color: var(--accent); font-weight: 700; }

.kho-tim { width: 100%; max-width: 320px; }















@media (max-width: 860px) {
.kho-than { flex-direction: column; gap: 16px; }

.kho-tabs { border-bottom: 0; background: var(--surface-2); border-radius: var(--mm-r-field);
padding: 4px; gap: 2px; overflow-x: auto; }


.kho-tab { flex: 1 1 0; min-width: 62px; flex-direction: column; gap: 3px;
padding: 9px 4px; border-bottom: 0; margin-bottom: 0; border-radius: var(--mm-r-btn);
font-size: var(--mm-fs-13); justify-content: center; text-align: center; }
.kho-tab.on { background: var(--surface-1); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.kho-dem { font-size: var(--mm-fs-12); padding: 0 7px; }

.kho-cot { width: 100%; flex-direction: row; flex-wrap: wrap; overflow: visible; gap: 8px; }
.kho-cot-tieu { display: none; }

.kho-nav { flex: 0 0 auto; white-space: nowrap; border: 1px solid var(--border);
border-radius: var(--mm-r-pill); padding: 9px 14px; gap: 7px; }
.kho-nav.on { border-color: var(--accent); }


.kho-nav.ngan { margin-top: 0; padding-top: 9px; border-top: 1px solid var(--border); }

.kho-tim { max-width: none; flex: 1 1 100%; }





.kho-khoi > h3 { display: none; }
.kho-the { gap: 12px; }
.kho-nut { flex-wrap: wrap; }
.kho-btn { min-height: 44px; }
.kho-so { min-width: 40px; height: 40px; }
.kho-quaylai { min-height: 40px; }
}


@media (max-width: 480px) {
.cat-grid { grid-template-columns: 1fr; }
.kho-tab { font-size: var(--mm-fs-12); min-width: 56px; padding: 8px 2px; }
.kho-dem { font-size: var(--mm-fs-12); padding: 0 6px; }
.kho-nav { padding: 9px 12px; font-size: var(--mm-fs-14); }
}




.tab-kho { border: 1px solid var(--border); background: transparent; color: inherit;
border-radius: var(--mm-r-pill); padding: 7px 14px; font: inherit; font-size: var(--mm-fs-13); cursor: pointer;
opacity: .85; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tab-kho:hover { opacity: 1; }
.tab-kho.on { border-color: var(--accent); color: var(--accent); font-weight: 600; opacity: 1;
background: color-mix(in srgb, var(--accent) 8%, transparent); }











.mp-box.pkm { width: 560px; max-height: min(88vh, 760px); }
.pkm-dau { display: flex; align-items: flex-start; gap: 14px; padding: 20px 20px 0; }
.pkm-dau .kho-ava { width: 46px; height: 46px; border-radius: var(--mm-r-field); font-size: var(--mm-fs-16); }
.pkm-dau .kho-ava-img svg, .pkm-dau .kho-ava-img img { width: 40px; height: 40px; }
.pkm-chu { flex: 1; min-width: 0; }
.pkm-ten { font-size: var(--mm-fs-20); font-weight: 700; line-height: 1.25; display: flex;
align-items: center; gap: 8px; flex-wrap: wrap; }
.pkm-ver { font-size: var(--mm-fs-12); font-weight: 600; padding: 2px 9px; border-radius: var(--mm-r-pill);
background: var(--surface-2); color: var(--text2); }
.pkm-phu { margin-top: 4px; font-size: var(--mm-fs-13); color: var(--text2); }
.pkm-phu code { font-size: var(--mm-fs-12); }

.pkm-than { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px 4px;
display: flex; flex-direction: column; gap: 14px; }
.pkm-mota { margin: 0; font-size: var(--mm-fs-14); line-height: 1.55; }



.pkm-bang { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border);
border: 1px solid var(--border); border-radius: var(--mm-r-btn); overflow: hidden; }
.pkm-o { background: var(--bg2); padding: 12px 14px; min-width: 0; }
.pkm-o.rong { grid-column: 1 / -1; }
.pkm-o-nhan { font-size: var(--mm-fs-12); font-weight: 700; letter-spacing: .06em; color: var(--text3);
text-transform: uppercase; }
.pkm-o-gt { margin-top: 3px; font-size: var(--mm-fs-13); font-weight: 600; overflow-wrap: anywhere; }
.pkm-o-gt .nhe { color: var(--text3); font-weight: 500; }
.pkm-o-ma { margin-top: 3px; font-size: var(--mm-fs-12); font-family: var(--font); overflow-wrap: anywhere; }
.pkm-o-phu { margin-top: 3px; font-size: var(--mm-fs-12); color: var(--text3); line-height: 1.45; }



.pkm-canh { border-radius: var(--mm-r-btn); padding: 13px 15px; display: flex; flex-direction: column;
gap: 7px; font-size: var(--mm-fs-13); line-height: 1.55; }
.pkm-canh-tieu { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.pkm-canh-tieu svg { width: 16px; height: 16px; flex: none; }
.pkm-canh.tin { background: color-mix(in srgb, var(--ok-ink, #2f855a) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--ok-ink, #2f855a) 26%, transparent); }
.pkm-canh.tin .pkm-canh-tieu { color: var(--ok-ink, #2f855a); }
.pkm-canh.vang { background: color-mix(in srgb, var(--warn-ink, #b7791f) 9%, transparent);
border: 1px solid color-mix(in srgb, var(--warn-ink, #b7791f) 30%, transparent); }
.pkm-canh.vang .pkm-canh-tieu { color: var(--warn-ink, #b7791f); }
.pkm-canh.do { background: color-mix(in srgb, var(--danger-ink, #b3261e) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--danger-ink, #b3261e) 32%, transparent); }
.pkm-canh.do .pkm-canh-tieu { color: var(--danger-ink, #b3261e); }
.pkm-canh code { font-size: var(--mm-fs-12); overflow-wrap: anywhere; }
.pkm-canh .mp-input { width: 100%; margin-top: 4px; background: var(--sunken);
border: 1px solid var(--border); color: var(--text); border-radius: var(--mm-r-btn); padding: 10px 12px;
font: inherit; font-size: var(--mm-fs-14); }
.pkm-canh .mp-input:focus { outline: none; border-color: var(--danger-ink, #b3261e); }


.pkm-gat { display: flex; align-items: center; justify-content: space-between; gap: 14px;
width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--border);
border-radius: var(--mm-r-btn); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.pkm-gat:hover { border-color: var(--accent); }
.pkm-gat-t { display: block; font-size: var(--mm-fs-14); font-weight: 600; }
.pkm-gat-s { display: block; font-size: var(--mm-fs-12); color: var(--text3); margin-top: 2px; }
.pkm-cong { flex: none; width: 44px; height: 26px; border-radius: var(--mm-r-pill); background: var(--border);
padding: 3px; transition: background .18s ease; }
.pkm-cong span { display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff;
transition: transform .18s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.pkm-gat[aria-pressed="true"] .pkm-cong { background: var(--accent); }
.pkm-gat[aria-pressed="true"] .pkm-cong span { transform: translateX(18px); }




.pkm-tha { display: flex; flex-direction: column; align-items: center; gap: 10px;
padding: 30px 20px; border: 1.5px dashed var(--border); border-radius: var(--mm-r-field);
background: var(--surface-1); cursor: pointer; text-align: center;
transition: border-color .15s ease, background .15s ease; }
.pkm-tha:hover, .pkm-tha.dang-keo { border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 7%, transparent); }
.pkm-tha-ico { width: 54px; height: 54px; border-radius: var(--mm-r-field); display: grid; place-items: center;
background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.pkm-tha-ico svg { width: 26px; height: 26px; }
.pkm-tha-t { font-size: var(--mm-fs-16); font-weight: 700; }
.pkm-tha-s { font-size: var(--mm-fs-13); color: var(--text2); }
.pkm-tha-s u { color: var(--accent); font-weight: 600; }
.pkm-tha-n { font-size: var(--mm-fs-12); color: var(--text3); }

.pkm-luuy { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
border-radius: var(--mm-r-btn); background: var(--surface-1); font-size: var(--mm-fs-13); color: var(--text2);
line-height: 1.5; }
.pkm-luuy svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }

.pkm-chan { display: flex; align-items: center; justify-content: flex-end; gap: 10px;
padding: 14px 20px; border-top: 1px solid var(--glass-brd); }
.pkm-chan .mp-note { margin-right: auto; }
.pkm-danh { display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 12px; padding: 34px 20px; text-align: center; color: var(--text2); font-size: var(--mm-fs-14); }
.pkm-quay { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--border);
border-top-color: var(--accent); animation: pkmQuay .7s linear infinite; }
@keyframes pkmQuay { to { transform: rotate(360deg); } }


.pkm-mat { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.pkm-mat li { position: relative; padding-left: 18px; font-size: var(--mm-fs-14); line-height: 1.55; }
.pkm-mat li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 5px; height: 5px;
border-radius: 50%; background: var(--text3); }

.pkm-nam { display: none; }



.pkm-ico { flex: none; width: 46px; height: 46px; border-radius: var(--mm-r-field); display: grid;
place-items: center; background: var(--surface-1); border: 1px solid var(--border);
color: var(--text2); font-size: var(--mm-fs-20); overflow: hidden; }
.pkm-ico svg { width: 22px; height: 22px; }
.pkm-ico .ico-img { width: 30px; height: 30px; object-fit: contain; border-radius: 0; }
.pkm-nhe { color: var(--text3); font-weight: 400; }


.pkm-canh-tieu > svg { flex: none; }



.pkm-than.mcpf { gap: 8px; }
.mcpf .js-input { font-size: var(--mm-fs-16); margin-bottom: 0; }
.mcpf textarea.js-input { resize: vertical; font-family: var(--mono, monospace); font-size: var(--mm-fs-14); line-height: 1.5; }
.mcpf-nhan { display: flex; align-items: center; gap: 6px; font-size: var(--mm-fs-16); font-weight: 600; margin-top: 8px; }
.mcpf-nhan svg { width: 16px; height: 16px; }
.mcpf-dan { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--mm-r-btn);
border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, var(--border));
background: color-mix(in srgb, var(--accent) 5%, transparent); }
.mcpf-dan .mcpf-nhan { margin-top: 0; }
.mcpf-dan-kq { font-size: var(--mm-fs-14); color: var(--text2); line-height: 1.5; }
.mcpf-dan-kq.ok { color: var(--ok-ink, #2f855a); font-weight: 600; }
.mcpf-dan-kq.loi { color: var(--warn-ink, #b7791f); }
.mcpf-kieu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mcpf-kieu button { display: flex; align-items: flex-start; gap: 10px; text-align: left; padding: 11px 12px;
border: 1px solid var(--border); border-radius: var(--mm-r-btn); background: transparent; color: inherit;
font: inherit; cursor: pointer; }
.mcpf-kieu button svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--text2); }
.mcpf-kieu button b { display: block; font-size: var(--mm-fs-16); }
.mcpf-kieu button small { display: block; font-size: var(--mm-fs-13); color: var(--text3); margin-top: 2px; line-height: 1.4; }
.mcpf-kieu button[aria-pressed="true"] { border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 9%, transparent); }
.mcpf-kieu button[aria-pressed="true"] svg { color: var(--accent); }
.mcpf-nc summary { cursor: pointer; font-size: var(--mm-fs-14); color: var(--text2); margin-top: 6px; }
.mcpf-goi-y { font-size: var(--mm-fs-14); color: var(--text2); line-height: 1.5; }
.mcpf-ds { display: flex; flex-direction: column; gap: 8px; }


.mcpf-ds[hidden] { display: none; }
.mcpf-dong { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 40px; gap: 6px; align-items: center; }
.mcpf-gt { position: relative; min-width: 0; }
.mcpf-gt .js-input { padding-right: 40px; }
.mcpf-eye, .mcpf-xoa { display: grid; place-items: center; width: 40px; height: 40px; border: 0;
border-radius: var(--mm-r-btn); background: transparent; color: var(--text3); cursor: pointer; }
.mcpf-eye { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.mcpf-eye:hover, .mcpf-xoa:hover { color: var(--text); background: var(--surface-2); }
.mcpf-eye svg, .mcpf-xoa svg { width: 17px; height: 17px; }
.mcpf-nhac { grid-column: 1 / -1; font-size: var(--mm-fs-13); color: var(--warn-ink, #b7791f); }
.mcpf-them { align-self: flex-start; margin-left: 0; display: inline-flex; align-items: center; gap: 6px; }
.mcpf-them svg { width: 15px; height: 15px; }
#mfKq:not(:empty) { margin-top: 8px; }
@media (max-width: 520px) {
.mcpf-kieu { grid-template-columns: 1fr; }

.mcpf-dong { grid-template-columns: minmax(0, 1fr) 40px; }
.mcpf-dong .mcpf-gt { grid-column: 1 / 2; }
.mcpf-ds { gap: 16px; }
}






@media (max-width: 860px) {
.mp-overlay.pkm-lop { align-items: flex-end; }
.mp-box.pkm { width: 100%; max-width: none; max-height: 94vh;
border-radius: var(--mm-r-card) var(--mm-r-card) 0 0; animation: pkmLen .26s ease; }
.pkm-nam { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--border);
margin: 10px auto 0; }
.pkm-dau { padding-top: 14px; }
.pkm-bang { grid-template-columns: 1fr; }
.pkm-chan { flex-direction: column-reverse; align-items: stretch;
padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.pkm-chan .mp-btn { margin-left: 0; min-height: 46px; }
.pkm-chan .mp-note { margin-right: 0; text-align: center; }
.pkm-tha { padding: 24px 16px; }
}
@keyframes pkmLen { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }











.wspage { display: flex; height: 100%; min-height: 0; position: relative; overflow: hidden; }
.ws-left { width: 260px; flex: none; display: flex; flex-direction: column; gap: 8px;
min-height: 0; padding: 14px 12px; border-right: 1px solid var(--glass-brd);
background: var(--surface-1); }
.ws-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0;
padding: 14px 18px 16px; }
.ws-slot { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; }








.ws-slot .transcript { flex: 1 1 auto; min-height: 0; max-height: none; }
.ws-slot .bg-strip, .ws-slot .attach-bar, .ws-slot .model-bar, .ws-slot .hud-voice { flex: none; }






.ws-edit { display: none; position: relative; flex: 1 1 auto; min-height: 0; min-width: 0;
flex-direction: column; order: 1; }
.ws-main.edit-on > .ws-edit { display: flex; }



.ws-edit > .note-editor:not(.ne-full) { position: static; inset: auto; z-index: auto;
flex: 1 1 auto; min-height: 0; min-width: 0; border-radius: var(--mm-r-btn); }











.ws-main.edit-on > .ws-slot { display: none; }
.ws-main.edit-on > .ws-onboard { display: none; }
.ws-main.edit-on > .ws-bar, .ws-main.edit-on > .ws-id { display: none; }
.ws-right { width: 320px; flex: none; overflow: hidden; padding: 14px 12px;
display: flex; flex-direction: column; gap: 8px;
border-left: 1px solid var(--glass-brd); background: var(--surface-1); }





.ws-rtabs .cside-tab { padding: 7px 4px; gap: 5px; min-width: 0; font-size: var(--mm-fs-13);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-rtabs .cside-tab svg { flex: none; }



@media (max-width: 1240px) {
.ws-rtabs .cside-tab svg { display: none; }
}
.ws-rpane { display: none; flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; }
.ws-rpane.on { display: flex; flex-direction: column; }
.ws-rpane[data-rpane="cai"] { gap: 0; }


.ws-seg { display: flex; gap: 6px; }


.ws-seg button { flex: 1; min-width: 0; display: inline-flex; align-items: center;
justify-content: center; gap: 6px; padding: 7px 6px; border-radius: var(--mm-r-btn);
border: 1px solid var(--border); background: none; color: var(--text2); cursor: pointer;
font-family: var(--font); font-size: var(--mm-fs-13); font-weight: 700; white-space: nowrap; }
.ws-seg button:hover { color: var(--accent); border-color: var(--accent); }
.ws-seg button.on { color: var(--accent); border-color: #7d532d; background: rgba(255, 122, 60, .12); }
.ws-search, .ws-group { width: 100%; box-sizing: border-box; padding: 7px 9px; border-radius: var(--mm-r-btn);
border: 1px solid var(--border); background: none; color: var(--text); font-family: var(--font);
font-size: var(--mm-fs-13); }



.ws-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: none; }
.ws-filters .ws-group { flex: 1 1 auto; min-width: 0; width: auto; }


.ws-filters .ws-nhom-bar { flex: 1 1 auto; min-width: 0; }
.ws-nhom-bar .cs-proj-name svg { width: 14px; height: 14px; vertical-align: -2px; }


@media (max-width: 900px) {
.ws-nhom-bar .cs-proj-cur { font-size: var(--mm-fs-16); }
.ws-item-text strong { font-size: var(--mm-fs-16); }
.ws-item-text small { font-size: var(--mm-fs-14); }
.ws-glabel, .ws-grp-tog { font-size: var(--mm-fs-13); }
}
.ws-filters .ws-search-btn { flex: none; }
.ws-filters .ws-search { flex: 1 0 100%; }
.ws-search[hidden] { display: none; }
.ws-list { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.ws-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
padding: 7px 9px; border-radius: var(--mm-r-btn); border: 1px solid transparent; background: none;
color: var(--text2); cursor: pointer; font-family: var(--font); }
.ws-item:hover { background: var(--surface-1); color: var(--text); }
.ws-item.on { border-color: #7d532d; background: rgba(255, 122, 60, .12); color: var(--text); }
.ws-item-ic { flex: none; opacity: .8; }
.ws-item-text { min-width: 0; display: flex; flex-direction: column; }
.ws-item-text strong { font-size: var(--mm-fs-14); font-weight: 600; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
.ws-item-text small { font-size: var(--mm-fs-12); color: var(--text3); overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }


.ws-left-foot { display: flex; flex-direction: column; gap: 6px; flex: none; }
.ws-left-foot .ws-btn { justify-content: center; white-space: nowrap; overflow: hidden; }

.ws-bar { display: flex; align-items: center; gap: 10px; padding: 0 2px 10px; flex: none; }
.ws-bar > button { flex: none; }



.ws-id { flex: none; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; margin: 0 2px 8px; }
.ws-id:has(.ws-err) { flex-wrap: wrap; }
#wsRightBtn { margin-left: auto; }
.ws-id > svg, .ws-id > .ic { flex: none; }
.ws-id > div { min-width: 0; }
.ws-id strong, .ws-id small, .ws-id .ws-err { display: block; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
.ws-id strong { font-size: var(--mm-fs-16); }
.ws-id small, .ws-id .ws-err { font-size: var(--mm-fs-12); color: var(--text3); }
.ws-id .ws-err { color: #ff8b8b; }
.ws-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--mm-r-chip);
border: 1px solid var(--border); background: none; color: var(--text2); cursor: pointer;
font-family: var(--font); font-size: var(--mm-fs-13); }
.ws-btn:hover { color: var(--accent); border-color: var(--accent); }
.ws-btn.primary { color: var(--accent); border-color: #7d532d; background: rgba(255, 122, 60, .14); }
.ws-btn.danger:hover { color: #ff8b8b; border-color: #ff8b8b; }
.ws-ico { background: none; border: 1px solid var(--border); color: var(--text2); border-radius: var(--mm-r-chip);
padding: 4px 9px; cursor: pointer; line-height: 1; }
.ws-ico:hover { color: var(--accent); border-color: var(--accent); }

.ws-ico.lat svg { transform: scaleX(-1); }





.ws-main.onboard-on > .ws-slot { display: none; }
.ws-onboard { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column;
align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 20px 16px; }

.ws-onboard[hidden] { display: none; }
.ws-onboard .ws-ob-ic { color: var(--accent); opacity: .85; }
.ws-onboard h3 { margin: 0; font-size: var(--mm-fs-16); }
.ws-onboard p { margin: 0; max-width: 460px; font-size: var(--mm-fs-13); line-height: 1.55; color: var(--text3); }

.ws-ob-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ws-ob-acts .ws-btn { padding: 8px 14px; font-size: var(--mm-fs-14); }

.ws-rtitle { font-size: var(--mm-fs-12); letter-spacing: .08em; text-transform: uppercase;
color: var(--text3); margin: 12px 0 6px; }
.ws-rtitle:first-child { margin-top: 0; }
.ws-empty { font-size: var(--mm-fs-13); color: var(--text3); padding: 8px 2px; }
.ws-form label { display: block; font-size: var(--mm-fs-12); color: var(--text3); margin: 8px 0 3px; }
.ws-form input, .ws-form select, .ws-form textarea { width: 100%; box-sizing: border-box; }
.ws-form h3 { display: none; }
.ws-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }


.ws-prog { height: 4px; border-radius: 3px; background: var(--surface-1);
border: 1px solid var(--glass-brd); overflow: hidden; }
.ws-prog > div { height: 100%; width: 0; background: var(--accent); transition: width .3s ease; }
.ws-status { font-size: var(--mm-fs-13); color: var(--text2); margin: 6px 0 10px; }
.ws-steps { display: flex; flex-direction: column; gap: 6px; }
.ws-step { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 8px;
align-items: start; padding: 7px 8px; border-radius: var(--mm-r-btn); border: 1px solid var(--glass-brd); }
.ws-step .ws-num { grid-row: 1 / span 3; width: 22px; height: 22px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center; font-size: var(--mm-fs-12);
border: 1px solid var(--border); color: var(--text3); }
.ws-step strong { font-size: var(--mm-fs-13); font-weight: 600; }
.ws-step small { font-size: var(--mm-fs-12); color: var(--text3); }
.ws-step .ws-who { font-size: var(--mm-fs-12); color: var(--text3); display: flex; align-items: center; gap: 4px; }
.ws-step.dang { border-color: #7d532d; background: rgba(255, 122, 60, .08); }
.ws-step.dang .ws-num { color: var(--accent); border-color: var(--accent); }
.ws-step.xong .ws-num { color: #6fd08c; border-color: #6fd08c; }
.ws-step.loi { border-color: #ff8b8b; }
.ws-step.loi .ws-num, .ws-step.loi small { color: #ff8b8b; }
.ws-wait { margin-top: 8px; padding: 8px; border-radius: var(--mm-r-btn); border: 1px solid #7d532d;
background: rgba(255, 122, 60, .1); font-size: var(--mm-fs-13); }
.ws-wait small { display: block; margin-top: 4px; font-size: var(--mm-fs-12); color: var(--text3); }




.ws-chatside { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 260px; }


.cside-gon .cside-pane { flex: 1 1 auto; min-height: 0; gap: 8px; }


.cside-gon .ci-meta { gap: 6px; }




.cside-gon .ci-title .ws-run-avatars { margin-right: 5px; vertical-align: -4px; }
.ws-run-badge.done { color: #6fd08c; border-color: #3f6a4c; }
.ws-run-badge.error { color: #ff8b8b; border-color: #7d3f3f; }





@media (max-width: 1240px) {
.ws-left { width: 210px; }
.ws-right { width: 272px; }
}
.ws-left, .ws-right { transition: transform .2s ease; }




@media (min-width: 901px) { .wspage.left-open .ws-left { display: none; } }
@media (min-width: 1061px) { .wspage.right-open .ws-right { display: none; } }
@media (max-width: 1060px) {
.ws-right { position: absolute; top: 0; bottom: 0; right: 0; z-index: 6;
width: min(84vw, 300px); background: var(--bg); transform: translateX(105%); }
.wspage.right-open .ws-right { transform: none; box-shadow: 0 0 40px var(--shadow-veil); }
}
@media (max-width: 900px) {
.ws-left { position: absolute; top: 0; bottom: 0; left: 0; z-index: 6;
width: min(84vw, 300px); background: var(--bg); transform: translateX(-105%); }
.wspage.left-open .ws-left { transform: none; box-shadow: 0 0 40px var(--shadow-veil); }
.ws-main { padding: 12px 12px 14px; }
}


@media (max-width: 1060px) {
.wspage.left-open::before, .wspage.right-open::before { content: ""; position: absolute;
inset: 0; z-index: 5; background: rgba(0, 0, 0, .38); }
}


.agent-avatar { --avatar-size:40px; display:inline-flex; width:var(--avatar-size); height:var(--avatar-size); flex:none; vertical-align:middle; }
.agent-avatar svg { display:block; width:100%; height:100%; overflow:visible; }



.agent-avatar .aa-eyes { transform-origin:var(--aa-eye-x,176px) var(--aa-eye-y,148px);
animation:aa-blink var(--aa-blink-dur,6s) var(--aa-blink-delay,0s) infinite; }
.agent-avatar .aa-gaze { transition:transform .2s ease; }
.agent-avatar[data-state="thinking"] svg { animation:aa-think 1.6s ease-in-out infinite; }
.agent-avatar[data-state="speaking"] .aa-eyes { animation:aa-talk .8s ease-in-out infinite; }
@keyframes aa-blink { 0%,43%,47%,100% { transform:scaleY(1); } 45% { transform:scaleY(.12); } }
@keyframes aa-think { 0%,100% { transform:translateY(0) rotate(-5deg); } 50% { transform:translateY(-3px) rotate(5deg); } }
@keyframes aa-talk { 0%,100% { transform:scaleY(.7); } 50% { transform:scaleY(1.1); } }
.aa-preview { display:flex; justify-content:center; padding:12px 0; min-height:112px; }
.aa-options { text-align:center; margin-bottom:18px; }
.aa-options summary { cursor:pointer; font-size:var(--mm-fs-12); color:var(--text2); padding:6px; }
.aa-options[open] { background:var(--surface-1); border:1px solid var(--border); border-radius:var(--mm-r-btn); padding:8px; }
.aa-shapes { display:flex; justify-content:center; gap:7px; padding:8px 0; }
.aa-shapes button { display:flex; padding:3px; border:1px solid transparent; border-radius:var(--mm-r-btn); background:transparent; cursor:pointer; }
.aa-shapes button[aria-pressed="true"] { border-color:var(--accent); background:var(--surface-1); }
.aa-colors { display:grid; grid-template-columns:repeat(6,26px); gap:10px; justify-content:center; margin:8px 0 14px; }
.aa-colors button { width:26px; height:26px; background:var(--swatch); border:3px solid var(--bg2); outline:1px solid var(--border); border-radius:50%; cursor:pointer; }
.aa-colors button[aria-pressed="true"] { outline:2px solid var(--accent); outline-offset:2px; }

.aa-editor { text-align:left; padding:4px 4px 12px; }
.aa-editor .pet-picker { justify-content:flex-start; }
.ws-right { width:350px; background:var(--bg2); padding:20px 18px; scrollbar-width:thin; }





.ws-rpane { padding:4px; margin:0 -4px; }
.ws-item { padding:10px 9px; gap:9px; }
.ws-item-ic { opacity:1; display:flex; align-items:center; }
.ws-item-text strong { font-size:var(--mm-fs-14); }
.ws-item-text small { margin-top:3px; }



.agent-editor > label { display:block; color:var(--text2); font-size:var(--mm-fs-12); font-weight:600; margin:16px 0 7px; }
.agent-editor > input, .agent-editor > select, .agent-editor > textarea { width:100%; min-width:0; box-sizing:border-box; border:1px solid var(--border); border-radius:var(--mm-r-btn); padding:10px 11px; background:var(--field-bg); color:var(--text); font:inherit; font-size:var(--mm-fs-13); line-height:1.5; }
.agent-editor > textarea { min-height:136px; resize:vertical; }



.agent-editor .ag-assets { display:grid; gap:6px; }
.agent-editor .ag-assets > button { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; min-height:38px; }
.agent-editor .ag-assets > button:disabled { opacity:.55; cursor:default; }
.agent-editor .ag-assets-hint { font-size:var(--mm-fs-12); line-height:1.5; }
.agent-editor :is(input,select,textarea):focus-visible { outline:2px solid var(--accent); outline-offset:2px; }




.agent-editor .ag-model-pick { position:relative; }
.agent-editor .ag-model-btn { display:flex; align-items:center; justify-content:space-between; gap:8px;
width:100%; box-sizing:border-box; min-height:38px; border:1px solid var(--border); border-radius:var(--mm-r-btn);
padding:10px 11px; background:var(--field-bg); color:var(--text); font:inherit; font-size:var(--mm-fs-13);
line-height:1.5; text-align:left; cursor:pointer; }
.agent-editor .ag-model-btn:hover { border-color:var(--accent); }
.agent-editor .ag-model-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.agent-editor .ag-model-btn > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.agent-editor .ag-model-pop { position:absolute; top:calc(100% + 6px); bottom:auto; left:0; right:0;
width:auto; max-height:min(52vh, 340px); }
.agent-editor .sp-bar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:10px; }
.agent-editor .sp-bar input { grid-column:1/-1; width:100%; box-sizing:border-box; font-family:inherit; }
.agent-editor .sp-count { min-width:0; }
.agent-editor .sp-clear { justify-self:end; }
.agent-editor .sp-groups { max-height:240px; scrollbar-width:thin; }
.agent-editor .sp-g-body { padding:5px 4px 10px 12px; }
.agent-editor .sp-g-body label.sp { display:flex; align-items:flex-start; gap:9px; margin:0; padding:7px 4px; color:var(--text); font-size:var(--mm-fs-13); font-weight:400; }
.agent-editor .sp-g-body input[type="checkbox"] { width:16px; height:16px; flex:0 0 16px; margin:2px 0 0; padding:0; accent-color:var(--accent); }
.agent-editor .sp-g-body .sp span { min-width:0; white-space:normal; overflow-wrap:anywhere; line-height:1.5; }
.agent-editor .editor-actions { position:sticky; bottom:-20px; background:var(--bg2); padding:12px 0; border-top:1px solid var(--border); z-index:1; }
.agent-editor .editor-actions button { min-height:36px; }
.ws-workflow-head { padding-bottom:20px; margin-bottom:22px; border-bottom:1px solid var(--border); }
.ws-workflow-head > .ic { width:30px; height:30px; color:var(--accent); }
.ws-workflow-head h3 { margin:12px 0 8px; font-size:var(--mm-fs-20); line-height:1.35; color:var(--text); }
.ws-workflow-head p { color:var(--text3); font-size:var(--mm-fs-12); line-height:1.6; margin:0 0 14px; }
.ws-run-button { width:100%; justify-content:center; padding:10px; font-weight:600; }
.ws-btn:disabled { opacity:.5; cursor:default; }
.ws-step { position:relative; border:0; background:transparent; padding:12px 0; grid-template-columns:26px minmax(0,1fr); gap:5px 12px; }
.ws-step:not(:last-child)::after { content:""; position:absolute; left:12px; top:42px; bottom:-9px; width:1px; background:var(--border); }
.ws-step strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; line-height:1.55; }
.ws-step .ws-who { gap:6px; margin-top:3px; }
.ws-step .ws-num { width:25px; height:25px; }
.ws-step.dang { background:transparent; }
.ws-step.dang strong { color:var(--accent); }
.ws-prog { margin-top:12px; }
.ws-status { margin:10px 0 18px; }




.ws-item-wrap { position: relative; }
.ws-item-wrap > .ws-item { width: 100%; padding-right: 30px; }
.ws-item-more { position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
display: flex; align-items: center; justify-content: center; width: 24px; height: 26px;
padding: 0; border: 0; border-radius: var(--mm-r-chip); background: none; color: var(--text3);
cursor: pointer; opacity: 0; transition: opacity .12s, color .12s, background .12s; }
.ws-item-wrap:hover .ws-item-more, .ws-item-more:focus-visible { opacity: 1; }
.ws-item-more:hover { color: var(--accent); background: var(--surface-1); }

@media (hover: none) { .ws-item-more { opacity: .75; } }



.ws-item-pin { flex: none; display: inline-flex; margin-left: auto; margin-right: 22px;
color: var(--accent); }
.ws-item-pin svg { width: 14px; height: 14px; }

.ws-item-wrap.ghim > .ws-item { border-left: 3px solid var(--accent); border-radius: var(--mm-r-btn); }

.ws-glabel { font-size: var(--mm-fs-12); letter-spacing: .06em; text-transform: uppercase;
color: var(--text3); padding: 8px 4px 2px; }
.ws-glabel:first-child { padding-top: 2px; }


.ws-grp { display: flex; align-items: center; gap: 2px; padding: 8px 0 2px; }
.ws-grp-tog { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 4px 4px;
border: 0; background: none; color: var(--text2); font-family: var(--font); font-size: var(--mm-fs-12);
font-weight: 600; text-transform: uppercase; letter-spacing: .06em; cursor: pointer;
border-radius: var(--mm-r-chip); text-align: left; }
.ws-grp-tog:hover { background: var(--surface-1); color: var(--text); }
.ws-grp-tog svg { width: 14px; height: 14px; flex: none; transition: transform .15s; }
.ws-grp.thu .ws-grp-tog svg { transform: rotate(-90deg); }
.ws-grp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-grp-n { flex: none; font-weight: 500; color: var(--text3); letter-spacing: 0; }
.ws-grp-more { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center;
justify-content: center; border: 0; border-radius: var(--mm-r-chip); background: none; color: var(--text3);
cursor: pointer; opacity: 0; }
.ws-grp:hover .ws-grp-more, .ws-grp-more:focus-visible { opacity: 1; }
.ws-grp-more:hover { color: var(--accent); background: var(--surface-1); }
.ws-grp-more svg { width: 14px; height: 14px; }
@media (hover: none) { .ws-grp-more { opacity: .75; } }

.ws-more { width: 100%; margin-top: 6px; padding: 7px 8px; border-radius: var(--mm-r-btn);
border: 1px dashed var(--glass-brd); background: none; color: var(--text3);
cursor: pointer; font-family: var(--font); font-size: var(--mm-fs-13); }
.ws-more:hover { border-color: var(--accent); color: var(--text); }



.ws-menu { position: fixed; z-index: 60; min-width: 208px; max-width: min(300px, 92vw);
max-height: min(420px, 70vh); overflow-y: auto; padding: 5px;
background: var(--bg2); border: 1px solid var(--border); border-radius: var(--mm-r-btn);
box-shadow: 0 12px 34px var(--shadow-veil); }
.ws-menu-head { padding: 6px 9px 7px; font-size: var(--mm-fs-12); color: var(--text3);
border-bottom: 1px solid var(--border); margin-bottom: 4px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-menu-it { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px;
border: 0; border-radius: var(--mm-r-chip); background: none; color: var(--text); cursor: pointer;
font-family: var(--font); font-size: var(--mm-fs-13); text-align: left; }
.ws-menu-it > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-menu-it svg { width: 15px; height: 15px; flex: none; opacity: .85; }
.ws-menu-it:hover { background: var(--surface-1); color: var(--accent); }
.ws-menu-it.on { color: var(--accent); }
.ws-menu-it.xoa { color: #ff8b8b; }
.ws-menu-it.xoa:hover { background: rgba(255, 139, 139, .12); color: #ff8b8b; }
.ws-menu-it.quay { color: var(--text3); font-size: var(--mm-fs-12); border-bottom: 1px solid var(--border);
border-radius: var(--mm-r-chip) var(--mm-r-chip) 0 0; margin-bottom: 4px; }

.ws-id .agent-avatar { flex:none; }
@media (max-width:1200px) { .ws-right { width:310px; } }

@media (max-width:600px) {
.ws-right { width:min(350px,90vw); }
.ws-bar { flex-wrap:wrap; gap:8px 6px; }



.ws-id .ws-err { flex:1 0 100%; }
.ws-id #wsRetry { flex:none; }

#wsNewChat { font-size:var(--mm-fs-12); white-space:nowrap; }

#wsRightBtn { margin-left:auto; }
}
@media (prefers-reduced-motion:reduce) { .agent-avatar *, .agent-avatar svg { animation:none!important; transition:none!important; } }

.ws-run-avatars { display:inline-flex; flex:none; }
.ws-run-avatars .agent-avatar + .agent-avatar { margin-left:-7px; }
.ws-panel-close { display:none; }


@media (max-width:1060px) { .ws-panel-close { display:flex; align-self:flex-end; flex:none; } }
.agent-avatar[data-state="listening"] .aa-eyes { transform:scaleY(1.2); }




.ht-wrap { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 0; }
.ht-search { padding: 8px 10px; border-radius: var(--mm-r-btn); border: 1px solid var(--mm-line); background: var(--mm-field);
color: var(--mm-text); font-size: var(--mm-fs-16); min-width: 0; flex: 1 1 200px; }

.ht-sdt { margin: 0 4px 6px; padding: 8px 10px; border-radius: var(--mm-r-btn); background: var(--mm-wash); color: var(--mm-text);
font-size: var(--mm-fs-16); line-height: 1.45; display: flex; flex-direction: column; gap: 4px; }
.ht-sdt[hidden] { display: none; }
.ht-sdt svg { width: 16px; height: 16px; vertical-align: -3px; color: var(--mm-brand); }


.ht-tag { --tc: #8b8f98; display: inline-block; vertical-align: middle; min-width: 0; max-width: 140px; padding: 0 8px;
border-radius: var(--mm-r-pill); font-size: var(--mm-fs-16); line-height: 1.45; font-weight: 600; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; background: color-mix(in srgb, var(--tc) 16%, transparent);
color: color-mix(in srgb, var(--tc) 72%, var(--mm-text)); border: 1px solid color-mix(in srgb, var(--tc) 42%, transparent); }
.ht-tag[data-c="red"], .ht-sw[data-c="red"] { --tc: #e5484d; }
.ht-tag[data-c="orange"], .ht-sw[data-c="orange"] { --tc: #f76b15; }
.ht-tag[data-c="yellow"], .ht-sw[data-c="yellow"] { --tc: #d6a400; }
.ht-tag[data-c="green"], .ht-sw[data-c="green"] { --tc: #30a46c; }
.ht-tag[data-c="teal"], .ht-sw[data-c="teal"] { --tc: #12a594; }
.ht-tag[data-c="blue"], .ht-sw[data-c="blue"] { --tc: #3e7bfa; }
.ht-tag[data-c="purple"], .ht-sw[data-c="purple"] { --tc: #8e4ec6; }
.ht-tag[data-c="pink"], .ht-sw[data-c="pink"] { --tc: #d6409f; }
.ht-item-utags { display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; margin-top: 2px; }
.ht-item-utags .ht-tag { flex: 0 1 auto; }
.ht-tag-more { flex: none; font-size: var(--mm-fs-16); line-height: 1.45; padding: 0 7px; border-radius: var(--mm-r-pill); color: var(--mm-muted);
background: var(--mm-field); border: 1px solid var(--mm-line); }
.ht-has-contact { flex: none; display: inline-flex; color: var(--mm-ok); }
.ht-has-contact svg { width: 14px; height: 14px; }
.ht-item-ava { display: none; }

.ht-tagrow { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px;
border-bottom: 1px solid var(--mm-line); font-size: var(--mm-fs-16); }
.ht-tagrow:empty { display: none; }
.ht-tag-on { display: inline-flex; align-items: center; gap: 2px; max-width: 240px; padding-right: 2px; }
.ht-tag-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ht-tag-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; opacity: .7; padding: 0; }
.ht-tag-x:hover { opacity: 1; background: color-mix(in srgb, var(--tc) 22%, transparent); }
.ht-tag-x svg { width: 14px; height: 14px; }
.ht-tag-add { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: var(--mm-r-pill); cursor: pointer;
border: 1px dashed var(--mm-line); background: none; color: var(--mm-muted); font-size: var(--mm-fs-16); }
.ht-tag-add:hover, .ht-tag-add.on { color: var(--mm-brand); border-color: var(--mm-brand); }
.ht-tag-add svg { width: 15px; height: 15px; }
.ht-tagpop { position: absolute; top: calc(100% + 4px); left: 12px; z-index: 30; width: min(380px, calc(100% - 24px));
max-height: min(70vh, 480px); overflow-y: auto; padding: 10px 12px; border-radius: var(--mm-r-btn); background: var(--mm-panel);
border: 1px solid var(--mm-line); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); display: flex; flex-direction: column;
gap: 8px; font-size: var(--mm-fs-16); }
.ht-tagpop-h { display: flex; align-items: center; gap: 6px; }
.ht-tagpop-h b { color: var(--mm-text); }
.ht-tag-close { margin-left: auto; display: inline-flex; border: 0; background: none; color: var(--mm-dim); cursor: pointer;
padding: 4px; border-radius: var(--mm-r-chip); }
.ht-tag-close:hover { color: var(--mm-text); background: var(--mm-field); }
.ht-tagpop .info-body { font-size: var(--mm-fs-16); }
.ht-tagpop-list { display: flex; flex-direction: column; gap: 2px; }
.ht-tagpop-row { display: flex; align-items: center; gap: 4px; }
.ht-tag-pick { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 5px 6px; border: 0;
border-radius: var(--mm-r-chip); background: none; cursor: pointer; text-align: left; }
.ht-tag-pick:hover { background: var(--mm-field); }
.ht-tag-pick .ht-tag { max-width: 100%; }
.ht-tag-check { flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--mm-line); border-radius: var(--mm-r-chip); color: var(--mm-brand); }
.ht-tag-pick.on .ht-tag-check { border-color: var(--mm-brand); background: var(--mm-wash); }
.ht-tag-check svg { width: 14px; height: 14px; }
.ht-tag-edit { flex: none; display: inline-flex; border: 0; background: none; color: var(--mm-dim); cursor: pointer;
padding: 6px; border-radius: var(--mm-r-chip); }
.ht-tag-edit:hover { color: var(--mm-text); background: var(--mm-field); }
.ht-tag-edit svg { width: 15px; height: 15px; }
.ht-tagpop-edit, .ht-tagpop-new { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px;
border-radius: var(--mm-r-btn); background: var(--mm-panel); border: 1px solid var(--mm-line); }
.ht-tagpop-new { border-style: dashed; }
.ht-tagpop-edit input, .ht-tagpop-new input { flex: 1 1 100%; min-width: 0; padding: 7px 10px; border-radius: var(--mm-r-chip);
border: 1px solid var(--mm-line); background: var(--mm-field); color: var(--mm-text); font-size: var(--mm-fs-16); }
.ht-tagpop-eacts { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.ht-tagpop-eacts .s-btn, .ht-tagpop-eacts .s-btn-ghost, .ht-tag-create { font-size: var(--mm-fs-16); }
.ht-tag-del { margin-left: auto; color: var(--mm-bad); }
.ht-tagpop-none { color: var(--mm-dim); font-size: var(--mm-fs-16); }
.ht-tagpop-err { display: flex; align-items: flex-start; gap: 6px; color: var(--mm-bad); font-size: var(--mm-fs-16); }
.ht-sws { display: inline-flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.ht-sw { --tc: #8b8f98; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; padding: 0; background: var(--tc);
border: 2px solid var(--mm-panel); box-shadow: 0 0 0 1px var(--mm-line); }
.ht-sw.on { box-shadow: 0 0 0 2px var(--mm-text); }
@media (max-width: 640px) {
.ht-search { flex: 1 1 auto; }
}


.ht-body { display: flex; gap: 12px; flex: 1 1 auto; min-height: 260px; }
.ht-listcol { width: 320px; flex: none; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.ht-list { flex: 1 1 auto; min-height: 0; width: 100%; overflow: auto; display: flex; flex-direction: column; gap: 4px;
border: 1px solid var(--mm-line); border-radius: var(--mm-r-btn); padding: 6px; background: var(--mm-panel); }

.ht-more { display: flex; justify-content: center; padding: 8px 0 4px; flex: none; }
.ht-more .s-btn-ghost { font-size: var(--mm-fs-12); }
.ht-older { align-self: center; flex: none; background: none; border: 1px solid var(--mm-line); border-radius: var(--mm-r-pill);
padding: 4px 12px; font-size: var(--mm-fs-12); color: var(--mm-dim); cursor: pointer; }
.ht-older:hover { color: var(--mm-text); border-color: var(--mm-brand); }
.ht-older.busy { opacity: .6; cursor: progress; }
.ht-item { display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: left; padding: 9px 9px;
border-radius: var(--mm-r-btn); border: 1px solid transparent; background: none; color: var(--mm-muted); cursor: pointer; }
.ht-item:hover { background: var(--mm-field); color: var(--mm-text); }
.ht-item.on { border-color: var(--mm-brand); background: var(--mm-wash); color: var(--mm-text); }
.ht-item-text { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.ht-item-top { display: flex; align-items: baseline; gap: 6px; }
.ht-item-top strong { flex: 1 1 auto; min-width: 0; font-size: var(--mm-fs-14); font-weight: 600; overflow: hidden;
white-space: nowrap; text-overflow: ellipsis; }
.ht-item.unread .ht-item-top strong { color: var(--mm-text); }
.ht-item-time { flex: none; font-size: var(--mm-fs-12); color: var(--mm-dim); }


.ht-pin { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
margin: -4px 0; border-radius: var(--mm-r-chip); color: var(--mm-dim); cursor: pointer; }
.ht-pin svg { width: 14px; height: 14px; }
.ht-pin:hover { background: var(--mm-field); color: var(--mm-text); }
.ht-pin.on { color: var(--mm-brand); }
.ht-item.ghim { box-shadow: inset 3px 0 0 var(--mm-brand); }


.ht-item-top { position: relative; }
.ht-rmore { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 26px;
margin: -5px -5px -5px 0; border-radius: var(--mm-r-chip); color: var(--mm-muted); cursor: pointer; }
.ht-rmore svg { width: 18px; height: 18px; }
.ht-rmore:hover, .ht-item.menu-on .ht-rmore { background: var(--mm-field); color: var(--mm-text); }
.ht-rmore:focus-visible { outline: 2px solid var(--mm-brand); outline-offset: 1px; }
@media (hover: hover) and (min-width: 641px) {
.ht-rmore { position: absolute; right: -2px; top: 50%; margin: 0; transform: translateY(-50%); opacity: 0;
background: var(--mm-panel); border: 1px solid var(--mm-line); }
.ht-item:hover .ht-rmore, .ht-item:focus-within .ht-rmore, .ht-item.menu-on .ht-rmore { opacity: 1; }
.ht-item:hover .ht-item-time, .ht-item:focus-within .ht-item-time, .ht-item.menu-on .ht-item-time { visibility: hidden; }
}
.ht-item.menu-on { background: var(--mm-field); color: var(--mm-text); }
.ht-item.hid { opacity: .75; }
.ht-hid-mark { flex: none; display: inline-flex; color: var(--mm-dim); }
.ht-hid-mark svg { width: 14px; height: 14px; }

.ht-rmenu { position: fixed; z-index: 3150; width: 300px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px);
overflow-y: auto; padding: 6px; border-radius: var(--mm-r-btn); background: var(--mm-panel); border: 1px solid var(--mm-line);
box-shadow: 0 12px 32px rgba(0, 0, 0, .22); display: flex; flex-direction: column; gap: 1px; font-size: var(--mm-fs-16); outline: none; }
.ht-rm-it { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 7px 10px; border: 0;
border-radius: var(--mm-r-chip); background: none; color: var(--mm-text); font: inherit; font-size: var(--mm-fs-16); text-align: left; cursor: pointer; }
.ht-rm-it:hover, .ht-rm-it:focus-visible { background: var(--mm-field); outline: none; }
.ht-rm-ic { flex: none; display: inline-flex; color: var(--mm-muted); }
.ht-rm-ic svg, .ht-rm-end svg { width: 18px; height: 18px; }
.ht-rm-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ht-rm-t > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-rm-t small { font-size: var(--mm-fs-16); line-height: 1.3; color: var(--mm-dim); overflow: hidden; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.ht-rm-end { flex: none; display: inline-flex; color: var(--mm-dim); }
.ht-rm-it.on .ht-rm-end, .ht-rm-it.on .ht-rm-ic { color: var(--mm-brand); }
.ht-rm-it.done { color: var(--mm-ok); }
.ht-rm-it.done .ht-rm-ic { color: var(--mm-ok); }
.ht-rm-tag .ht-tag { max-width: 100%; }
.ht-rm-sep { height: 1px; margin: 4px 6px; background: var(--mm-line); flex: none; }
.ht-rm-h { padding: 2px 10px 2px; font-size: var(--mm-fs-16); font-weight: 600; color: var(--mm-dim); }
.ht-rm-none { padding: 6px 10px; font-size: var(--mm-fs-16); color: var(--mm-dim); }
.ht-rm-err { display: flex; align-items: flex-start; gap: 6px; padding: 6px 10px; font-size: var(--mm-fs-16); color: var(--mm-bad); }
.ht-rm-err svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.ht-rm-copy { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; font-size: var(--mm-fs-16); color: var(--mm-muted); }
.ht-rm-copyval { width: 100%; padding: 8px 10px; border-radius: var(--mm-r-chip); border: 1px solid var(--mm-brand); background: var(--mm-field);
color: var(--mm-text); font-size: var(--mm-fs-16); }

.ht-rsheet-bg { position: fixed; inset: 0; z-index: 3140; background: var(--scrim, rgba(0, 0, 0, .45)); }
.ht-rmenu.ht-rsheet { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; max-height: 80vh;
border-radius: var(--mm-r-field) var(--mm-r-field) 0 0; border-bottom: 0; padding: 4px 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
.ht-rsheet .ht-rm-it { min-height: 52px; padding: 10px 12px; }
.ht-rsheet .ht-rm-ic svg, .ht-rsheet .ht-rm-end svg { width: 20px; height: 20px; }
.ht-rsheet-h { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 12px 8px; font-size: var(--mm-fs-16);
color: var(--mm-text); }
.ht-rsheet-h b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-rsheet-grip { width: 40px; height: 4px; border-radius: var(--mm-r-pill); background: var(--mm-line); }
.ht-item-sub { display: flex; align-items: center; gap: 5px; min-width: 0; }
.ht-item-sub small { flex: 1 1 auto; min-width: 0; font-size: var(--mm-fs-12); color: var(--mm-dim); overflow: hidden;
white-space: nowrap; text-overflow: ellipsis; }
.ht-item.unread .ht-item-sub small { color: var(--mm-muted); font-weight: 600; }
.ht-badge { flex: none; min-width: 18px; padding: 0 5px; border-radius: var(--mm-r-pill); background: var(--mm-brand);
color: var(--on-accent); font-size: var(--mm-fs-12); font-weight: 700; text-align: center; line-height: 18px; }

.ht-count { flex: none; font-size: var(--mm-fs-12); line-height: 18px; padding: 0 6px; border-radius: var(--mm-r-pill); border: 1px solid var(--mm-line);
color: var(--mm-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ht-thread { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--mm-line);
border-radius: var(--mm-r-btn); background: var(--mm-panel); overflow: hidden; }
.ht-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--mm-line); }
.ht-head-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ht-head-text strong { font-size: var(--mm-fs-14); color: var(--mm-text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ht-head-text small { font-size: var(--mm-fs-12); color: var(--mm-dim); display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ht-back { display: none; padding: 6px 9px; }

@media (max-width: 640px) {
.ht-head { flex-wrap: wrap; }
}
.ht-silent { align-self: flex-start; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--mm-fs-12);
color: var(--mm-dim); }
.ht-silent-why { background: none; border: 0; padding: 0; color: var(--mm-brand); font: inherit; cursor: pointer;
text-decoration: underline; }
.ht-chip { display: inline-flex; align-items: center; gap: 4px; }
.ht-note { padding: 8px 12px; font-size: var(--mm-fs-13); display: flex; align-items: center; gap: 6px; }
.ht-note.warn { background: var(--mm-warn-wash); color: var(--mm-warn); }
.ht-msgs { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ht-msg { display: flex; flex-direction: column; max-width: min(78%, 640px); }
.ht-msg.khach { align-self: flex-start; }
.ht-msg.bot, .ht-msg.nguoi { align-self: flex-end; align-items: flex-end; }
.ht-msg.hethong { align-self: center; max-width: 90%; }
.ht-msg-h { font-size: var(--mm-fs-12); color: var(--mm-dim); margin: 0 4px 3px; }
.ht-bubble { padding: 8px 12px; border-radius: var(--mm-r-field); font-size: var(--mm-fs-14); line-height: 1.5; color: var(--mm-text);
background: var(--mm-field); border: 1px solid var(--mm-line); white-space: pre-wrap; word-break: break-word; }
.ht-msg.bot .ht-bubble { background: var(--mm-wash); border-color: var(--mm-brand-line); }
.ht-msg.nguoi .ht-bubble { background: var(--mm-field); }
.ht-msg.hethong .ht-bubble { background: none; border-style: dashed; color: var(--mm-dim); font-size: var(--mm-fs-12); }
.ht-bubble p { margin: 0 0 .5em; } .ht-bubble p:last-child { margin: 0; }
.ht-loai { display: inline-flex; align-items: center; gap: 4px; font-size: var(--mm-fs-12); color: var(--mm-dim); margin-right: 6px; }
.ht-react-row { display: inline-flex; align-items: center; gap: 6px; font-size: var(--mm-fs-14); color: var(--mm-dim); line-height: 1.4; }
.ht-react-emoji { font-size: var(--mm-fs-20); line-height: 1; }
.ht-react.off .ht-react-emoji { opacity: .45; }
.ht-msg-loi { font-size: var(--mm-fs-12); color: var(--mm-warn); margin: 3px 4px 0; display: inline-flex; gap: 4px; align-items: center; }
.ht-foot { padding: 8px 12px; border-top: 1px solid var(--mm-line); font-size: var(--mm-fs-12); color: var(--mm-dim); }
.ht-empty { text-align: center; color: var(--mm-dim); padding: 40px 16px; display: flex; flex-direction: column;
align-items: center; gap: 8px; font-size: var(--mm-fs-14); }
.ht-empty b { color: var(--mm-text); font-size: var(--mm-fs-14); }
.ht-empty.small { padding: 12px; font-size: var(--mm-fs-13); }
.ht-thread-empty { margin: auto; }
.ht-empty svg { width: 34px; height: 34px; opacity: .5; }



.ht-modal { position: fixed; inset: 0; z-index: 3210; display: flex; align-items: center; justify-content: center;
background: var(--scrim, rgba(0, 0, 0, .55)); padding: 24px; }
.ht-form { width: min(600px, 94vw); max-height: 88vh; overflow-y: auto; padding: 18px 20px; background: var(--mm-panel);
border: 1px solid var(--mm-line); border-radius: var(--mm-r-field); }
.ht-form h3 { margin: 0 0 8px; color: var(--mm-text); }
.ht-form h4 { margin: 16px 0 8px; font-size: var(--mm-fs-13); text-transform: uppercase; letter-spacing: .04em; color: var(--mm-dim); }
.ht-intro { margin: 0 0 8px; font-size: var(--mm-fs-13); color: var(--mm-muted); line-height: 1.55; }
.ht-src { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--mm-line);
border-radius: var(--mm-r-btn); margin-bottom: 6px; background: var(--mm-panel); }
.ht-src-ic { flex: none; display: inline-flex; }
.ht-src-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ht-src-text strong { font-size: var(--mm-fs-14); color: var(--mm-text); }
.ht-src-text small { font-size: var(--mm-fs-12); color: var(--mm-dim); display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }



.ht-src > button { flex: none; white-space: nowrap; }
.ht-warn { color: var(--mm-warn); }
.ht-switch { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: var(--mm-fs-13); color: var(--mm-muted); cursor: pointer; }
.ht-form-acts { display: flex; justify-content: flex-end; margin-top: 14px; }


@media (min-width: 901px) {
.ht-listcol { width: var(--mm-inbox-list-width, 320px); position: relative; }
.ht-listcol > .col-resize { display: block; position: absolute; top: 0; bottom: 0; right: -10px; width: 8px; z-index: 6;
cursor: col-resize; touch-action: none; }
.ht-mini .ht-sdt, .ht-mini .ht-item-text, .ht-mini .ht-more { display: none; }
.ht-mini .ht-list { padding: 6px 4px; align-items: center; }
.ht-mini .ht-item { justify-content: center; padding: 6px 0; width: 52px; }
.ht-mini .ht-item-ava { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px;
height: 40px; border-radius: 50%; background: var(--mm-wash); color: var(--mm-brand-ink); font-size: var(--mm-fs-16); font-weight: 700; }
.ht-mini .ht-item.on .ht-item-ava { box-shadow: 0 0 0 2px var(--mm-brand); }
.ht-item-ava-dot { position: absolute; top: 0; right: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--mm-brand);
border: 2px solid var(--mm-panel); }
}
.ws-mini-tip-ava > .ht-item-ava { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
border-radius: 50%; background: var(--mm-wash); color: var(--mm-brand-ink); font-weight: 700; }
@media (max-width: 900px) {
.ht-body { height: auto; min-height: 0; flex: 1 1 auto; }
.ht-listcol { width: 100%; }
.ht-list { width: 100%; }
.ht-thread { display: none; }
.ht-wrap.thread-on .ht-listcol { display: none; }
.ht-wrap.thread-on .ht-list { display: none; }
.ht-wrap.thread-on .ht-thread { display: flex; min-height: 70vh; }
.ht-back { display: inline-flex; }
.ht-item-top strong, .ht-bubble, .ht-src-text strong { font-size: var(--mm-fs-16); }
.ht-item-sub small, .ht-head-text small, .ht-foot, .ht-intro, .ht-src-text small, .ht-switch, .ht-count { font-size: var(--mm-fs-14); }
.ht-msg { max-width: 88%; }
}


.ht-page { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 0; }

.ht-top { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.ht-title { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; font-family: var(--font); font-size: var(--mm-fs-16);
font-weight: 700; letter-spacing: 1px; color: var(--mm-text); }
.ht-title svg { color: var(--mm-brand); }
.ht-tabs { display: flex; gap: 4px; flex-wrap: wrap; }

.cview.cview-hoi-thoai .cview-head { display: none; }
.cview.cview-hoi-thoai .cview-body { padding: 10px 20px 14px; overflow: hidden; display: flex; flex-direction: column; }
.cview.cview-hoi-thoai .ht-page { flex: 1 1 auto; height: auto; margin-bottom: 0; }
.ht-tab { background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; padding: 8px 12px;
font-size: var(--mm-fs-14); color: var(--mm-dim); display: inline-flex; align-items: center; gap: 6px; margin-bottom: -1px; }
.ht-tab:hover { color: var(--mm-text); }
.ht-tab.on { color: var(--mm-text); border-bottom-color: var(--mm-brand); }
.ht-tab .ht-badge { margin-left: 2px; }
.ht-tab-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.ht-tab-body > .ht-wrap, .ht-tab-body > .ht-kenh { flex: 1 1 auto; min-height: 0; }
.ht-kenh { display: flex; flex-direction: column; gap: 12px; }
.ht-kenh-intro { flex: 1 1 300px; margin: 0; }
.ht-acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.ht-acc { border: 1px solid var(--mm-line); border-radius: var(--mm-r-btn); padding: 12px 14px; background: var(--mm-panel);
display: flex; flex-direction: column; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.ht-acc-head { display: flex; align-items: center; gap: 10px; }
.ht-acc-logo { width: 38px; height: 38px; border-radius: var(--mm-r-btn); display: inline-flex; align-items: center;
justify-content: center; background: var(--mm-field); border: 1px solid var(--mm-line); flex: none; }
.ht-acc-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ht-acc-title strong { font-size: var(--mm-fs-14); color: var(--mm-text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ht-acc-title small { font-size: var(--mm-fs-12); color: var(--mm-dim); }
.ht-acc-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: var(--mm-fs-12); color: var(--mm-dim); }
.ht-acc-meta span { display: inline-flex; align-items: center; gap: 4px; }
.ht-acc-meta b { color: var(--mm-text); }



.ht-acc-meta .ht-nhe { color: var(--mm-dim); font-weight: 400; font-style: italic; }


.ht-tk-loc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--mm-fs-12);
color: var(--mm-dim); padding: 8px 10px; border: 1px solid var(--mm-line); border-radius: var(--mm-r-btn);
background: var(--mm-field); }
.ht-tk-loc-txt { display: inline-flex; align-items: center; gap: 5px; flex: 1 1 auto; min-width: 0; }
.ht-tk-loc .s-btn-ghost { flex: none; font-size: var(--mm-fs-12); padding: 4px 10px; }
.ht-acc-nl { display: flex; flex-wrap: wrap; gap: 6px; }
.ht-acc-nl span { display: inline-flex; align-items: center; gap: 4px; font-size: var(--mm-fs-12); padding: 2px 8px;
border-radius: var(--mm-r-pill); background: var(--mm-field); color: var(--mm-muted); border: 1px solid var(--mm-line); }
.ht-acc-loi { font-size: var(--mm-fs-12); color: var(--mm-warn); display: flex; gap: 4px; align-items: flex-start; }



.ht-acc-loi > svg { flex: none; margin-top: 2px; }
.ht-acc-loi span { min-width: 0; overflow-wrap: anywhere; }
.ht-acc-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: auto; padding-top: 4px; }
.ht-acc-acts .ht-switch { margin-right: auto; }
.ht-kenh-khac { margin-top: 8px; }

.ht-tab-bot { display: flex; flex-direction: column; gap: 18px; }
.ht-kenh-sec { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--mm-line); padding-top: 14px; }
.ht-kenh-h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ht-kenh-tog { background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
padding: 2px 0; margin-right: auto; font-size: var(--mm-fs-14); font-weight: 600; color: var(--mm-text); }
.ht-kenh-tog svg { transition: transform .15s; }
.ht-kenh-sec.dong .ht-kenh-tog svg { transform: rotate(-90deg); }
.ht-kenh-sec.dong .ht-tk-loc { display: none; }
.ht-kenh-n { font-size: var(--mm-fs-12); font-weight: 400; color: var(--mm-dim); }
.ht-kenh-het { padding: 16px; }
@media (max-width: 900px) { .ht-kenh-tog { font-size: var(--mm-fs-16); } }
.ht-form label { display: block; margin: 12px 0 4px; font-size: var(--mm-fs-13); color: var(--mm-muted); font-weight: 600; }
.ht-form input { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: var(--mm-r-btn); border: 1px solid var(--mm-line);
background: var(--mm-field); color: var(--mm-text); font-size: var(--mm-fs-14); }
.ht-form input:focus { border-color: var(--info-line); outline: none; }
.ht-form .cb-kenh-o { background: var(--mm-panel); }
.ht-form-acts { gap: 8px; }

.ht-compose { border-top: 1px solid var(--mm-line); padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.ht-compose-note { font-size: var(--mm-fs-12); color: var(--mm-dim); display: flex; gap: 5px; align-items: center; }
.ht-compose textarea { flex: 1 1 auto; min-width: 0; resize: vertical; padding: 8px 10px; border-radius: var(--mm-r-btn);
border: 1px solid var(--mm-line); background: var(--mm-field); color: var(--mm-text); font-size: var(--mm-fs-14); font-family: inherit; line-height: 1.45; }
.ht-compose textarea:focus { border-color: var(--info-line); outline: none; }
.ht-send { flex: none; white-space: nowrap; }
@media (max-width: 900px) {
.cview.cview-hoi-thoai .cview-body { padding: 8px 14px 10px; }
.ht-title { font-size: var(--mm-fs-16); }
.ht-tab { font-size: var(--mm-fs-16); padding: 10px 12px; }
.ht-acc-title strong, .ht-compose textarea, .ht-form input { font-size: var(--mm-fs-16); }
.ht-acc-meta, .ht-acc-title small, .ht-compose-note, .ht-form label { font-size: var(--mm-fs-14); }
.ht-acc-grid { grid-template-columns: 1fr; }
}








.cd-id { flex: 1 1 auto; min-width: 0; font-size: var(--mm-fs-14); color: var(--text3);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-cwd.dim { opacity: .75; }



.cd-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-right: 8px; }
.cd-chip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--mm-fs-14); line-height: 1;
padding: 6px 9px; border-radius: var(--mm-r-pill); border: 1px solid var(--glass-brd);
background: var(--bg3); color: var(--text2); cursor: pointer; white-space: nowrap; }
.cd-chip:hover { border-color: var(--info-line); color: var(--text); }
.cd-chip.on { border-color: var(--ok-line); color: var(--text); }
.cd-chip-tm { font-weight: 600; color: var(--text); }


.cd-chip-mo { border-style: dashed; }















.cd-chip.cd-mq-auto { color: var(--text); }
.cd-mq-suggest { border-color: var(--info-line); background: var(--info-wash);
color: var(--info-ink); }
.cd-mq-full { border-color: var(--warn-line); background: var(--warn-wash);
color: var(--warn-ink); font-weight: 600; }


.cd-chip.cd-mq-suggest:hover { color: var(--info-ink); border-color: var(--info-line); }
.cd-chip.cd-mq-full:hover { color: var(--warn-ink); border-color: var(--warn-line); }




.cd-menu { position: fixed; z-index: 60; min-width: 220px; max-width: 340px; padding: 5px;



border-radius: var(--mm-r-btn); border: 1px solid var(--border); background: var(--bg2);
box-shadow: 0 12px 34px var(--shadow-veil); display: flex; flex-direction: column; gap: 2px;
max-height: min(60vh, 420px); overflow-y: auto; }


.cd-menu button { text-align: left; background: none; border: 0; color: var(--text); cursor: pointer;
font-size: var(--mm-fs-14); padding: 7px 9px; border-radius: var(--mm-r-chip); font-family: inherit; }
.cd-menu button:hover { background: var(--surface-2); }



.cd-menu button.on { color: var(--info-ink); font-weight: 600; }

.cd-menu button.tich { display: flex; align-items: flex-start; gap: 8px; }


.cd-menu button.tich > span:not(.cd-tich) { flex: 1 1 auto; min-width: 0; }
.cd-tich { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; border-radius: 4px;
border: 1px solid var(--glass-brd); display: inline-flex; align-items: center;
justify-content: center; color: var(--info-ink); }
.cd-menu button.on .cd-tich { border-color: var(--info-line); background: var(--info-wash); }
.cd-tich svg { width: 12px; height: 12px; }

.cd-chip-them { font-weight: 600; color: var(--info-ink); }
.cd-menu button.moi { border-top: 1px solid var(--glass-brd); border-radius: 0 0 var(--mm-r-chip) var(--mm-r-chip); }

.cd-menu button.moi:first-child { border-top: 0; border-radius: var(--mm-r-chip); }
.cd-menu button.nguy { color: var(--red); }
.cd-menu button small { display: block; font-size: var(--mm-fs-12); color: var(--text3); margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }






.cd-chips-hep:empty { display: none; }
.cd-chips-hep { flex: none; padding: 0 0 8px; }

@media (max-width: 900px) {
.cd-chip { font-size: var(--mm-fs-16); padding: 7px 10px; }
.cd-chips { flex-wrap: nowrap; overflow-x: auto; }

.cd-chips-hep .cd-chips { margin-right: 0; padding-bottom: 2px; }

.cd-menu button { font-size: var(--mm-fs-16); padding: 9px 10px; }
.cd-menu button small { font-size: var(--mm-fs-14); }
}


.ht-more, .ht-msgs-top {
text-align: center; font-size: var(--mm-fs-12); color: var(--text3); padding: 10px 8px;
}
.ht-msgs-top { display: flex; align-items: center; justify-content: center; gap: 6px; }
.ht-msgs-top svg { width: 14px; height: 14px; }


.mn-nhung { display: flex; flex-direction: column; gap: 10px; height: calc(100dvh - var(--topbar-h) - 150px); min-height: 480px; }
.mn-nhung-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--mm-fs-13); color: var(--text2); }
.mn-nhung-bar a { flex: none; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.mn-nhung-frame { flex: 1 1 auto; width: 100%; border: 0; border-radius: var(--mm-r-field); background: var(--bg2); box-shadow: var(--shadow-1); }


.ud-khoi { margin-top: 16px; }
.ud-khoi h4 { margin: 0 0 10px; font-size: var(--mm-fs-14); }
.ud-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ud-the { display: flex; gap: 12px; padding: 14px; border-radius: var(--mm-r-field); background: var(--surface-2); box-shadow: var(--shadow-1); }
.ud-ic { flex: none; width: 44px; height: 44px; border-radius: var(--mm-r-btn); display: flex; align-items: center; justify-content: center;
background: var(--accent-wash-2); color: var(--accent-ink, var(--accent)); }
.ud-ic svg { width: 22px; height: 22px; }
.ud-nd { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ud-nd p { margin: 2px 0 6px; font-size: var(--mm-fs-13); color: var(--text2); line-height: 1.45; }
.ud-tt { font-size: var(--mm-fs-12); color: var(--text3); }
.ud-tt.on { color: var(--green, #2f9d62); font-weight: 600; }
.ud-nut { display: flex; gap: 8px; flex-wrap: wrap; }


.rail-capnhat {
display: flex; align-items: center; gap: 10px; width: 100%; margin: 6px 0 4px;
padding: 8px 10px 8px 14px; border: 0; border-radius: var(--mm-r-btn); cursor: pointer;
background: var(--surface-2); color: var(--text2); font-family: var(--font-ui); font-size: var(--mm-fs-13);
}
.rail-capnhat:hover { color: var(--text); background: var(--surface-3); }
.rail-capnhat .cn-ic { position: relative; display: flex; }
.rail-capnhat .cn-ic svg { width: 18px; height: 18px; }
.rail-capnhat .cn-cham { display: none; position: absolute; top: -3px; right: -4px; width: 9px; height: 9px;
border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 2px var(--rail-bg); }
.rail-capnhat.co-moi { color: #fff; background: linear-gradient(145deg, #8a6cf0, #5b3fd0); font-weight: 600; }
.rail-capnhat.co-moi .cn-cham { display: block; }
.rail.collapsed .rail-capnhat { justify-content: center; padding: 9px 0; }
.rail.collapsed .rail-capnhat .cn-chu { display: none; }
.cn-bao {
position: fixed; left: 200px; bottom: 20px; z-index: 900; display: flex; gap: 12px; max-width: 360px;
padding: 14px 16px; border-radius: var(--mm-r-field); background: var(--panel-solid, #fff); color: var(--text);
box-shadow: var(--shadow-3); border: 1px solid var(--accent-line); animation: cnVao .3s ease;
}
@keyframes cnVao { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cn-bao-ic { flex: none; width: 36px; height: 36px; border-radius: var(--mm-r-btn); display: flex; align-items: center; justify-content: center;
background: var(--accent-wash-2); color: var(--accent-ink, var(--accent)); }
.cn-bao-nd { display: flex; flex-direction: column; gap: 4px; font-size: var(--mm-fs-13); }
.cn-bao-nut { display: flex; gap: 8px; margin-top: 6px; }
.cn-hop-nen { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
background: var(--scrim); padding: 16px; }
.cn-hop { width: min(440px, 100%); border-radius: var(--mm-r-card); background: var(--panel-solid, #fff); color: var(--text);
box-shadow: var(--shadow-3); padding: 18px 20px; }
.cn-hop-dau { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--mm-fs-16); margin-bottom: 8px; }
.cn-hop-than p { margin: 8px 0; line-height: 1.5; font-size: var(--mm-fs-14); }
.cn-hop-than svg { width: 16px; height: 16px; vertical-align: -3px; }
.cn-phu { color: var(--text3); font-size: var(--mm-fs-13) !important; }
.cn-canh { color: var(--warn-ink, #c47a14); }
.cn-lenh { display: block; padding: 8px 10px; border-radius: var(--mm-r-chip); background: var(--code-bg); color: var(--code-ink); font-size: var(--mm-fs-13); }
.cn-hop-chan { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
@media (max-width: 860px) { .cn-bao { left: 12px; right: 12px; bottom: 84px; max-width: none; } }
.rail-capnhat .cn-chu { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--mm-fs-13); }


.knn-may { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; justify-content: space-between;
padding: 12px 14px; border-radius: var(--mm-r-field); background: var(--surface-2); margin-bottom: 12px; }
.knn-may code { font-size: var(--mm-fs-14); font-weight: 700; letter-spacing: .5px; }
.knn-nho { font-size: var(--mm-fs-12); color: var(--text3); }
.knn-kh { display: flex; gap: 8px; margin-bottom: 8px; }
.knn-kh input { flex: 1 1 auto; min-width: 0; padding: 9px 12px; border-radius: var(--mm-r-btn); border: 1px solid var(--border);
background: var(--field-bg); color: var(--text); font-family: var(--mono); font-size: var(--mm-fs-13); }
.knn-thong { min-height: 18px; font-size: var(--mm-fs-13); margin: 4px 0 10px; color: var(--text2); }
.knn-thong.ok { color: var(--green, #2f9d62); }
.knn-thong.loi { color: var(--red, #e5484d); }
.knn-luoi { margin-top: 6px; }
.knn-the.mo .ud-ic { background: linear-gradient(145deg, #8a6cf0, #5b3fd0); color: #fff; }
.ud-tt.sap { color: var(--accent2-ink, #c47a14); font-weight: 600; }
.ud-tt.khoa { color: var(--text3); display: inline-flex; align-items: center; gap: 4px; }
.ud-tt.khoa svg { width: 12px; height: 12px; }
.ud-tt.het { color: var(--red, #e5484d); font-weight: 600; }
.knn-han { font-size: var(--mm-fs-12); color: var(--text3); margin-bottom: 6px; }
.knn-ph { margin-top: 22px; padding: 16px; border-radius: var(--mm-r-field); border: 1px dashed var(--accent-line); }
.knn-ph h4 { margin: 0 0 6px; display: flex; align-items: center; gap: 6px; }
.knn-ph-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 10px 0; }
.knn-ph-luoi label { display: flex; flex-direction: column; gap: 4px; font-size: var(--mm-fs-13); color: var(--text2); }
.knn-ph-luoi input, .knn-ph-luoi select { padding: 8px 10px; border-radius: var(--mm-r-btn); border: 1px solid var(--border); background: var(--field-bg); color: var(--text); }
.knn-ph-app { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; font-size: var(--mm-fs-13); }
#phKetQua { display: block; width: 100%; margin-top: 10px; font-family: var(--mono); font-size: var(--mm-fs-12); padding: 8px; border-radius: var(--mm-r-btn);
border: 1px solid var(--border); background: var(--code-bg); color: var(--code-ink); }
.knn-chan { margin-top: 18px; font-size: var(--mm-fs-13); }
.knn-chan a { color: var(--link-ink); display: inline-flex; gap: 6px; align-items: center; text-decoration: none; }
.dk-nen { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--scrim); }
.dk-hop { width: min(760px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; border-radius: var(--mm-r-card);
background: var(--panel-solid, #fff); color: var(--text); box-shadow: var(--shadow-3); padding: 18px 20px; }
.dk-dau { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--mm-fs-16); margin-bottom: 10px; }
.dk-than { flex: 1 1 auto; overflow: auto; min-height: 0; padding: 4px 12px 4px 2px; font-size: var(--mm-fs-14); line-height: 1.6;
border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.dk-than h1 { font-size: var(--mm-fs-20); } .dk-than h2 { font-size: var(--mm-fs-16); margin-top: 16px; }
.dk-tich { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 4px; font-size: var(--mm-fs-14); cursor: pointer; }
.dk-chan { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.dk-loi { color: var(--red, #e5484d); font-size: var(--mm-fs-13); margin-top: 6px; }

.v2-voice-row { display: flex; gap: 8px; align-items: center; }
.v2-voice-row select { flex: 1; min-width: 0; }


.v2-voice-row > .gcard-btn { flex: none; width: auto; white-space: nowrap; }


#voiceCard [hidden] { display: none !important; }


.ht-botbar { padding: 6px 12px 0; display: flex; flex-direction: column; gap: 6px; }
.ht-im { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--mm-fs-13); color: var(--muted, #888); }
.ht-im .ht-px { padding: 2px 10px; font-size: var(--mm-fs-12); }
.ht-botbtns { display: flex; flex-wrap: wrap; gap: 6px; }
.ht-botbtns .s-btn-ghost { font-size: var(--mm-fs-13); padding: 4px 10px; }




.h2-modal { width: 780px; max-width: 96vw; max-height: 90vh; background: var(--bg2); border: 1px solid var(--border);
border-radius: var(--mm-r-field); display: flex; flex-direction: column; box-shadow: var(--shadow-3); }
.h2-tabs { display: flex; gap: 6px; padding: 8px 16px 0; flex-wrap: wrap; }
.h2-body { overflow-y: auto; padding: 10px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.h2-intro { margin: 0; font-size: var(--mm-fs-14); color: var(--text2); }
.h2-sec { border: 1px solid var(--border); border-radius: var(--mm-r-btn); padding: 10px 12px; background: var(--bg); }
.h2-h { font-weight: 600; font-size: var(--mm-fs-16); margin-bottom: 6px; cursor: default; }
details.h2-sec > summary.h2-h { cursor: pointer; margin-bottom: 0; }
details.h2-sec[open] > summary.h2-h { margin-bottom: 6px; }
.h2-de { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; font-size: var(--mm-fs-14); border-bottom: 1px dashed var(--border); }
.h2-de:last-of-type { border-bottom: none; }
.h2-de b { font-weight: 500; }
.h2-ta { width: 100%; box-sizing: border-box; margin-top: 8px; background: var(--bg2); color: var(--text);
border: 1px solid var(--border); border-radius: var(--mm-r-chip); padding: 8px; font: inherit; font-size: var(--mm-fs-14); }
.h2-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: var(--mm-fs-14); }
.h2-row select { background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: var(--mm-r-chip); padding: 4px 6px; }
.h2-radio label { margin-left: 6px; }
.h2-muted { font-size: var(--mm-fs-13); color: var(--text2); }
.h2-uoc { font-size: var(--mm-fs-14); font-weight: 600; padding: 8px 10px; border-radius: var(--mm-r-chip); background: var(--bg3); }
.h2-warn { font-size: var(--mm-fs-13); color: var(--yellow); }
.h2-err { font-size: var(--mm-fs-13); color: var(--red); }
.h2-tag { font-size: var(--mm-fs-12); padding: 1px 6px; border-radius: var(--mm-r-chip); background: var(--bg3); color: var(--text2); font-weight: 400; }
.h2-pre { white-space: pre-wrap; word-break: break-word; font-size: var(--mm-fs-12); max-height: 50vh; overflow: auto;
background: var(--bg2); border: 1px solid var(--border); border-radius: var(--mm-r-chip); padding: 8px; margin: 6px 0 0; }
.h2-file + .h2-file { margin-top: 10px; }
.h2-buoc { font-size: var(--mm-fs-14); margin: 6px 0; }
.h2-lan { display: block; width: 100%; text-align: left; background: var(--bg2); color: var(--text); border: 1px solid var(--border);
border-radius: var(--mm-r-chip); padding: 8px 10px; margin-top: 6px; cursor: pointer; font-size: var(--mm-fs-13); }
.h2-lan:hover { border-color: var(--accent); }
@media (max-width: 700px) {
.h2-modal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: none; }
.h2-body { padding: 10px 12px 24px; }
.h2-row { flex-direction: column; align-items: flex-start; }
}


.kn-wrap { max-width: 760px; }
.kn-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; border-bottom: 1px solid var(--glass-brd); padding-bottom: 10px; }
.kn-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border-radius: var(--mm-r-btn); border: 1px solid transparent; background: transparent; color: var(--text2); font: 600 var(--mm-fs-14) inherit; cursor: pointer; }
.kn-tab:hover { background: var(--surface-2); color: var(--text); }
.kn-tab.on { background: var(--surface-2); border-color: var(--accent); color: var(--text); }
.kn-dot { width: 9px; height: 9px; border-radius: 50%; background: #aab2bf; flex: 0 0 auto; }
.kn-dot-ok { background: #1f9d55; } .kn-dot-err { background: #d93636; } .kn-dot-wait { background: #e0a100; }
.kn-soon { margin-left: auto; font-size: var(--mm-fs-12); opacity: .6; }
.kn-pane { border: 1px solid var(--glass-brd); border-radius: var(--mm-r-card); padding: 18px; background: var(--surface, transparent); }
.kn-pane[hidden] { display: none; }
.kn-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kn-head h3 { margin: 0; font-size: var(--mm-fs-20); }
.kn-ico { display: inline-flex; }
.kn-pill { font-size: var(--mm-fs-12); font-weight: 700; padding: 3px 10px; border-radius: var(--mm-r-pill); border: 1px solid var(--glass-brd); }
.kn-pill-ok { color: #1f9d55; border-color: #1f9d55; } .kn-pill-err { color: #d93636; border-color: #d93636; }
.kn-pill-wait { color: #b88400; border-color: #b88400; } .kn-pill-off { color: var(--text2); }
.kn-switch { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--mm-fs-14); }
.kn-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.kn-switch i { width: 44px; height: 26px; border-radius: var(--mm-r-btn); background: #aab2bf; position: relative; transition: background .15s; }
.kn-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.kn-switch input:checked + i { background: #1f9d55; }
.kn-switch input:checked + i::after { transform: translateX(18px); }
.kn-switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.kn-status { margin: 12px 0 4px; padding: 10px 12px; border-radius: var(--mm-r-btn); background: var(--surface-2); font-size: var(--mm-fs-14); line-height: 1.5; min-height: 20px; }
.kn-status:empty { display: none; }
.kn-intro { margin: 10px 0 0; }
.kn-step { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--glass-brd); }
.kn-step-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 700; }
.kn-step-h b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-size: var(--mm-fs-13); }
.kn-help { margin-top: 6px; }
.kn-help summary { cursor: pointer; font-size: var(--mm-fs-13); color: var(--link-ink, var(--accent)); }
.kn-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.kn-actions .gcard-btn { min-height: 42px; }
@media (max-width: 760px) {
.kn-soon { display: none; }
.kn-pane { padding: 14px; border-radius: var(--mm-r-btn); }
.kn-actions .gcard-btn { flex: 1; }
}


.gop-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--glass-brd); }
.gop-tab { min-height: 40px; padding: 8px 16px; border-radius: var(--mm-r-btn); border: 1px solid transparent; background: transparent; color: var(--text2); font: 600 var(--mm-fs-14) inherit; cursor: pointer; }
.gop-tab:hover { background: var(--surface-2); color: var(--text); }
.gop-tab[aria-selected="true"] { background: var(--surface-2); border-color: var(--accent); color: var(--text); }
.gop-back { margin-bottom: 12px; padding: 6px 12px; border-radius: var(--mm-r-btn); border: 1px solid var(--glass-brd); background: none; color: var(--text2); font-size: var(--mm-fs-13); cursor: pointer; }
.gop-back:hover { color: var(--accent); border-color: var(--accent); }
.gop-body { min-width: 0; }
.gop-con { margin-top: 22px; padding: 14px; border: 1px dashed var(--glass-brd); border-radius: var(--mm-r-btn); display: grid; gap: 10px; }
.gop-con-h { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.gop-con-h span { font-size: var(--mm-fs-13); color: var(--text3); }
.gop-con-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.gop-con-card { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--glass-brd); border-radius: var(--mm-r-btn); background: var(--surface-2); }
.gop-con-card small { color: var(--text3); font-size: var(--mm-fs-12); }
.gop-con-card .s-btn-ghost { justify-self: start; }


.ct-det { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--glass-brd); border-radius: var(--mm-r-btn); background: var(--surface-2); }
.ct-det[hidden] { display: none; }
.ct-det dl { margin: 0; display: grid; grid-template-columns: minmax(110px, 170px) minmax(0, 1fr); gap: 6px 14px; font-size: var(--mm-fs-13); }
.ct-det dt { color: var(--text3); }
.ct-det dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 560px) { .ct-det dl { grid-template-columns: minmax(0, 1fr); } .ct-det dt { margin-top: 6px; font-weight: 700; } }


.wf-card.lp-rowcard { padding: 8px 12px; margin-bottom: 6px; }
.lp-r { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lp-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--mm-r-btn); background: var(--accent2-wash); color: var(--accent); }
.lp-m { flex: 1 1 auto; min-width: 0; }
.lp-m .wf-name { font-size: var(--mm-fs-14); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-sub { font-size: var(--mm-fs-12); color: var(--text3); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.lp-st { flex: none; font-size: var(--mm-fs-12); white-space: nowrap; }
.lp-st:empty { display: none; }
.lp-b { flex: none; display: flex; gap: 6px; }
.lp-rowcard > .wf-actions { display: none; }
@media (max-width: 640px) {
.lp-r { flex-wrap: wrap; }
.lp-m { flex: 1 1 calc(100% - 50px); }
.lp-st { order: 3; }
.lp-b { order: 4; margin-left: auto; }
}
.ngan-bd { position: fixed; inset: 0; z-index: 900; background: rgba(0, 0, 0, .28); }
.ngan { position: fixed; z-index: 901; top: 0; right: 0; bottom: 0; width: min(400px, 100vw); display: flex; flex-direction: column; background: var(--bg2); border-left: 1px solid var(--border); box-shadow: -8px 0 28px rgba(0, 0, 0, .18); animation: ngan-vao .16s ease-out; }
.ngan-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.ngan-t { flex: 1; min-width: 0; font-weight: 700; font-size: var(--mm-fs-16); overflow-wrap: anywhere; }
.ngan-x { flex: none; border: 0; background: transparent; color: var(--text2); cursor: pointer; padding: 6px; border-radius: var(--mm-r-btn); }
.ngan-b { flex: 1; overflow-y: auto; padding: 12px 14px; }
.ngan-b dl { margin: 0; display: grid; grid-template-columns: minmax(80px, 120px) minmax(0, 1fr); gap: 8px 12px; font-size: var(--mm-fs-13); }
.ngan-b dt { color: var(--text3); }
.ngan-b dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ngan-f { padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); }
.ngan .wf-actions { display: flex; }
@keyframes ngan-vao { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 640px) {
.ngan { top: auto; left: 0; width: 100%; max-height: 85vh; border-left: 0; border-top: 1px solid var(--border); border-radius: var(--mm-r-card) var(--mm-r-card) 0 0; animation: none; }
.ngan-b dl { grid-template-columns: minmax(0, 1fr); }
.ngan-b dt { margin-top: 6px; font-weight: 700; }
}


.prov-list .prov-card { padding: 8px 14px; }
.prov-head-click { cursor: pointer; }
.prov-head .prov-shield svg { width: 18px; height: 18px; }
.prov-car { flex: none; display: inline-flex; color: var(--text3); transition: transform .15s; }
.prov-card.open .prov-car { transform: rotate(180deg); }
.prov-card:not(.open) > .prov-body { display: none; }
.prov-card.open > .prov-body { padding-bottom: 6px; }


.knn-ds { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.knn-hang { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--mm-r-btn); background: var(--bg2); min-width: 0; }
.knn-hang.mo .ud-ic { background: linear-gradient(145deg, #8a6cf0, #5b3fd0); color: #fff; }
.knn-hang .ud-ic { flex: none; width: 34px; height: 34px; margin: 0; }
.knn-hm { flex: 1 1 auto; min-width: 0; }
.knn-hm b { font-size: var(--mm-fs-14); }
.knn-ht { font-size: var(--mm-fs-12); color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knn-hs { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: var(--mm-fs-12); }
.knn-hb { flex: none; display: flex; gap: 6px; }
.knn-gt summary { cursor: pointer; font-size: var(--mm-fs-12); color: var(--text3); }
.knn-ph > summary { cursor: pointer; list-style: none; }
.knn-ph:not([open]) { padding: 8px 14px; margin-top: 10px; }
@media (max-width: 640px) {
.knn-hang { flex-wrap: wrap; }
.knn-hm { flex: 1 1 calc(100% - 50px); }
.knn-ht { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.knn-hs { flex-direction: row; align-items: center; gap: 8px; }
.knn-hb { margin-left: auto; }
}


#pkGrid { grid-template-columns: 1fr; gap: 6px; max-width: none; }
#pkGrid .kho-the { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "av ten st" "av desc nut" "av meta nut"; column-gap: 12px; row-gap: 2px; align-items: center; padding: 8px 12px; }
#pkGrid .kho-dau { grid-area: av; align-self: center; }
#pkGrid .kho-nhom, #pkGrid .kho-goc { display: none; }
#pkGrid .kho-ten { grid-area: ten; font-size: var(--mm-fs-14); }
#pkGrid .kho-the .cat-desc { grid-area: desc; font-size: var(--mm-fs-12); opacity: .75; display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
#pkGrid .kho-the .prov-meta { grid-area: meta; font-size: var(--mm-fs-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pkGrid .kho-daicai { grid-area: st; justify-self: end; font-size: var(--mm-fs-12); white-space: nowrap; }
#pkGrid .kho-nut { grid-area: nut; justify-self: end; }
#pkGrid .kho-btn { flex: none; padding: 6px 14px; font-size: var(--mm-fs-13); }
@media (max-width: 640px) {
#pkGrid .kho-the { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "av ten" "av desc" "av meta" "st st" "nut nut"; }
#pkGrid .kho-daicai, #pkGrid .kho-nut { justify-self: start; }
}


#catGrid { grid-template-columns: 1fr; gap: 6px; max-width: none; }
#catGrid .cat-card { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; grid-template-areas: "ico name doc btn" "ico desc doc btn"; column-gap: 10px; row-gap: 0; align-items: center; padding: 8px 12px; }
#catGrid .cat-ico { grid-area: ico; height: auto; font-size: var(--mm-fs-20); }
#catGrid .cat-ico .ico-img { width: 28px; height: 28px; }
#catGrid .cat-name { grid-area: name; font-size: var(--mm-fs-14); }
#catGrid .cat-desc { grid-area: desc; font-size: var(--mm-fs-12); display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
#catGrid .cat-doc { grid-area: doc; white-space: nowrap; }
#catGrid .gcard-btn { grid-area: btn; width: auto; flex: none; padding: 6px 14px; margin: 0; }
#catGrid .cat-x { top: 4px; right: 4px; }
@media (max-width: 640px) {
#catGrid .cat-card { grid-template-columns: 38px minmax(0, 1fr); grid-template-areas: "ico name" "ico desc" "doc doc" "btn btn"; }
#catGrid .gcard-btn { justify-self: start; margin-top: 6px; }
}
details.kn-gt > summary { cursor: pointer; font-size: var(--mm-fs-12); color: var(--text3); }
details#hdWrap > summary { cursor: pointer; }


#agCards.cards { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 6px; }
.ag-card.lp-rowcard { padding: 8px 12px; }
.ag-card .lp-r .ag-sel { flex: none; }
.ag-card .lp-st { max-width: 110px; overflow: hidden; text-overflow: ellipsis; color: var(--text3); }
@media (max-width: 640px) { #agCards.cards { grid-template-columns: minmax(0, 1fr); } }

.htc-h { font-size: var(--mm-fs-16); color: var(--mm-text); margin: 0 0 var(--mm-sp-1); }
.htc-p { color: var(--mm-muted); font-size: var(--mm-fs-14); max-width: 680px; margin: 0 0 var(--mm-sp-3); }
.htc-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mm-sp-2); margin-bottom: var(--mm-sp-3); }
.htc-dim, .htc-stat, .htc-open { color: var(--mm-dim); font-size: var(--mm-fs-13); }
.htc-stat { margin-bottom: var(--mm-sp-1); }
.htc-open { margin-bottom: var(--mm-sp-3); }
.htc-chip { display: inline-block; padding: 0 var(--mm-sp-2); border-radius: var(--mm-r-chip); background: var(--mm-wash); color: var(--mm-text); }
.htc-tag { font-size: var(--mm-fs-12); padding: 0 var(--mm-sp-2); border-radius: var(--mm-r-pill); background: var(--mm-wash); color: var(--mm-brand); }
.htc-ly { color: var(--mm-muted); font-size: var(--mm-fs-13); margin-top: var(--mm-sp-1); }
.htc-nut { display: flex; gap: var(--mm-sp-2); margin-top: var(--mm-sp-2); flex-wrap: wrap; }
.htc-ban summary { cursor: pointer; color: var(--mm-link); font-size: var(--mm-fs-13); margin-top: var(--mm-sp-1); }
.htc-ban pre { white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto; font-size: var(--mm-fs-12);
background: var(--mm-field); box-shadow: var(--mm-in-sm); border-radius: var(--mm-r-field); padding: var(--mm-sp-3); }





.tt-box { max-width: 760px; }
.tt-ds { display: flex; flex-direction: column; gap: var(--mm-sp-3); }
.tt-the {
background: var(--mm-panel); color: var(--mm-text); border: 1px solid var(--mm-line);
border-radius: var(--mm-r-card); box-shadow: var(--mm-out-sm); padding: var(--mm-sp-3) var(--mm-sp-4);
transition: box-shadow .16s;
}
:root[data-theme="light"] .tt-the { border: 0; }
.tt-the.main { box-shadow: inset 3px 0 var(--mm-brand), var(--mm-out-sm); }
.tt-the.dang-keo { box-shadow: var(--mm-out); opacity: .92; position: relative; z-index: 2; }
.tt-ds.dang-keo { user-select: none; }
.tt-dau { display: flex; align-items: center; gap: var(--mm-sp-2); min-width: 0; flex-wrap: wrap; }
.tt-keo {
cursor: grab; touch-action: none; color: var(--mm-dim); font-size: var(--mm-fs-16); letter-spacing: -3px;
padding: var(--mm-sp-2) var(--mm-sp-2); margin: calc(-1 * var(--mm-sp-2)) 0 calc(-1 * var(--mm-sp-2)) calc(-1 * var(--mm-sp-2));
border-radius: var(--mm-r-btn); line-height: 1;
}
.tt-keo:focus-visible { outline: 2px solid var(--mm-link); outline-offset: 2px; }
.tt-ten { font-weight: 700; font-size: var(--mm-fs-14); min-width: 0; overflow-wrap: anywhere; }
.tt-tag { font-size: var(--mm-fs-12); font-weight: 600; padding: 2px var(--mm-sp-2); border-radius: var(--mm-r-pill); }
.tt-tag.ok { color: var(--mm-ok); background: color-mix(in srgb, var(--mm-ok) 10%, transparent); }
.tt-tag.warn { color: var(--mm-warn); background: color-mix(in srgb, var(--mm-warn) 10%, transparent); }
.tt-chips { display: flex; align-items: center; gap: var(--mm-sp-2); flex-wrap: wrap; margin-top: var(--mm-sp-2); }
.tt-nhan { font-size: var(--mm-fs-12); font-weight: 700; letter-spacing: .5px; color: var(--mm-dim); min-width: 84px; }
.tt-nhan.main { color: var(--mm-link); }
.tt-chip {
display: inline-flex; align-items: center; gap: var(--mm-sp-1); max-width: 100%;
background: var(--mm-panel); color: var(--mm-text); border: 1px solid var(--mm-line);
border-radius: var(--mm-r-pill); box-shadow: var(--mm-out-xs); font: inherit; font-size: var(--mm-fs-13);
padding: var(--mm-sp-1) var(--mm-sp-3); min-height: 32px; cursor: pointer; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}
:root[data-theme="light"] .tt-chip { border: 0; }
.tt-chip:hover { color: var(--mm-link); }
.tt-chip:active { box-shadow: var(--mm-in-sm); }
.tt-chip svg { width: 14px; height: 14px; flex: 0 0 auto; }
.tt-cham { width: 8px; height: 8px; border-radius: var(--mm-r-pill); background: var(--mm-ok); flex: 0 0 auto; }
.tt-dao {
align-self: center; display: inline-flex; align-items: center; gap: var(--mm-sp-1);
background: var(--mm-panel); color: var(--mm-muted); border: 1px solid var(--mm-line);
border-radius: var(--mm-r-pill); box-shadow: var(--mm-out-xs); font: inherit; font-size: var(--mm-fs-12);
padding: var(--mm-sp-1) var(--mm-sp-3); min-height: 30px; cursor: pointer; margin: calc(-1 * var(--mm-sp-1)) 0;
}
:root[data-theme="light"] .tt-dao { border: 0; }
.tt-dao:hover { color: var(--mm-link); }
.tt-dao svg { width: 14px; height: 14px; }
.tt-note, .tt-trong { font-size: var(--mm-fs-12); color: var(--mm-dim); margin-top: var(--mm-sp-2); line-height: 1.5; }

.tt-khoa { margin-top: var(--mm-sp-3); padding: var(--mm-sp-2) var(--mm-sp-3); border-radius: var(--mm-r-field); box-shadow: var(--mm-in-sm); }
.tt-khoa-ds { list-style: none; margin: 0; padding: 0; }
.tt-k { border-radius: var(--mm-r-btn); }
.tt-k.on { background: var(--mm-wash); box-shadow: inset 3px 0 var(--mm-brand); }
.tt-k.tat .tt-k-ten { color: var(--mm-dim); text-decoration: line-through; }
.tt-k-dong { display: flex; align-items: center; gap: var(--mm-sp-2); padding: var(--mm-sp-1) var(--mm-sp-2); min-height: 40px; }
.tt-k-so { font-size: var(--mm-fs-12); font-weight: 700; color: var(--mm-muted); width: 16px; text-align: center; }
.tt-k-ten { flex: 1; min-width: 0; font-size: var(--mm-fs-13); overflow-wrap: anywhere; }
.tt-k-ten code { color: var(--mm-dim); font-size: var(--mm-fs-12); }
.tt-k-tt { font-size: var(--mm-fs-12); color: var(--mm-muted); white-space: nowrap; }
.tt-k.on .tt-k-tt { color: var(--mm-link); font-weight: 600; }
.tt-k-nut {
background: transparent; border: 0; color: var(--mm-muted); cursor: pointer; border-radius: var(--mm-r-chip);
width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.tt-k-nut:hover:not(:disabled) { color: var(--mm-link); background: var(--mm-row); }
.tt-k-nut:disabled { opacity: .35; cursor: default; }
.tt-k-nut svg { width: 16px; height: 16px; }
.tt-k-sua { display: flex; flex-direction: column; gap: var(--mm-sp-2); padding: var(--mm-sp-2); }
.tt-k-sua[hidden] { display: none; }
.tt-k-sua .js-input { margin: 0; }
.tt-k-hang { display: flex; gap: var(--mm-sp-2); flex-wrap: wrap; }
.tt-k-hang .gcard-btn { width: auto; }
.tt-them {
width: 100%; margin-top: var(--mm-sp-2); background: transparent; color: var(--mm-muted); font: inherit;
font-size: var(--mm-fs-13); border: 1px dashed var(--mm-line); border-radius: var(--mm-r-btn);
padding: var(--mm-sp-2); min-height: 40px; cursor: pointer;
}
:root[data-theme="light"] .tt-them { border-color: var(--mm-dim); }
.tt-them:hover { color: var(--mm-link); }
.tt-k-note { font-size: var(--mm-fs-12); color: var(--mm-dim); margin-top: var(--mm-sp-2); line-height: 1.5; }

.tt-pop {
position: fixed; z-index: 400; min-width: 200px; max-height: min(60vh, 420px); overflow-y: auto;
background: var(--mm-panel); color: var(--mm-text); border: 1px solid var(--mm-line);
border-radius: var(--mm-r-field); box-shadow: var(--mm-out); padding: var(--mm-sp-1);
}
:root[data-theme="light"] .tt-pop { border: 0; }
.tt-mn-hang {
display: flex; align-items: center; gap: var(--mm-sp-2); width: 100%; text-align: left;
background: transparent; border: 0; color: inherit; font: inherit; font-size: var(--mm-fs-13);
padding: var(--mm-sp-2) var(--mm-sp-3); border-radius: var(--mm-r-btn); cursor: pointer; min-height: 36px;
}
.tt-mn-hang:hover { background: var(--mm-row); }
.tt-mn-hang.on { color: var(--mm-link); background: var(--mm-wash); }
.tt-mn-tick { width: 16px; display: inline-flex; color: var(--mm-ok); }
.tt-mn-tick svg { width: 16px; height: 16px; }
.tt-mn-chu small { display: block; color: var(--mm-dim); font-size: var(--mm-fs-12); }

.tt-sheet-nen { position: fixed; inset: 0; z-index: 399; background: var(--mm-scrim); }
.tt-sheet {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 400; max-height: 80vh; display: flex; flex-direction: column;
background: var(--mm-panel); color: var(--mm-text); border-radius: var(--mm-r-card) var(--mm-r-card) 0 0;
box-shadow: var(--mm-out); padding-bottom: max(var(--mm-sp-4), env(safe-area-inset-bottom));
animation: ttLen .22s ease;
}
.tt-sheet-dau { display: flex; align-items: center; justify-content: space-between; gap: var(--mm-sp-3);
padding: var(--mm-sp-4) var(--mm-sp-4) var(--mm-sp-2); font-size: var(--mm-fs-16); }
.tt-sheet-x { background: var(--mm-panel); border: 0; box-shadow: var(--mm-out-xs); color: var(--mm-muted);
width: 40px; height: 40px; border-radius: var(--mm-r-pill); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tt-sheet-ds { overflow-y: auto; padding: 0 var(--mm-sp-2); }
.tt-sheet .tt-mn-hang { min-height: 48px; font-size: var(--mm-fs-14); }
@keyframes ttLen { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 600px) {
.tt-the { padding: var(--mm-sp-3); }
.tt-nhan { min-width: 0; width: 100%; }

.mp-overlay { align-items: flex-end; }
.mp-overlay .mp-box { width: 100%; max-width: none !important; max-height: 88vh;
border-radius: var(--mm-r-card) var(--mm-r-card) 0 0; animation: ttLen .22s ease; }
}