:root{
  --brand-yellow:#FDC806;--brand-white:#FDFDFD;--brand-black:#000000;--text:#171717;--secondary:#666666;--border:#E6E6E6;--hover:#F7F7F7;--pdf:#D92D20;--free:#1E7A3F;
font-family:"Noto Sans Thai","Noto Sans",Arial,sans-serif;
}
*{box-sizing:border-box}html,body{margin:0;background:var(--brand-white);color:var(--text);font-family:inherit}body{}button,input{font:inherit;color:inherit}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}.documents-canvas{background:var(--brand-white);}
.documents-header{border-bottom:1px solid var(--border);background:var(--brand-white);}.header-icon-button{border:0;background:transparent;padding:0;display:grid;place-items:center;cursor:pointer}.menu-button{}.menu-button img{width:24px;height:24px}.documents-brand{display:flex;align-items:center;overflow:hidden;}.documents-brand img{display:block;width:auto;height:auto;object-fit:contain}.documents-search{border:1px solid var(--border);border-radius:11px;background:var(--brand-white);display:flex;align-items:center;overflow:hidden;}.documents-search:focus-within{border-color:var(--brand-black)}.documents-search input{border:0;outline:0;background:transparent;padding:0 18px;font-size:16px;line-height:24px}.documents-search input::placeholder{color:#666;opacity:1}.documents-search button{border:0;background:transparent;display:grid;place-items:center;cursor:pointer}.documents-search button:hover{background:var(--hover)}.documents-search img{width:24px;height:24px}.notification-button{}.notification-button img{width:24px;height:24px}.notification-dot{position:absolute;right:7px;top:7px;width:7px;height:7px;border-radius:50%;background:var(--brand-yellow)}.documents-account{display:flex;align-items:center;gap:var(--space-2);border:0;background:transparent;padding:0;cursor:pointer;font-size:14px;line-height:20px;}.documents-account:hover{background:var(--hover)}.account-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover}.account-chevron{width:20px;height:20px}
.documents-sidebar{background:var(--brand-white);border-right:1px solid var(--border);}.sidebar-item{border-radius:8px;text-decoration:none;color:var(--brand-black);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);font-size:14px;line-height:20px;font-weight:500;}.sidebar-item img{width:24px;height:24px}.sidebar-item:hover{background:var(--highlight-neutral-hover);color:#0F0F0F}.sidebar-item.is-active{background:transparent;color:#0F0F0F;}
.documents-content{}.documents-lead{margin:0;color:#444;}.document-filters{display:flex;align-items:center;gap:var(--space-chip-gap);}.filter-chip{height:42px;border:1px solid var(--border);border-radius:9999px;background:var(--brand-white);padding:0 24px;font-size:15px;line-height:40px;font-weight:500;white-space:nowrap;cursor:pointer}.filter-chip:hover{background:var(--highlight-neutral-hover);color:#0F0F0F}.filter-chip.is-active{background:var(--highlight-selected-bg);border-color:var(--highlight-selected-bg);color:var(--highlight-selected-fg);font-weight:500}.filter-chip[data-filter="all"]{width:105px;padding:0}.filter-chip[data-filter="mine"]{width:141px;padding:0}.filter-chip[data-filter="czs"]{width:147px;padding:0}.filter-chip[data-filter="ict"]{width:89px;padding:0}.filter-chip[data-filter="basic"]{width:142px;padding:0}.filter-chip[data-filter="risk"]{width:160px;padding:0}.filter-chip[data-filter="tools"]{width:139px;padding:0}.documents-grid{display:grid;padding-bottom:var(--space-16);}.document-card{position:relative;}.cover-button{border:0;padding:0;background:transparent;display:block;border-radius:5px;cursor:pointer;text-align:left;}.cover-button:focus-visible,.document-title-button:focus-visible,.more-button:focus-visible{outline:2px solid var(--brand-black);outline-offset:3px}.cover-placeholder{border-radius:5px;border:1px solid #D7D7D7;background:#F5F5F5;box-shadow:0 10px 20px rgba(0,0,0,.17);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-4);text-align:center;position:relative;overflow:hidden;}.cover-placeholder::before{content:"";position:absolute;left:0;top:0;width:14px;height:100%;background:#E9E9E9;border-right:1px solid #D1D1D1}.cover-placeholder .placeholder-icon{width:56px;height:56px;margin-bottom:var(--space-4);opacity:.72}.cover-placeholder strong{font-size:19px;line-height:28px;font-weight:600;max-width:238px}.cover-placeholder small{margin-top:12px;font-size:13px;line-height:20px;color:#666}.cover-placeholder .volume{position:absolute;right:15px;top:15px;border:1px solid #8C8C8C;border-radius:5px;padding:var(--space-1) var(--space-2);font-size:12px;line-height:18px;background:var(--brand-white)}.document-meta{position:relative;padding-top:16px;}.title-row{position:relative;min-height:28px;padding-right:var(--space-10)}.document-title-button{border:0;background:transparent;padding:0;text-align:left;font-size:18px;line-height:27px;font-weight:600;cursor:pointer;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-height:54px}.more-button{position:absolute;right:-6px;top:-7px;width:40px;height:40px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;border-radius:50%}.more-button:hover{background:var(--hover)}.more-button img{width:24px;height:24px}.publisher{margin-top:var(--space-1);font-size:14px;line-height:21px;color:#444}.file-row{margin-top:var(--space-2);display:flex;align-items:center;gap:8px;font-size:14px;line-height:21px;color:#444}.file-row img{width:24px;height:24px}.file-row .pdf-icon{filter:none}.status-row{margin-top:var(--space-2);min-height:21px;display:flex;align-items:center;gap:8px;font-size:14px;line-height:21px;color:#444}.status-row.free{color:var(--free);font-weight:500}.status-row.student{color:#666}.status-row.student img{width:20px;height:20px}.progress{height:6px;border-radius:999px;background:var(--border);overflow:hidden;margin-top:8px;}.progress>span{display:block;height:100%;border-radius:999px;background:var(--brand-yellow)}
.documents-empty{position:relative;height:360px;border:1px solid var(--border);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.documents-empty strong{font-size:18px;line-height:26px}.documents-empty span{font-size:14px;line-height:22px;color:var(--secondary)}.documents-empty button{height:var(--button-m-h,36px);margin-top:8px;border:1px solid var(--brand-black);border-radius:var(--button-m-radius,18px);background:var(--brand-white);padding:0 var(--button-m-pad-x,16px);cursor:pointer}
.documents-overlay{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.36)}.documents-drawer{position:fixed;z-index:41;left:0;top:0;width:330px;height:100vh;background:var(--brand-white);border-right:1px solid var(--border);transform:translateX(-100%);transition:transform .16s ease;padding:var(--space-4) var(--space-3)}.documents-drawer.is-open{transform:translateX(0)}.drawer-head{height:62px;display:flex;align-items:center;gap:var(--space-4)}.drawer-close{width:40px;height:40px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer}.drawer-close img{width:24px;height:24px}.drawer-logo{display:block;width:120px;height:auto;max-width:none;max-height:40px;object-fit:contain}.documents-drawer nav{display:flex;flex-direction:column;margin-top:var(--space-4)}.documents-drawer nav a{height:48px;display:flex;align-items:center;border-radius:7px;padding:0 12px;text-decoration:none;color:var(--text);font-size:16px}.documents-drawer nav a:hover{background:var(--highlight-neutral-hover);color:#0F0F0F}.documents-drawer nav a.is-active{background:var(--highlight-selected-bg);color:var(--highlight-selected-fg)}.documents-popover{position:fixed;z-index:42;right:auto;top:auto;width:250px;border:1px solid var(--border);background:var(--brand-white);border-radius:8px;padding:var(--space-2);display:flex;flex-direction:column;gap:4px}.account-popover{right:auto;width:210px}.documents-popover strong{font-size:15px;line-height:22px}.documents-popover span{font-size:13px;line-height:20px;color:var(--secondary)}.document-menu{position:fixed;z-index:45;width:220px;border:1px solid var(--border);border-radius:8px;background:var(--brand-white);padding:var(--space-2);box-shadow:0 8px 22px rgba(0,0,0,.12)}.document-menu button{width:100%;height:38px;border:0;border-radius:6px;background:transparent;text-align:left;padding:0 var(--space-3);display:flex;align-items:center;gap:var(--space-3);font-size:14px;cursor:pointer}.document-menu button:hover{background:var(--hover)}.document-menu img{width:24px;height:24px}.documents-toast{position:fixed;z-index:60;left:50%;bottom:28px;transform:translateX(-50%);min-width:300px;max-width:580px;padding:var(--space-2) var(--space-4);border-radius:8px;background:var(--brand-black);color:var(--brand-white);font-size:14px;line-height:22px;text-align:center}.access-backdrop{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.5)}.access-dialog{position:fixed;z-index:51;left:50%;top:50%;transform:translate(-50%,-50%);width:430px;border:1px solid var(--border);border-radius:10px;background:var(--brand-white);padding:24px}.access-dialog h2{margin:0 0 var(--space-4);}.access-dialog p{margin:0 0 var(--space-6);color:#444}.access-dialog>div{display:flex;justify-content:flex-end;gap:var(--space-2)}.access-dialog button{height:var(--button-m-h,36px);border-radius:var(--button-m-radius,18px);padding:0 var(--button-m-pad-x,16px);cursor:pointer}.dialog-secondary{border:1px solid var(--border);background:var(--brand-white)}.dialog-primary{border:1px solid var(--brand-yellow);background:var(--brand-yellow);}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Highlight v1.0 — state colors only */
.sidebar-item.is-active img{filter:none}
.sidebar-item.is-active:hover{background:#F2F2F2;color:#0F0F0F}.documents-drawer nav a.is-active:hover,.filter-chip.is-active:hover{background:var(--highlight-selected-hover);color:var(--highlight-selected-fg)}
.filter-chip.is-active:hover{border-color:var(--highlight-selected-hover)}
.filter-chip.is-active:active{background:var(--highlight-selected-pressed);border-color:var(--highlight-selected-pressed);color:var(--highlight-selected-fg)}