:root{
  --navy:#153b6b;
  --blue:#174a7e;
  --bg:#f4f7fb;
  --border:#e4e7ec;
  --text:#1d2939;
  --muted:#667085;
  --danger:#b42318;
  --success:#027a48;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Tahoma,sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit}
.topbar{background:var(--navy);color:#fff;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:0;z-index:50}
.brand-title{font-size:21px;font-weight:700}
.top-actions{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.top-actions a{color:#fff;text-decoration:none;font-size:14px}
.container{max-width:1250px;margin:28px auto;padding:0 18px}
.container.narrow{max-width:760px}
.card{background:#fff;border-radius:16px;padding:24px;box-shadow:0 8px 28px rgba(0,0,0,.06)}
.page-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px}
.page-head h2,.card h2{margin-top:0}
.page-actions{display:flex;gap:8px;flex-wrap:wrap}
.muted{color:var(--muted)} .small{font-size:12px}
.badge{background:#fff;color:var(--blue);padding:5px 10px;border-radius:20px;font-size:12px}
.badge-light{background:#eef4fb;color:var(--blue)}
.btn{display:inline-block;border:0;background:#eef2f6;color:#344054;text-decoration:none;padding:8px 12px;border-radius:8px;cursor:pointer;font-size:14px}
.btn:hover{filter:brightness(.98)}
.btn-primary{background:var(--blue);color:#fff}
.btn-danger{background:#fff1f1;color:var(--danger)}
.btn-small{padding:6px 9px;font-size:12px}
.btn-block{width:100%;height:46px}
.alert{padding:12px 14px;border-radius:8px;margin-bottom:16px}
.alert-success{background:#ecfdf3;color:var(--success)}
.alert-error{background:#fff1f1;color:var(--danger)}
.folder-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.folder-card{display:flex;align-items:center;gap:14px;background:#f8fbff;border:1px solid #dbe7f3;border-radius:12px;padding:18px;text-decoration:none;color:var(--blue)}
.folder-card:hover{background:#eef6ff}
.folder-icon{font-size:28px}
.upload-zone{border:2px dashed #b7c9df;background:#f8fbff;border-radius:14px;padding:24px;text-align:center;margin:18px 0 22px}
.upload-zone.dragover{background:#eaf3ff;border-color:var(--blue)}
.upload-title{font-weight:700;color:var(--blue);font-size:16px;margin-bottom:7px}
.table-wrap{width:100%;overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead{background:#f2f6fb}
th,td{padding:12px 11px;text-align:left;border-bottom:1px solid #eaecf0;vertical-align:middle}
th{font-size:13px;color:#475467;white-space:nowrap}
tbody tr:hover{background:#f8fafc}
.file-name{font-weight:600;text-decoration:none;color:var(--text)}
.actions{display:flex;gap:6px;flex-wrap:wrap}
.empty{text-align:center;color:#98a2b3;padding:38px}
.form-control{width:100%;border:1px solid #d0d5dd;border-radius:8px;padding:10px 11px;font-size:14px;margin:6px 0 16px;background:#fff}
label{display:block;font-weight:600;font-size:14px;margin-top:10px}
.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.inline-form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;margin-bottom:20px}
.inline-form .form-control{margin:0}
.inline-check{display:flex;gap:8px;align-items:center;font-weight:500}
.checkbox-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:9px;margin:8px 0 16px}
.check-card{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:8px;padding:9px;font-weight:500;margin:0}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;align-items:center;justify-content:center;padding:18px}
.modal.show{display:flex}
.modal-box{background:#fff;border-radius:14px;width:420px;max-width:100%;padding:22px;box-shadow:0 20px 50px rgba(0,0,0,.2)}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.login-body{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#edf4fb,#f8fafc)}
.login-card{width:420px;max-width:calc(100% - 30px);background:#fff;border-radius:20px;padding:34px;box-shadow:0 18px 45px rgba(21,52,86,.12)}
.brand{text-align:center;margin-bottom:24px}.brand h1{margin:0;color:var(--navy)}.brand p{color:var(--muted);line-height:1.6}
.login-card input[type=text],.login-card input[type=password]{width:100%;height:44px;border:1px solid #d0d5dd;border-radius:9px;padding:0 12px;margin:6px 0 14px}
.footer-note{text-align:center;margin-top:20px;color:#98a2b3;font-size:12px}
@media(max-width:700px){
  .topbar{padding:14px 16px;align-items:flex-start}
  .container{padding:0 10px;margin-top:16px}
  .card{padding:16px}
  .page-head{align-items:flex-start;flex-direction:column}
  .inline-form{grid-template-columns:1fr}
}

/* Production security UI additions */
.logout-form{display:inline;margin:0;padding:0}
.link-button{background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0;text-decoration:none}
.link-button:hover{text-decoration:underline}

/* AIAS modern responsive interface / no external font requests */
:root { --navy:#102f53; --blue:#175fa6; --bg:#f3f7fb; --border:#e3eaf2; --text:#172d45; --muted:#687f95; --danger:#b42318; --success:#027a48; --ring:rgba(30,104,180,.16); }
html{scroll-behavior:smooth} body{font-family:Anuphan,"Noto Sans Thai","Segoe UI",Tahoma,sans-serif; background:radial-gradient(circle at 95% 0%,#e9f3fd 0,transparent 32%),var(--bg);line-height:1.55}
.topbar{background:rgba(16,47,83,.97);padding:15px clamp(16px,4vw,54px);box-shadow:0 10px 30px rgba(14,44,75,.13);gap:18px;backdrop-filter:blur(16px)}
.brand-title{font-size:21px;letter-spacing:-.45px;display:flex;align-items:center;gap:11px}.brand-title:before{content:'A';display:inline-grid;place-items:center;width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,#fff,#cde5ff);color:#144475;font-size:22px;font-weight:900}
.top-actions{gap:12px}.top-actions a,.link-button{font-weight:600;opacity:.9;padding:6px 2px;transition:opacity .15s}.top-actions a:hover,.link-button:hover{opacity:1}.top-actions .badge{background:#edf5ff;color:#185590;font-weight:800}
.container{max-width:1330px;margin:32px auto;padding:0 clamp(12px,3vw,30px)}.container.narrow{max-width:860px}
.card{border:1px solid #edf1f6;border-radius:22px;padding:clamp(18px,2.5vw,32px);box-shadow:0 12px 38px rgba(26,62,95,.06)}
.card h2{font-size:24px;letter-spacing:-.5px;color:#173a60}.page-head{padding-bottom:18px;border-bottom:1px solid #edf2f7}.page-head h2{margin-bottom:3px}
.btn{border-radius:11px;padding:10px 15px;min-height:39px;font-weight:650;transition:transform .16s,box-shadow .16s,background .16s}.btn:hover{filter:none;background:#e3eef9;transform:translateY(-1px)}.btn-primary{background:linear-gradient(135deg,#206db9,#174c85);box-shadow:0 6px 13px rgba(31,99,165,.15)}.btn-primary:hover{background:#17589e;box-shadow:0 8px 18px rgba(31,99,165,.22)}.btn-danger:hover{background:#ffe4e4}.btn-small{min-height:32px;padding:6px 10px}
.folder-grid{gap:17px}.folder-card{border-color:#e0eaf6;background:linear-gradient(145deg,#fff,#f5faff);border-radius:16px;padding:20px;box-shadow:0 5px 20px rgba(17,74,132,.035);transition:transform .18s,border-color .18s,box-shadow .18s}.folder-card:hover{transform:translateY(-3px);border-color:#a9c9ea;box-shadow:0 14px 24px rgba(20,73,129,.09)}.folder-icon{font-size:31px}
.upload-zone{background:linear-gradient(145deg,#f9fcff,#f1f7fe);border:2px dashed #b9d3ee;border-radius:19px;padding:34px 20px;margin:25px 0}.upload-zone:hover,.upload-zone.dragover{border-color:#4b94d4;background:#edf7ff}.upload-title{font-size:18px;margin-bottom:7px}
.table-wrap{border:1px solid #e7edf3;border-radius:15px;overflow-x:auto}thead{background:#eef4fa}th{color:#455d75;font-size:13px}th,td{padding:14px 14px}tbody tr:hover{background:#f2f8ff}.file-name{color:#213d5a}.actions{gap:7px}
.form-control,.login-card input[type=text],.login-card input[type=password]{border:1px solid #cbd8e5;border-radius:11px;background:#fbfdff;outline:none;transition:border-color .15s,box-shadow .15s}.form-control:focus,.login-card input:focus{border-color:#448dc9;box-shadow:0 0 0 4px var(--ring)}label{color:#304d69}
.alert{border-radius:12px;padding:14px 17px}.alert-success{border:1px solid #b8e9d1}.alert-error{border:1px solid #ffd1cf}.check-card{border-radius:12px;padding:12px}.check-card:has(input:checked){border-color:#a9cbee;background:#f0f8ff}
.modal{backdrop-filter:blur(5px);background:rgba(16,39,66,.5)}.modal-box{border-radius:20px;box-shadow:0 28px 65px rgba(10,36,67,.23)}
.login-body{background:radial-gradient(circle at 12% 16%,#cfe9fd 0,transparent 30%),radial-gradient(circle at 85% 88%,#dfeffc 0,transparent 35%),#eef5fb;padding:18px}.login-card{width:460px;padding:clamp(24px,4vw,43px);border:1px solid #fff;border-radius:25px;box-shadow:0 28px 70px rgba(18,70,112,.13)}.brand h1{font-size:30px;letter-spacing:-.8px}.brand:before{content:'AIAS';display:grid;place-items:center;background:linear-gradient(140deg,#174d82,#277fbd);color:white;border-radius:18px;width:74px;height:74px;margin:0 auto 22px;font-weight:850;font-size:22px;box-shadow:0 10px 21px rgba(27,87,140,.22)}.brand p{font-size:14px}.login-card input[type=text],.login-card input[type=password]{height:49px}.login-card .btn-block{height:50px;border-radius:12px}.footer-note{margin-top:24px}
input,select,textarea,button{font-family:inherit}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #87bef2;outline-offset:2px}
@media(max-width:760px){.topbar{position:relative;flex-direction:column;align-items:stretch;padding:14px 18px}.top-actions{justify-content:flex-start;row-gap:7px}.container{margin-top:17px}.page-head{gap:12px}.card{padding:18px;border-radius:17px}.folder-grid{grid-template-columns:1fr}.actions{min-width:210px}.table-wrap{margin:0 -3px}.login-card{width:100%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

/* AIAS institutional logo: login page only */
.login-card .brand::before { content: none; display: none; }
.login-card .aias-institute-logo {
  display: block;
  width: 100%;
  max-width: 370px;
  height: auto;
  margin: 0 auto 25px;
  object-fit: contain;
}
@media (max-width: 480px) {
  .login-card .aias-institute-logo { max-width: 100%; margin-bottom: 18px; }
  .login-card .brand h1 { font-size: 26px; }
}


/* ===== AIAS Data Center 2026 · Emerald institutional theme ===== */
:root{
  --navy:#123e32; --blue:#176b50; --bg:#f2f8f4; --border:#dce9e1;
  --text:#173c31; --muted:#617b6f; --success:#087e52; --danger:#b42318;
  --ring:rgba(39,151,103,.15);
}
body{color:var(--text);background:radial-gradient(circle at 5% 5%,#e0f4e8 0,transparent 31%),radial-gradient(circle at 94% 95%,#e4f4eb 0,transparent 35%),var(--bg)}
.topbar{background:linear-gradient(105deg,#103e32,#135641);box-shadow:0 9px 26px rgba(9,59,41,.16);padding:12px clamp(16px,3vw,44px);gap:24px;min-height:84px}
.brand-title.brand-logo-link{display:flex;align-items:center;padding:4px 0;text-decoration:none;flex:none;max-width:min(350px,45vw)}
.brand-title.brand-logo-link::before{content:none;display:none}
.aias-header-logo{display:block;width:clamp(235px,26vw,332px);max-width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 2px 5px rgba(0,0,0,.08))}
.top-actions{column-gap:15px;row-gap:5px}
.top-actions a,.link-button{color:#f3fff7;transition:color .18s,opacity .18s}
.top-actions a:hover,.link-button:hover{color:#c0f5d9}
.top-actions .badge{background:#e3f4e9;color:#176448}
.container{max-width:1330px;margin-top:34px}
.card{border-color:#e4eee7;box-shadow:0 12px 36px rgba(22,76,48,.065);border-radius:22px}
.card h2,.page-head h2{color:#174e39}
.page-head{border-bottom-color:#e6eee8}
.badge-light{background:#e5f5eb;color:#146844}
.btn{background:#edf4ef;color:#255544}
.btn:hover{background:#e0eee5}
.btn-primary{color:#fff;background:linear-gradient(135deg,#1e9468,#16674e);box-shadow:0 6px 16px rgba(16,119,78,.17)}
.btn-primary:hover{color:#fff;background:linear-gradient(135deg,#178157,#12563f);box-shadow:0 9px 21px rgba(16,119,78,.24)}
.btn-danger{background:#fff1f1;color:#aa302a}
.btn-danger:hover{background:#ffe7e7}
.folder-card{background:linear-gradient(145deg,#fff,#f3fbf5);border-color:#dcefe2;color:#176a4c;box-shadow:0 5px 18px rgba(13,93,57,.035)}
.folder-card:hover{background:#f1fcf5;border-color:#a6d9b8;box-shadow:0 14px 24px rgba(18,101,68,.10)}
.folder-icon{filter:saturate(.9)}
.upload-zone{background:linear-gradient(145deg,#fafefa,#ecf8f0);border-color:#b7dbc5}
.upload-zone:hover,.upload-zone.dragover{background:#e4f7eb;border-color:#20996a}
.upload-title{color:#176b50}
.table-wrap{border-color:#e0ece4}thead{background:#eaf5ed}th{color:#335c49}th,td{border-bottom-color:#e7efe9}
tbody tr:hover{background:#f3faf5}.file-name{color:#224a37}
.form-control,.login-card input[type=text],.login-card input[type=password]{background:#fcfffd;border-color:#c7dbcf;color:var(--text)}
.form-control:focus,.login-card input:focus{border-color:#32a171;box-shadow:0 0 0 4px var(--ring)}
label{color:#285340}.check-card:has(input:checked){border-color:#98d3b0;background:#ebf8ef}
.modal{background:rgba(12,48,33,.52)}.modal-box{box-shadow:0 26px 62px rgba(8,49,32,.22)}
.login-body{background:radial-gradient(circle at 10% 13%,#d7f1e3 0,transparent 33%),radial-gradient(circle at 85% 90%,#dcf3e5 0,transparent 36%),#f0f8f3}
.login-card{box-shadow:0 26px 64px rgba(26,89,54,.13);border-color:#fff}
.brand h1{color:#144c36}.brand p{color:#607e70}
.footer-note{color:#779688}.field-hint{font-size:12px;color:#627f70;margin:-8px 0 18px;line-height:1.5}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #8bd6a5;outline-offset:2px}
@media(max-width:960px){.topbar{flex-wrap:wrap;align-items:center;gap:10px}.top-actions{justify-content:flex-end}}
@media(max-width:760px){.topbar{min-height:0;position:relative;align-items:stretch;padding:15px 18px;gap:8px}.brand-title.brand-logo-link{max-width:100%}.aias-header-logo{width:min(320px,100%)}.top-actions{justify-content:flex-start;gap:10px 13px}.container{margin-top:18px}}
@media(max-width:380px){.aias-header-logo{width:min(270px,100%)}.top-actions a,.link-button{font-size:13px}}