:root{--navy:#162338;--blue:#1769aa;--blue2:#0f4f84;--orange:#d97706;--orange2:#a95c05;--page:#f2f5f8;--text:#182230;--muted:#64748b;--border:#dbe3ea}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--text);font-family:Arial,"Noto Sans Thai",Tahoma,sans-serif}
header{background:#162338;color:#fff;border-bottom:4px solid #334e70}
.header-inner{max-width:1440px;margin:auto;padding:22px 24px}
.brand{font-size:11px;letter-spacing:2px;color:#b9c8d8}.title{font-size:28px;font-weight:800;margin-top:4px}
.title span{font-size:13px;background:#33465e;padding:4px 9px;border-radius:99px;vertical-align:middle;margin-left:5px}
.subtitle{font-size:13px;color:#c4d0dc;margin-top:5px}
main{max-width:1440px;margin:auto;padding:20px 24px}
.category-tabs{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.tab{min-width:230px;border:0;border-radius:12px;padding:15px 20px;color:#fff!important;font-weight:800;font-size:16px;cursor:pointer;box-shadow:0 3px 10px rgba(15,23,42,.16);transition:.15s}
.tab:hover{transform:translateY(-1px);filter:brightness(1.07)}
.tab.active{box-shadow:0 0 0 3px #fff inset,0 0 0 5px currentColor,0 6px 18px rgba(15,23,42,.22)}
.generator{background:#1769aa}.bender{background:#d97706}.category-3{background:#7c3aed}.category-4{background:#0f766e}.category-5{background:#be123c}
.summary{display:grid;grid-template-columns:repeat(3,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.stat,.panel{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 3px 12px rgba(15,23,42,.05)}
.stat{padding:16px;border-top:4px solid #64748b}.stat.generator{border-top-color:#1769aa}.stat.bender{border-top-color:#d97706}
.stat label{font-size:12px;color:var(--muted)}.stat b{display:block;font-size:24px;margin-top:5px}
.panel{padding:16px}
.toolbar{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.toolbar input{min-width:300px;flex:1;padding:11px 13px;border-radius:9px;border:1px solid #cbd5e1;color:var(--text);background:#fff}
button{font:inherit;border:0;border-radius:9px;padding:10px 13px;color:#fff;cursor:pointer;font-weight:700}
.secondary{background:#475569}.danger{background:#b91c1c}.toolbar-actions{display:flex;gap:8px}
.tableWrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:11px 10px;border-bottom:1px solid #e5e7eb;text-align:left;vertical-align:top}
th{background:#edf2f7;color:#334155;white-space:nowrap;font-size:12px}tr:hover td{background:#f8fafc}
.cardList{display:none}.assetCard{background:#fff;border:1px solid var(--border);border-left:5px solid #64748b;border-radius:12px;padding:14px;margin-bottom:10px}
.assetCard.generator{border-left-color:#1769aa}.assetCard.bender{border-left-color:#d97706}
.assetCard .top{display:flex;justify-content:space-between;gap:10px}.assetCard h3{margin:0;font-size:17px}
.assetCard .meta{margin-top:10px;display:grid;gap:7px}.key{font-size:11px;color:var(--muted)}.value{font-size:14px;font-weight:600}
.editBtn{width:100%;margin-top:13px;background:#334155}
dialog{border:0;border-radius:15px;padding:0;width:min(620px,94vw);box-shadow:0 25px 80px rgba(0,0,0,.38)}
.modalHead{background:#162338;color:#fff;padding:17px 20px;font-weight:800}.modalBody{padding:20px}
.field{margin-bottom:13px}.field label{display:block;font-weight:700;margin-bottom:6px}
.field input,.field textarea{width:100%;font:inherit;padding:10px 11px;border:1px solid #cbd5e1;border-radius:8px;color:var(--text)}
.field textarea{min-height:110px}.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.actions button:last-child{background:#1769aa}

@media(max-width:700px){
  header{border-bottom-width:3px}
  .header-inner{padding:14px 16px}
  .brand{font-size:9px;letter-spacing:1.4px}
  .title{font-size:21px;margin-top:3px}
  .subtitle{font-size:11px}
  main{padding:12px}

  .category-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
  .tab{min-width:0;width:100%;padding:12px 8px;border-radius:10px;font-size:13px;line-height:1.25}
  .tab.active{box-shadow:0 0 0 2px #fff inset,0 0 0 3px rgba(15,23,42,.25),0 4px 12px rgba(15,23,42,.18)}

  .summary{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
  .stat{padding:11px;border-radius:10px}
  .stat:first-child{grid-column:1/-1}
  .stat label{font-size:10px}
  .stat b{font-size:18px;margin-top:3px}

  .panel{padding:10px;border-radius:12px}
  .toolbar{gap:8px;margin-bottom:10px}
  .toolbar input{min-width:100%;width:100%;padding:10px 11px;font-size:14px}
  .toolbar-actions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .toolbar-actions button{padding:9px 6px;font-size:11px}

  .tableWrap{display:none}
  .cardList{display:block}

  .assetCard{
    position:relative;
    border:1px solid var(--border);
    border-left:5px solid #64748b;
    border-radius:12px;
    padding:0;
    margin-bottom:9px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 2px 7px rgba(15,23,42,.05)
  }
  .assetCard.generator{border-left-color:#1769aa}
  .assetCard.bender{border-left-color:#d97706}

  .assetCard .top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:11px 12px 8px;
    background:#f8fafc;
    border-bottom:1px solid #edf1f5
  }
  .assetCard h3{
    margin:0;
    font-size:13px;
    font-weight:700;
    color:#64748b;
  }
  .assetCard .top span{
    background:#162338;
    color:#fff;
    border-radius:7px;
    padding:4px 9px;
    font-size:13px;
    font-weight:800;
    white-space:nowrap
  }

  .assetCard .meta{
    display:block;
    margin:0;
    padding:10px 12px 8px;
  }
  /* Hide every raw Excel field by default; JS marks key fields below */
  .assetCard .meta > div{display:none}
  .assetCard .meta > div.mobile-main,
  .assetCard .meta > div.mobile-location,
  .assetCard .meta > div.mobile-note{display:block}

  .assetCard .meta > div.mobile-main{
    margin-bottom:8px;
    font-size:17px;
    font-weight:800;
    color:#182230
  }
  .assetCard .meta > div.mobile-main .key{display:none}
  .assetCard .meta > div.mobile-main .value{font-size:17px;font-weight:800}

  .assetCard .meta > div.mobile-location,
  .assetCard .meta > div.mobile-note{
    padding:7px 0;
    border-top:1px solid #eef2f6
  }
  .assetCard .meta > div.mobile-location .key,
  .assetCard .meta > div.mobile-note .key{
    display:none
  }
  .assetCard .meta > div.mobile-location .value:before{
    content:"📍 ";
  }
  .assetCard .meta > div.mobile-note .value:before{
    content:"📝 ";
  }
  .assetCard .meta .value{
    font-size:13px;
    font-weight:600;
    line-height:1.45
  }

  .editBtn{
    width:100%;
    margin:0;
    border-radius:0;
    padding:10px;
    background:#334155;
    font-size:13px
  }

  dialog{width:min(96vw,620px);border-radius:12px}
  .modalHead{padding:14px 16px}
  .modalBody{padding:16px}
}