/* DGNL.vn V2 — vertical hierarchical explorer, keyboard-friendly and motion-aware */
:root{--uiv2-ink:#12363a;--uiv2-sea:#118477;--uiv2-bg:#f5f8f7;--uiv2-line:#e1ebe6;--uiv2-soft:#eef7f3;--uiv2-shadow:0 22px 65px rgba(14,66,62,.075)}
@keyframes explorer-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes tree-row-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes soft-pulse{0%,100%{opacity:1;box-shadow:0 0 0 3px rgba(44,184,138,.10)}50%{opacity:.6;box-shadow:0 0 0 7px rgba(44,184,138,.04)}}
@keyframes soft-shimmer{from{background-position:-200% 0}to{background-position:200% 0}}
html{scroll-behavior:smooth}body[data-page="catalog"],body[data-page="system"]{background:var(--uiv2-bg)}
.site-header{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);background:rgba(250,253,250,.94)}
.site-header .nav-inner .brand-symbol{transition:transform .3s cubic-bezier(.2,.8,.2,1)}.site-header .brand:hover .brand-symbol{transform:rotate(-6deg) scale(1.08)}
body[data-page="catalog"] .page-hero,body[data-page="system"] .page-hero{background:radial-gradient(circle at 85% 20%,#d9f3e9 0,transparent 30%),radial-gradient(circle at 15% 100%,#e5edf8 0,transparent 35%),linear-gradient(110deg,#f6faf7,#edf7f4);padding:43px 0 41px;border-bottom:1px solid #e4ede7}
body[data-page="catalog"] .page-hero h1,body[data-page="system"] .page-hero h1{font-size:clamp(31px,4.2vw,49px);letter-spacing:-.05em;max-width:850px}
body[data-page="catalog"] .page-hero .eyebrow,body[data-page="system"] .page-hero .eyebrow{border:1px solid #d4e7dc;background:#fff;padding:5px 11px;border-radius:30px;letter-spacing:.12em}
body[data-page="catalog"] .page-hero .eyebrow:before,body[data-page="system"] .page-hero .eyebrow:before{width:7px;height:7px;border-radius:50%}
body[data-page="catalog"] .wrap.section,body[data-page="system"] .wrap.section{padding-top:30px!important;padding-bottom:80px}
.explorer-shell{border:1px solid #dce9e3;background:#fff;border-radius:24px;overflow:hidden;box-shadow:var(--uiv2-shadow);animation:explorer-arrive .55s both;min-width:0}
.explorer-intro{padding:26px 29px 20px;display:flex;gap:18px;justify-content:space-between;align-items:center;background:linear-gradient(109deg,#fff 63%,#eff8f4)}
.explorer-kicker{font-size:10px;font-weight:850;letter-spacing:.13em;color:#529281;display:flex;align-items:center;gap:9px;margin-bottom:10px}
.pulse-dot{width:8px;height:8px;background:#21a886;border-radius:50%;animation:soft-pulse 2.6s infinite;flex:none}
.explorer-intro h2{font-size:clamp(22px,3vw,30px);margin:0 0 7px;letter-spacing:-.045em}.explorer-intro p{font-size:13px;margin:0;color:#6f8381;max-width:690px}
.explorer-totals{display:flex;gap:8px;align-items:baseline;flex-shrink:0;background:rgba(255,255,255,.85);border:1px solid #e1ebe6;border-radius:16px;padding:13px 16px}
.explorer-totals>span:not(.explorer-total-divider){color:#147b70;font-size:23px;font-weight:850;letter-spacing:-.045em;line-height:1}.explorer-totals small{font-size:9px;font-weight:800;color:#8da39e;letter-spacing:.08em}.explorer-total-divider{width:1px;height:18px;background:#dce9e3;margin:0 8px;align-self:center}
.explorer-controls{padding:8px 28px 21px;border-bottom:1px solid var(--uiv2-line);display:grid;gap:14px}
.explorer-filters{display:flex;align-items:center;gap:7px;overflow:auto;padding-bottom:4px;scrollbar-width:thin}.explorer-chip{border:1px solid #e5ece7;background:#f8faf9;color:#647f78;min-height:37px;padding:6px 13px;border-radius:11px;display:inline-flex;align-items:center;white-space:nowrap;gap:9px;font-size:12px;font-weight:790;transition:background .2s,transform .2s,border-color .2s,color .2s}
.explorer-chip span{font-size:10px;color:#86a198;font-weight:800;padding:1px 5px;border-radius:5px;background:#eaf2ec}.explorer-chip:hover{transform:translateY(-1px);border-color:#bcdcd0;color:#0a7669}.explorer-chip.active{background:#107e72;border-color:#107e72;color:#fff;box-shadow:0 5px 15px #0e827522}.explorer-chip.active span{color:#e9fff6;background:#2e9a8c}
.explorer-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.explorer-search,.manager-tree-search{display:flex;align-items:center;gap:9px;background:#f7faf8;border:1px solid #dfe9e4;border-radius:12px;min-height:43px;padding:0 12px;transition:border-color .2s,box-shadow .2s;background-color .2s;flex:1;min-width:190px}.explorer-search:focus-within,.manager-tree-search:focus-within{border-color:#47ae93;background:#fff;box-shadow:0 0 0 4px #20aa7d14}.explorer-search>span,.manager-tree-search>span{font-size:23px;color:#8aa89c;line-height:1}.explorer-search input,.manager-tree-search input{border:0;background:transparent;outline:none;flex:1;min-width:0;font-size:13px;color:var(--uiv2-ink)}.explorer-search input::placeholder,.manager-tree-search input::placeholder{color:#9baea8}.explorer-search kbd{color:#97ada4;border:1px solid #dae7df;border-radius:5px;font-size:10px;min-width:19px;text-align:center;padding:1px;background:white}
.explorer-tool-btn{border:1px solid #e1eae5;background:#fff;border-radius:11px;padding:10px 13px;min-height:41px;color:#657f77;font-weight:740;font-size:12px;white-space:nowrap;transition:transform .2s,background .2s,border-color .2s}.explorer-tool-btn:hover{background:#eaf7f0;color:#0b7566;transform:translateY(-1px);border-color:#acd8c7}
.explorer-labelbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 29px;background:#f4f8f5;border-bottom:1px solid #e0eae4;font-size:10px;letter-spacing:.11em;font-weight:850;color:#728f82}
.explorer-labelbar>span:last-child{letter-spacing:.04em;color:#9cafaa;font-weight:700}
.explorer-directory{padding:12px 19px 21px;min-height:230px}.dir-root,.dir-nested,.manager-root,.manager-nested{margin:0;padding:0;list-style:none}.dir-root{display:grid;gap:6px}.dir-item{min-width:0;position:relative;animation:tree-row-in .28s both;animation-delay:calc(var(--tree-i) * 25ms)}
.dir-row{position:relative;display:flex;align-items:center;gap:11px;min-height:64px;border:1px solid transparent;padding:9px 12px;border-radius:12px;transition:background .23s,border-color .23s,box-shadow .23s,transform .23s}
.dir-group>.dir-row{background:#f8fbf9}.dir-root>.dir-group>.dir-row{background:linear-gradient(95deg,#eff8f4,#f8fbf9);border-color:#e5eee9;min-height:75px}
.dir-group>.dir-row:hover{background:#edf8f3;border-color:#c6e3d5;box-shadow:0 6px 18px #0d735914}.dir-leaf>.dir-row{background:#fff;border:1px solid #e9efeb;margin:4px 0;min-height:75px}.dir-leaf>.dir-row:hover{border-color:#a6dbcc;background:#f6fbf8;transform:translateX(3px);box-shadow:0 7px 17px #156a4f0d}
.dir-arrow{display:grid;place-items:center;flex:none;width:27px;height:27px;background:white;border:1px solid #dceae2;border-radius:9px;color:#5c9684;transition:background .2s,transform .2s}.dir-arrow svg,.manager-toggle svg{transition:transform .26s cubic-bezier(.2,.8,.2,1)}.dir-item.is-open>.dir-row .dir-arrow svg{transform:rotate(90deg)}.dir-arrow:hover{color:#047f6c;background:#e5f6eb}
.dir-icon{width:39px;height:39px;display:grid;place-items:center;background:#e6f3ed;color:#1c8073;flex:none;border-radius:11px;transition:transform .25s,background .25s}.dir-root>.dir-item>.dir-row .dir-icon{background:#cfece0;color:#087462;width:43px;height:43px}.dir-leaf>.dir-row .dir-icon{background:#f3f5f3;color:#6b8d7e}.dir-row:hover .dir-icon{transform:translateY(-2px) scale(1.04)}
.dir-file-decor{width:27px;height:27px;flex:none;display:grid;place-items:center;border:1px solid #dcece4;border-radius:50%;color:#6caf97;background:#f7fcf8}
.dir-name{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:1px;text-align:left;color:#18343a;background:none}.dir-name strong{font-size:13.5px;line-height:1.45;letter-spacing:-.018em;overflow-wrap:anywhere}.dir-root>.dir-item>.dir-row .dir-name strong{font-size:15px}.dir-name small{color:#82948e;font-size:11px;line-height:1.5;font-weight:500;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dir-overline{display:none;font-size:9px;font-weight:820;letter-spacing:.11em;color:#5f9f8a}.dir-root>.dir-item>.dir-row .dir-overline{display:block}
.dir-meta{flex:none;font-size:11px;font-weight:770;border-radius:20px;color:#498574;background:#e2f3e9;padding:5px 10px;white-space:nowrap}.dir-meta.is-leaf{background:#f2f5f3;color:#85978e}
.dir-go{display:flex;align-items:center;gap:8px;flex:none;font-size:11px;font-weight:830;background:#0e8476;color:#fff;border-radius:10px;padding:10px 12px;transition:transform .2s,background .2s,box-shadow .2s}.dir-go:hover{background:#086d61;box-shadow:0 8px 17px #0b75601e;transform:translateX(2px)}.dir-go svg{transition:transform .2s}.dir-go:hover svg{transform:translateX(2px)}
.dir-fold,.manager-fold{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .32s cubic-bezier(.2,.74,.2,1),opacity .2s ease}.dir-fold-inner,.manager-fold-inner{min-height:0;overflow:hidden}.dir-item.is-open>.dir-fold,.manager-node.is-open>.manager-fold{grid-template-rows:1fr;opacity:1}
.dir-nested{padding:4px 0 5px 30px;margin-left:25px;border-left:1px dashed #c9ddd2}.dir-nested>.dir-item>.dir-row{margin-left:0}.dir-nested .dir-nested{margin-left:21px;padding-left:15px}.dir-nested .dir-group>.dir-row{background:#fff}.dir-nested .dir-group>.dir-row:hover{background:#f1faf5}.dir-nested .dir-icon{width:36px;height:36px;border-radius:10px}.dir-nested .dir-icon svg{width:16px}.dir-nested .dir-item.level-4 .dir-name strong{font-weight:770}
.dir-empty-branch{padding:16px 15px;font-size:12px;color:#9ea9a5;font-style:italic}.dir-empty-state{padding:53px 18px;text-align:center;display:flex;align-items:center;flex-direction:column;gap:10px;color:#6f9787}.dir-empty-state h3{margin:1px 0;font-size:18px}.dir-empty-state p{margin:0 0 10px;font-size:13px}
.explorer-bottom{display:flex;align-items:center;gap:8px;padding:15px 27px;background:#fbfdfb;border-top:1px solid var(--uiv2-line);font-size:11px;color:#779187;flex-wrap:wrap}.explorer-bottom a{color:#0b7b6a;font-weight:800;text-decoration:underline;text-underline-offset:2px}.explorer-demo-dot{width:7px;height:7px;background:#dc9e60;border-radius:50%}
/* Console: full vertical ul > li manager */
.console-body{background:#f5f8f7}.console-main{min-width:0}.console-board-v2{display:block!important;grid-template-columns:none!important;min-height:170px;border:1px solid var(--uiv2-line);border-radius:18px;background:white;overflow:hidden;box-shadow:var(--uiv2-shadow);animation:explorer-arrive .42s both}
.manager-tree-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:16px 0 13px;flex-wrap:wrap}.manager-tree-head h3{font-size:19px;margin:3px 0 6px}.manager-tree-head h3 .muted{font-size:12px;font-weight:650}.manager-tree-head p{font-size:12px;margin:0;max-width:500px}.manager-tree-tools{display:flex;gap:7px;align-items:center;flex-wrap:wrap;flex:1;justify-content:flex-end}.manager-tree-search{max-width:380px;background:white;min-width:200px}.manager-tree-tools .btn{font-size:12px}
.manager-root{padding:13px 14px 20px}.manager-node{position:relative;animation:tree-row-in .24s both;animation-delay:calc(var(--tree-i)*20ms)}.manager-row{display:flex;gap:9px;align-items:center;min-height:57px;padding:6px 11px;border-radius:11px;transition:background .2s,border-color .2s,box-shadow .2s;border:1px solid transparent}.manager-root>.manager-node>.manager-row{background:#f0f7f3;border-color:#e4efe8;margin:3px 0}.manager-node:not(.is-leaf)>.manager-row:hover{background:#eef8f2;border-color:#d1e7d9}.manager-node.is-selected>.manager-row{border-color:#b3dfca!important;background:#eaf8f0!important;box-shadow:inset 3px 0 0 #119d7b}.manager-node.is-leaf>.manager-row{background:#fff;border-color:#ecf0ed;margin:3px 0}.manager-node.is-leaf>.manager-row:hover{background:#f7fcf9;border-color:#c5e5d2}
.manager-toggle{width:26px;height:26px;display:grid;place-items:center;flex:none;border:1px solid #d6e6df;border-radius:8px;color:#598777;background:#fff;transition:background .2s}.manager-toggle:hover{background:#e0f2e7}.manager-node.is-open>.manager-row .manager-toggle svg{transform:rotate(90deg)}.manager-noarrow{width:26px;height:26px;flex:none;display:grid;place-items:center;color:#7bbb9e}
.manager-level-icon{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:10px;background:#e2f3e8;color:#237968}.manager-node.is-leaf .manager-level-icon{background:#f0f5f1;color:#719883}.manager-label{background:transparent;text-align:left;padding:2px 1px;min-width:0;flex:1;color:#163638}.manager-label strong{display:block;line-height:1.4;font-size:13px;font-weight:790;overflow-wrap:anywhere}.manager-root>.manager-node>.manager-row .manager-label strong{font-size:14px}.manager-label small{display:block;font-size:10px;font-weight:550;color:#8ea199;margin-top:2px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.manager-childcount{flex:none;font-size:10px;font-weight:730;color:#829a8e;border-radius:12px;background:#eaf1eb;padding:4px 8px}.manager-status{flex:none;font-weight:770;font-size:10px;border-radius:15px;padding:5px 9px}.manager-status.is-published{color:#18785a;background:#def3e7}.manager-status.is-draft{color:#996b44;background:#fff0de}.manager-actions{display:flex;align-items:center;gap:4px;flex:none}.manager-icon-btn{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:transparent;color:#77958a;transition:transform .2s,background .2s,color .2s}.manager-icon-btn:hover{background:#dfeee5;color:#0b806b;transform:translateY(-1px)}.manager-icon-btn.manager-add{color:#168a6d;background:#e6f6ed}.manager-icon-btn.manager-add:hover{background:#cbeedc}.manager-open-paper{background:#f1f5f2}
.manager-nested{padding:4px 0 7px 19px;margin-left:27px;border-left:1px dashed #c7dbce}.manager-nested .manager-nested{padding-left:16px;margin-left:18px}.manager-nil{font-size:11px;color:#9baea5;padding:12px 15px;font-style:italic}.manager-empty{padding:50px 17px;text-align:center;color:#6f9985}.manager-empty h3{font-size:17px;margin:8px 0}.manager-empty p{font-size:12px}.manager-root .manager-node .manager-row{will-change:background}
.console-side{background:linear-gradient(166deg,#12363a,#0f3038)}.side-link{transition:background .18s,transform .18s}.console-side .side-link:hover{transform:translateX(2px)}.console-side .side-link.active{box-shadow:inset 3px 0 0 #77dbbc}.stat-card{transition:transform .22s,box-shadow .22s}.stat-card:hover{transform:translateY(-3px);box-shadow:0 12px 27px #1b5c4c10}.drawer-overlay:not([hidden]) .drawer{animation:drawer-sweep .3s cubic-bezier(.22,.72,.2,1)}@keyframes drawer-sweep{from{opacity:.5;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:1010px){.manager-tree-head{align-items:stretch}.manager-tree-tools{justify-content:flex-start}.manager-tree-search{max-width:none;flex-basis:100%}.explorer-intro{align-items:flex-start}.explorer-totals{align-self:center}}
@media(max-width:700px){body[data-page="catalog"] .page-hero,body[data-page="system"] .page-hero{padding:28px 0 30px}.explorer-intro{padding:21px 18px;flex-direction:column;gap:13px}.explorer-intro h2{font-size:23px}.explorer-totals{align-self:flex-start;padding:9px 12px}.explorer-totals>span:not(.explorer-total-divider){font-size:20px}.explorer-controls{padding:9px 14px 17px}.explorer-labelbar{padding:12px 17px}.explorer-labelbar>span:last-child{display:none}.explorer-directory{padding:9px 10px 14px}.dir-row{gap:7px;padding:7px 6px;min-height:62px}.dir-root>.dir-group>.dir-row{min-height:65px}.dir-arrow,.dir-file-decor{width:24px;height:24px;border-radius:7px}.dir-icon{width:33px!important;height:33px!important;border-radius:8px}.dir-name strong{font-size:12px!important}.dir-name small{font-size:10px}.dir-meta{font-size:9px;padding:4px 7px}.dir-go{padding:8px;font-size:0;gap:0}.dir-go svg{width:17px;height:17px}.dir-nested{margin-left:12px;padding-left:10px}.dir-nested .dir-nested{margin-left:9px;padding-left:8px}.dir-nested .dir-nested .dir-nested{padding-left:5px}.dir-nested .dir-nested .dir-nested .dir-nested{padding-left:5px}.dir-nested .dir-overline{display:none}.dir-row .dir-line{display:none}.manager-root{padding:8px 7px 15px}.manager-row{gap:6px;padding:6px 5px;min-height:55px}.manager-nested{margin-left:12px;padding-left:8px}.manager-nested .manager-nested{margin-left:7px;padding-left:6px}.manager-toggle,.manager-noarrow{width:24px;height:24px}.manager-level-icon{width:28px;height:28px;border-radius:8px}.manager-label strong,.manager-root>.manager-node>.manager-row .manager-label strong{font-size:11.5px}.manager-label small{font-size:9px}.manager-childcount,.manager-status{display:none}.manager-icon-btn{width:28px;height:29px}.manager-tree-head{margin-top:15px}.manager-tree-tools .explorer-tool-btn{font-size:11px;padding:8px 11px;min-height:35px}.manager-tree-tools .btn{min-height:35px}.explorer-bottom{padding:12px 17px}}
@media(max-width:440px){.dir-nested{margin-left:10px;padding-left:6px}.dir-nested .dir-nested{margin-left:7px;padding-left:6px}.dir-row{gap:5px;padding:6px 4px}.dir-icon{width:27px!important;height:29px!important}.dir-icon svg{width:14px}.dir-meta{display:none}.dir-name strong{font-size:11px!important}.dir-root>.dir-item>.dir-row .dir-name strong{font-size:12px!important}.explorer-tool-btn{font-size:11px;min-height:39px;padding:8px}.manager-tree-tools .btn{padding:0 9px}.manager-nested .manager-nested{padding-left:4px;margin-left:6px}.manager-actions{gap:0}.manager-icon-btn{width:25px}.manager-level-icon{width:25px;height:27px}.manager-level-icon svg{width:14px}}
@media(prefers-reduced-motion:reduce){.explorer-shell,.dir-item,.manager-node,.drawer-overlay:not([hidden]) .drawer{animation:none!important}.dir-fold,.manager-fold{transition:none!important}.pulse-dot{animation:none!important}}
/* Home: simple editorial list rather than a second card wall */
#home-featured.paper-grid{display:block}.home-featured-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}.home-featured-row{min-width:0;animation:tree-row-in .4s both;animation-delay:calc(var(--tree-i)*60ms)}.featured-row-link{height:100%;background:#fff;border:1px solid #e2ece6;border-radius:16px;padding:16px;display:flex;gap:13px;align-items:center;transition:transform .23s,border-color .23s,box-shadow .23s}.featured-row-link:hover{transform:translateY(-3px);box-shadow:0 14px 28px #0e5c4e13;border-color:#b1dfcb}.featured-row-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;color:#18836f;background:#e6f5ed;flex:none}.featured-row-title{display:block;min-width:0;flex:1}.featured-row-title strong{display:block;font-size:14px;line-height:1.5}.featured-row-title small{display:block;font-size:11px;color:#829b8d;margin-top:4px}.featured-row-arrow{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;flex:none;background:#f1f8f4;color:#197c68;transition:transform .2s}.featured-row-link:hover .featured-row-arrow{transform:translateX(3px)}
@media(max-width:570px){.home-featured-list{grid-template-columns:1fr}.console-top{display:flex;flex-direction:column;align-items:stretch;gap:13px}.console-actions{justify-content:flex-start}.console-actions .btn{font-size:11px!important;width:auto!important;min-height:37px!important;padding:0 10px!important;gap:5px!important}.explorer-tools .explorer-search{flex-basis:100%}.explorer-tools .explorer-tool-btn{flex:1;text-align:center}}
/* Subject summaries on individual SEO landing pages */
.system-subject-outline{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}.system-subject-outline li{min-width:0}.system-subject-outline button{display:flex;align-items:center;gap:12px;width:100%;height:100%;padding:15px;border:1px solid #e0eae4;border-radius:15px;background:#fff;color:#173d39;text-align:left;transition:transform .22s,box-shadow .22s,border-color .22s}.system-subject-outline button:hover{transform:translateY(-2px);border-color:#acd9c2;box-shadow:0 11px 25px #13664c12}.system-subject-outline button>span:nth-child(2){display:grid;gap:4px;flex:1;min-width:0}.system-subject-outline strong{font-size:13px}.system-subject-outline small{font-size:11px;color:#81958d}.system-subject-outline em{font-size:10px;color:#43836d;background:#e9f5ed;padding:5px 7px;border-radius:8px;white-space:nowrap;font-style:normal}.system-subject-outline button>svg{color:#1e8b72}.system-subject-icon{width:41px;height:41px;flex:none;background:#e6f3eb;color:#197f70;border-radius:11px;display:grid;place-items:center}
@media(max-width:700px){.system-subject-outline{grid-template-columns:1fr}}