*{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{margin:0;background:#f5f7fb;color:#172033;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC",Arial,sans-serif;line-height:1.45}
a{color:#1d4ed8}
aside{position:fixed;left:0;top:0;bottom:0;width:220px;background:#0f172a;color:white;padding:22px;z-index:20}
aside h1{font-size:22px;margin:0 0 25px;white-space:nowrap}
nav a{display:block;color:#dbeafe;text-decoration:none;padding:12px 10px;border-radius:10px;margin:4px 0;white-space:nowrap}
nav a:hover{background:#1e293b}
main{margin-left:220px;padding:26px;max-width:100%}
.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px}
.top h2{margin:0;font-size:28px}
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:18px}
.cards div,.panel{background:white;border-radius:16px;padding:18px;box-shadow:0 8px 24px #0000000d}
.cards b{display:block;color:#64748b}
.cards span{font-size:26px;font-weight:800}
table{width:100%;border-collapse:collapse;background:white;border-radius:14px;overflow:hidden;box-shadow:0 8px 24px #0000000d;margin:14px 0}
th,td{padding:11px 12px;border-bottom:1px solid #e5e7eb;text-align:left;vertical-align:top}
th{background:#eef2ff;color:#334155;white-space:nowrap}
td{word-break:break-word}
.btn{display:inline-block;background:#2563eb;color:white;border:0;border-radius:10px;padding:9px 14px;text-decoration:none;cursor:pointer;font-weight:700;line-height:1.2;text-align:center}
.btn.light{background:#e2e8f0;color:#0f172a}.btn.danger{background:#dc2626;color:white}
.hint{display:block;color:#64748b;margin-top:4px}.badge{background:#dbeafe;color:#1e40af;padding:4px 8px;border-radius:999px;font-size:12px;white-space:nowrap}
.form input,.form textarea,.form select,.inline input,.inline select,input,textarea,select{font-size:16px;max-width:100%}
.form input,.form textarea,.form select,.inline input,.inline select{width:100%;padding:10px;border:1px solid #cbd5e1;border-radius:8px;background:white}
.form label{display:block;font-size:13px;color:#475569}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.grid .wide{grid-column:1/-1}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}.inline input,.inline select{width:auto}
.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.searchbar{display:flex;gap:8px;align-items:center;flex:1;min-width:260px}.searchbar input{flex:1;min-width:220px;padding:10px;border:1px solid #cbd5e1;border-radius:10px;background:white}.mini-inline{display:inline;margin:0}.mini-inline button{background:none;border:0;color:#1d4ed8;text-decoration:underline;cursor:pointer;font:inherit;padding:0}
.totalbox{text-align:right;background:white;border-radius:14px;padding:15px;margin-left:auto;max-width:320px}
.line-window-option{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid #cbd5e1;border-radius:12px;background:#f8fafc;margin:10px 0;cursor:pointer}
.line-window-option input{width:auto;margin-top:4px;transform:scale(1.2)}
.line-window-option:hover{border-color:#2563eb;background:#eff6ff}

@media(max-width:1100px){.cards{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:repeat(2,1fr)}}

@media(max-width:760px){
  body{background:#eef2f7;overflow-x:hidden}
  aside{position:sticky;top:0;width:100%;height:auto;bottom:auto;padding:12px 12px 10px;border-radius:0;box-shadow:0 6px 18px #0002}
  aside h1{font-size:18px;margin:0 0 8px}
  nav{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  nav a{display:inline-flex;align-items:center;flex:0 0 auto;margin:0;padding:9px 12px;background:#1e293b;border-radius:999px;font-size:14px}
  main{margin-left:0;padding:12px;overflow:hidden}
  .top{align-items:flex-start;margin-bottom:12px}.top h2{font-size:22px;line-height:1.25}
  .cards{grid-template-columns:1fr;gap:10px}.cards div,.panel{border-radius:14px;padding:14px}.cards span{font-size:22px}
  .grid,.grid2{grid-template-columns:1fr;gap:10px}.grid .wide{grid-column:auto}
  table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px;font-size:14px;box-shadow:0 4px 14px #00000012}
  table tbody,table thead,table tr{width:max-content;min-width:100%}
  th,td{padding:9px 10px;min-width:86px}
  td:first-child,th:first-child{min-width:44px}
  #items th,#items td{min-width:120px}
  #items th:last-child,#items td:last-child{min-width:64px}
  #items input,#items select{min-width:110px;width:100%}
  #items button{padding:8px 10px;min-width:44px}
  .btn{width:100%;padding:12px 14px;margin:4px 0;font-size:16px}
  .toolbar{display:block}.searchbar{display:block;min-width:0}.searchbar input{width:100%;min-width:0;margin:4px 0}.mini-inline{display:inline}
  p>.btn,.panel>.btn{display:block}
  .inline{display:block;width:100%;margin:8px 0}.inline button,.inline .btn{width:100%}.inline input,.inline select{width:100%}
  .totalbox{max-width:none;width:100%;text-align:left;margin:12px 0}
  .form input,.form textarea,.form select{padding:12px;min-height:44px}
  .form label{font-size:14px}
  textarea{min-height:110px}
}

@media(max-width:420px){main{padding:10px}.top h2{font-size:20px}th,td{font-size:13px;padding:8px}.cards div,.panel{padding:12px}}