:root{--bg:#f6f5f2;--surface:#fff;--surface-soft:#faf9f6;--line:#ddd9cf;--text:#20211f;--muted:#666b62;--teal:#167c80;--teal-dark:#0f5d60;--amber:#b7791f;--red:#b42318;--green:#2f7d32;--blue:#2563a9;--shadow:0 10px 35px #23262014}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:Arial,Noto Sans Thai,sans-serif}button,input,select,textarea{font:inherit}a{color:inherit;text-decoration:none}.app-shell{min-height:100vh;padding:28px}.topbar{justify-content:space-between;align-items:center;gap:18px;max-width:1280px;margin:0 auto 22px;display:flex}.brand{align-items:center;gap:12px;min-width:0;display:flex}.brand-mark{background:var(--teal);color:#fff;border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;display:inline-flex}.brand h1{margin:0;font-size:24px;line-height:1.2}.brand p{color:var(--muted);margin:3px 0 0;font-size:14px}.nav-actions{align-items:center;gap:10px;display:flex}.icon-button,.text-button{border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;gap:8px;min-height:38px;padding:8px 11px;transition:background .16s,border-color .16s,transform .16s;display:inline-flex}.icon-button{width:38px;padding:8px}.text-button.primary{background:var(--teal);border-color:var(--teal);color:#fff}.text-button:hover,.icon-button:hover{border-color:var(--teal);transform:translateY(-1px)}.dashboard{grid-template-columns:minmax(320px,.85fr) minmax(520px,1.45fr);gap:18px;max-width:1280px;margin:0 auto;display:grid}.panel{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:8px;min-width:0}.panel-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:12px;min-height:58px;padding:14px 16px;display:flex}.panel-title{align-items:center;gap:9px;min-width:0;display:flex}.panel-title h2{margin:0;font-size:17px;line-height:1.2}.panel-title span{color:var(--muted);margin-top:2px;font-size:13px;display:block}.panel-body{padding:16px}.form-grid{gap:12px;display:grid}.field{gap:6px;display:grid}.field label{color:var(--muted);font-size:13px}.field input,.field textarea,.toolbar input,.toolbar select{background:var(--surface-soft);border:1px solid var(--line);color:var(--text);border-radius:8px;outline:none;width:100%;padding:10px 11px}.field textarea{resize:vertical;min-height:112px}.field input:focus,.field textarea:focus,.toolbar input:focus,.toolbar select:focus{border-color:var(--teal);box-shadow:0 0 0 3px #167c801f}.response-box{border:1px solid var(--line);color:#30332f;white-space:pre-wrap;background:#f1efe8;border-radius:8px;max-height:280px;padding:12px;overflow:auto}.log-list{gap:10px;max-height:680px;padding:14px;display:grid;overflow:auto}.log-access{gap:16px;display:grid}.log-access strong{margin-bottom:5px;display:block}.log-access p{color:var(--muted);margin:0;font-size:13px;line-height:1.5}.log-access code{color:var(--teal-dark)}.log-access-form{grid-template-columns:minmax(180px,1fr) auto;gap:10px;display:grid}.log-access-form input,.log-search input,.log-controls select{background:var(--surface-soft);border:1px solid var(--line);color:var(--text);border-radius:8px;outline:none;width:100%;min-width:0;padding:10px 11px}.log-access-form input:focus,.log-search:focus-within,.log-controls select:focus{border-color:var(--teal);box-shadow:0 0 0 3px #167c801f}.log-controls{border-bottom:1px solid var(--line);align-items:center;gap:10px;padding:12px 14px;display:flex}.log-search{background:var(--surface-soft);border:1px solid var(--line);border-radius:8px;flex:1;align-items:center;min-width:180px;padding-left:10px;display:flex}.log-search input{box-shadow:none;background:0 0;border:0}.log-search .text-button{border-top:0;border-bottom:0;border-right:0;border-radius:0 7px 7px 0}.log-controls select{width:auto}.log-summary{background:var(--surface-soft);border-bottom:1px solid var(--line);color:var(--muted);flex-wrap:wrap;align-items:center;gap:8px 14px;padding:8px 14px;font-size:12px;display:flex}.log-summary strong{color:var(--text)}.usage-summary{color:#244d7c;background:#eef5ff;border:1px solid #bfd2ed;border-radius:999px;padding:4px 8px}.link-button{color:var(--teal-dark);cursor:pointer;text-underline-offset:2px;background:0 0;border:0;margin-left:auto;padding:2px 0;text-decoration:underline}.notice{border:1px solid var(--line);border-radius:8px;align-items:flex-start;gap:7px;padding:10px 11px;font-size:13px;display:flex}.notice.error{color:var(--red);background:#fff0ee;border-color:#f3b7b1}.log-notice{margin:12px 14px 0}.empty-state-stack{text-align:center;flex-direction:column}.empty-state-stack strong{color:var(--text)}.empty-state-stack span{font-size:13px}.log-limit-note{border-top:1px solid var(--line);color:var(--muted);text-align:center;padding:10px 14px;font-size:12px}.log-row{background:var(--surface-soft);border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:8px;gap:8px;padding:11px 12px;display:grid}.log-row.error{border-left-color:var(--red)}.log-row.warn{border-left-color:var(--amber)}.log-row.info{border-left-color:var(--green)}.log-meta{color:var(--muted);flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;display:flex}.log-main{justify-content:space-between;align-items:center;gap:10px;display:flex}.log-main strong{font-size:14px}.usage-metrics{color:var(--muted);flex-wrap:wrap;align-items:center;gap:7px 10px;font-size:12px;display:flex}.pill.usage{color:#244d7c;background:#eef5ff;border-color:#bfd2ed}.pill{border:1px solid var(--line);border-radius:999px;align-items:center;gap:5px;min-height:24px;padding:3px 8px;font-size:12px;display:inline-flex}.pill.error{color:var(--red);background:#fff0ee;border-color:#f3b7b1}.pill.warn{color:#80550f;background:#fff6df;border-color:#ebcf88}.pill.info,.pill.success{color:var(--green);background:#eef8ee;border-color:#b9dfba}.log-details{color:#363934;white-space:pre-wrap;font-size:12px;overflow:auto}.empty-state{color:var(--muted);justify-content:center;align-items:center;gap:8px;min-height:160px;display:flex}.status-strip{flex-wrap:wrap;gap:8px;max-width:1280px;margin:0 auto 18px;display:flex}.spin{animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width:980px){.app-shell{padding:18px}.topbar{flex-direction:column;align-items:flex-start}.dashboard{grid-template-columns:1fr}.log-controls{flex-wrap:wrap;align-items:stretch}.log-search{flex-basis:100%}}@media (max-width:560px){.brand h1{font-size:21px}.nav-actions{width:100%}.text-button{flex:1}.log-access-form{grid-template-columns:1fr}.log-controls select,.log-controls>.text-button{flex:1}}