:root{
    --ink:#122016;
    --paper:#F4F1E8;
    --paper2:#ECE7D8;
    --seal:#0E5B3A;
    --seal-deep:#0A3F29;
    --gold:#B8862E;
    --gold-soft:#D8B36A;
    --line:#CBC3A6;
    --red:#8C3B2E;
    --blue:#2C5C7A;
    --card:#FFFFFF;
    --shadow: 0 1px 2px rgba(18,32,22,.06), 0 8px 24px -12px rgba(18,32,22,.18);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      radial-gradient(1200px 500px at 100% -10%, rgba(14,91,58,.08), transparent),
      var(--paper);
    color:var(--ink);
    font-family:'Sarabun',sans-serif;
    line-height:1.55;
  }
  h1,h2,h3,.serif{font-family:'Noto Serif Thai',serif;}
  .wrap{max-width:1280px;margin:0 auto;padding:0 24px;}

  /* ===== Header / masthead ===== */
  .masthead{
    background: linear-gradient(180deg, var(--seal-deep) 0%, var(--seal) 100%);
    color:#F4F1E8;
    border-bottom:6px solid var(--gold);
    position:relative;
    overflow:hidden;
  }
  .masthead::after{
    content:"";
    position:absolute; inset:0;
    background-image: repeating-linear-gradient(90deg, rgba(244,241,232,.035) 0 1px, transparent 1px 84px);
    pointer-events:none;
  }
  .masthead-inner{padding:34px 24px 26px; position:relative;}
  .eyebrow{
    display:flex; align-items:center; gap:10px;
    font-size:13px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--gold-soft); font-weight:600; margin-bottom:10px;
  }
  .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--gold-soft);}
  .masthead h1{
    font-size:clamp(28px,4vw,44px); margin:0 0 6px; font-weight:700; letter-spacing:.01em;
  }
  .masthead p.sub{margin:0; color:#DCE7DE; font-size:15.5px; max-width:820px;}
  .kpi-row{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:14px; margin-top:26px;
  }
  .kpi{
    background:rgba(244,241,232,.07);
    border:1px solid rgba(244,241,232,.18);
    border-radius:10px; padding:14px 16px;
    backdrop-filter: blur(2px);
  }
  .kpi .num{font-family:'Noto Serif Thai',serif; font-size:30px; font-weight:700; color:#FCEFC7;}
  .kpi .lbl{font-size:12.5px; color:#C9D8CD; margin-top:2px;}

  /* ===== Nav ===== */
  .tabs{
    position:sticky; top:0; z-index:50;
    background:rgba(244,241,232,.92); backdrop-filter: blur(6px);
    border-bottom:1px solid var(--line);
  }
  .tabs-inner{max-width:1280px;margin:0 auto;padding:0 24px; display:flex; gap:4px; overflow-x:auto;}
  .tab-btn{
    border:none; background:transparent; cursor:pointer;
    font-family:'Sarabun',sans-serif; font-weight:600; font-size:14.5px;
    color:#5b5b45; padding:14px 16px; white-space:nowrap;
    border-bottom:3px solid transparent;
  }
  .tab-btn:hover{color:var(--seal-deep);}
  .tab-btn.active{color:var(--seal-deep); border-bottom-color:var(--gold);}

  section.view{display:none; padding:30px 0 60px;}
  section.view.active{display:block;}

  .section-title{
    display:flex; align-items:baseline; gap:12px; margin:0 0 6px;
  }
  .section-title h2{font-size:22px; margin:0; color:var(--seal-deep);}
  .section-title .num-badge{
    font-family:'Noto Serif Thai',serif; font-weight:700; color:var(--gold);
    font-size:14px; border:1px solid var(--gold); border-radius:20px; padding:2px 10px;
  }
  .section-desc{color:#5b5b45; font-size:14.5px; margin:0 0 22px; max-width:900px;}

  .grid{display:grid; gap:18px;}
  .grid.cols-2{grid-template-columns:1fr 1fr;}
  .grid.cols-3{grid-template-columns:repeat(3,1fr);}
  @media (max-width:900px){.grid.cols-2,.grid.cols-3{grid-template-columns:1fr;}}

  .card{
    background:var(--card); border:1px solid var(--line); border-radius:12px;
    padding:20px 22px; box-shadow:var(--shadow);
  }
  .card h3{margin:0 0 14px; font-size:16px; color:var(--seal-deep); display:flex; align-items:center; gap:8px;}
  .card canvas{max-height:280px;}

  /* ===== Filters / table ===== */
  .filter-bar{
    display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px;
    background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px;
    box-shadow:var(--shadow);
  }
  .filter-bar input[type=text], .filter-bar select{
    font-family:'Sarabun',sans-serif; font-size:14px; padding:9px 12px;
    border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink);
  }
  .filter-bar input[type=text]{flex:1 1 240px;}
  .filter-bar select{flex:1 1 160px;}
  .filter-bar .count-pill{
    align-self:center; font-size:13px; color:var(--seal-deep); font-weight:600;
    background:var(--paper2); padding:8px 14px; border-radius:20px; white-space:nowrap;
  }

  .table-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--card); box-shadow:var(--shadow);}
  table{width:100%; border-collapse:collapse; font-size:13.6px; min-width:1180px;}
  thead th{
    position:sticky; top:0; background:var(--seal-deep); color:#F4F1E8;
    text-align:left; padding:11px 12px; font-weight:600; font-size:12.8px;
    white-space:nowrap; letter-spacing:.02em;
  }
  tbody td{padding:10px 12px; border-bottom:1px solid #EEEAD8; vertical-align:top;}
  tbody tr:hover{background:#FBF8ED;}
  td.title-cell{max-width:340px;}
  td.purpose-cell{max-width:320px; color:#4a4a3a;}
  .badge{
    display:inline-block; padding:2px 9px; border-radius:14px; font-size:11.5px; font-weight:600;
  }
  .badge.perm{background:#E4F2E9; color:var(--seal-deep);}
  .badge.adhoc{background:#F6E9D8; color:var(--gold);}
  .badge.amend{background:#EFE2E2; color:var(--red); margin-left:4px;}
  .muted{color:#9a9483; font-style:italic;}
  .empty-row td{text-align:center; padding:40px; color:#9a9483;}

  /* ===== Cluster cards ===== */
  .cluster-card{
    background:var(--card); border:1px solid var(--line); border-radius:14px;
    padding:22px 24px; box-shadow:var(--shadow); margin-bottom:18px;
    border-left:6px solid var(--line);
  }
  .cluster-card.merge{border-left-color:var(--red);}
  .cluster-card.keep{border-left-color:var(--seal);}
  .cluster-card.watch{border-left-color:var(--gold);}
  .cluster-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap;}
  .cluster-head h3{margin:0; font-size:17px; color:var(--ink);}
  .cluster-dept{font-size:12.5px; color:#7a7460; margin-top:3px;}
  .verdict{
    font-family:'Noto Serif Thai',serif; font-weight:700; font-size:13.5px;
    padding:6px 14px; border-radius:20px; white-space:nowrap;
  }
  .verdict.merge{background:#F4E3E0; color:var(--red);}
  .verdict.keep{background:#DFEFE5; color:var(--seal-deep);}
  .verdict.watch{background:#F7ECD6; color:var(--gold);}
  .cluster-orders{margin:14px 0 6px; display:flex; flex-wrap:wrap; gap:6px;}
  .order-chip{
    font-size:12px; background:var(--paper2); border:1px solid var(--line); border-radius:6px;
    padding:3px 9px; font-family:'Sarabun',sans-serif; color:#5b5b45;
  }
  .cluster-issue, .cluster-reason{font-size:14px; margin:10px 0 0;}
  .cluster-reason{background:#FAF7EC; border-radius:8px; padding:10px 14px; border:1px dashed var(--gold-soft);}
  .cluster-reason b{color:var(--seal-deep);}

  .legend-row{display:flex; gap:16px; flex-wrap:wrap; margin:18px 0 26px;}
  .legend-item{display:flex; align-items:center; gap:8px; font-size:13.5px; color:#5b5b45;}
  .legend-swatch{width:14px; height:14px; border-radius:4px;}

  .note-box{
    background:#FBF3E4; border:1px solid var(--gold-soft); border-radius:10px;
    padding:14px 18px; font-size:13.5px; color:#5c4a20; margin-bottom:24px;
  }
  .note-box b{color:var(--gold);}

  footer{
    text-align:center; padding:26px 20px 40px; color:#8b876f; font-size:12.5px;
  }

  /* ===== Row click / detail modal ===== */
  tbody tr.clickable{cursor:pointer;}
  tbody tr.clickable:hover{background:#F3EFE0;}
  tbody tr.clickable td:first-child{position:relative;}

  .modal-overlay{
    display:none; position:fixed; inset:0; z-index:200;
    background:rgba(18,32,22,.55); backdrop-filter:blur(2px);
    align-items:flex-start; justify-content:center;
    padding:5vh 16px; overflow-y:auto;
  }
  .modal-overlay.open{display:flex;}
  .modal-card{
    background:var(--paper); border-radius:16px; max-width:760px; width:100%;
    box-shadow:0 24px 60px -20px rgba(0,0,0,.5);
    border:1px solid var(--line);
    animation:modalIn .16s ease-out;
  }
  @keyframes modalIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}
  .modal-head{
    background:linear-gradient(180deg, var(--seal-deep) 0%, var(--seal) 100%);
    color:#F4F1E8; border-radius:16px 16px 0 0; padding:20px 24px;
    display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
  }
  .modal-head h3{margin:0 0 6px; font-family:'Noto Serif Thai',serif; font-size:19px; line-height:1.4;}
  .modal-head .modal-order{font-size:13px; color:var(--gold-soft); letter-spacing:.03em;}
  .modal-close{
    background:rgba(244,241,232,.14); border:1px solid rgba(244,241,232,.3); color:#F4F1E8;
    border-radius:8px; width:32px; height:32px; font-size:18px; line-height:1; cursor:pointer;
    flex:0 0 auto;
  }
  .modal-close:hover{background:rgba(244,241,232,.26);}
  .modal-body{padding:20px 24px 6px;}
  .modal-badges{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px;}
  .modal-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; margin-bottom:6px;
  }
  @media (max-width:600px){.modal-grid{grid-template-columns:1fr;}}
  .modal-field .lbl{
    font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:#8b876f; font-weight:600; margin-bottom:3px;
  }
  .modal-field .val{font-size:14.5px; color:var(--ink);}
  .modal-field.full{grid-column:1 / -1;}
  .modal-field .val.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; word-break:break-all; color:#5b5b45;}
  .modal-divider{border:none; border-top:1px dashed var(--gold-soft); margin:18px 0;}
  .modal-foot{
    padding:16px 24px 22px; display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  }
  .pdf-btn{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--seal); color:#F4F1E8; border:none; border-radius:10px;
    padding:11px 18px; font-family:'Sarabun',sans-serif; font-weight:600; font-size:14px;
    cursor:pointer; box-shadow:var(--shadow);
  }
  .pdf-btn:hover{background:var(--seal-deep);}
  .pdf-btn svg{width:16px; height:16px; flex:0 0 auto;}
  .pdf-btn.disabled{background:#cfc9b3; color:#6b6754; cursor:not-allowed;}
  .pdf-note{font-size:12.5px; color:#8b876f;}

  /* ===== Order create/edit form (wide modal) ===== */
  .modal-card-wide{max-width:900px;}
  @media (max-width:960px){.modal-card-wide{max-width:100%;}}
  .modal-card-wide .modal-body{padding:22px 28px 8px;}
  .form-section{
    margin-bottom:26px; padding-bottom:22px; border-bottom:1px dashed var(--line);
  }
  .form-section:last-of-type{border-bottom:none; margin-bottom:8px; padding-bottom:0;}
  .form-section-title{
    margin:0 0 14px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
    color:var(--seal-deep); display:flex; align-items:center; gap:8px;
  }
  .form-section-title::before{
    content:""; width:4px; height:14px; background:var(--gold-soft); border-radius:2px; display:inline-block;
  }
  .form-section .modal-grid{grid-template-columns:1fr 1fr 1fr; gap:16px 18px;}
  @media (max-width:760px){.form-section .modal-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:520px){.form-section .modal-grid{grid-template-columns:1fr;}}
  .modal-field input[type=text], .modal-field input[type=date], .modal-field input[type=number],
  .modal-field textarea{
    width:100%; font-family:'Sarabun',sans-serif; font-size:14px; padding:9px 11px;
    border:1.5px solid var(--line); border-radius:9px; background:#fff; color:var(--ink);
    transition:border-color .15s, box-shadow .15s;
  }
  .modal-field input:focus, .modal-field textarea:focus{
    outline:none; border-color:var(--seal); box-shadow:0 0 0 3px rgba(14,91,58,.10);
  }
  .textarea-long{
    resize:vertical; min-height:96px; line-height:1.65; font-size:14.5px;
  }
  .pdf-upload-box{
    display:flex; flex-wrap:wrap; align-items:center; gap:14px;
    background:#FAF7EC; border:1.5px dashed var(--gold-soft); border-radius:12px; padding:16px 18px;
  }
  .pdf-upload-dropzone{
    display:flex; align-items:center; gap:10px; cursor:pointer;
    color:var(--seal-deep); font-size:13.5px; font-weight:600; flex:1 1 260px;
  }
  .pdf-upload-dropzone svg{width:26px; height:26px; flex:0 0 auto; color:var(--gold);}
  .pdf-upload-dropzone:hover{color:var(--seal);}
  .pdf-upload-actions{display:flex; align-items:center; gap:10px; flex:0 0 auto;}

  /* ===== Linkage analysis / group builder ===== */
  .storage-note{
    font-size:12.5px; color:#8b876f; background:#FBF3E4; border:1px dashed var(--gold-soft);
    border-radius:8px; padding:8px 12px; margin:-6px 0 20px; display:inline-block;
  }
  .builder-card{margin-bottom:24px;}
  .fld-lbl{
    display:block; font-size:12.5px; font-weight:600; color:#5b5b45;
    text-transform:uppercase; letter-spacing:.04em; margin:14px 0 6px;
  }
  .fld-lbl:first-child{margin-top:0;}
  .builder-card input[type=text], .builder-card textarea{
    width:100%; font-family:'Sarabun',sans-serif; font-size:14px; padding:10px 12px;
    border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); resize:vertical;
  }
  .builder-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:20px;}
  @media (max-width:800px){.builder-grid{grid-template-columns:1fr;}}
  .search-results{
    margin-top:8px; max-height:220px; overflow-y:auto; border:1px solid var(--line); border-radius:8px;
    background:#fff;
  }
  .search-results:empty{display:none;}
  .search-result-item{
    display:flex; justify-content:space-between; align-items:center; gap:10px;
    padding:9px 12px; border-bottom:1px solid #EEEAD8; font-size:13px;
  }
  .search-result-item:last-child{border-bottom:none;}
  .search-result-item .sr-text{flex:1 1 auto; min-width:0;}
  .search-result-item .sr-order{font-weight:700; color:var(--seal-deep);}
  .search-result-item .sr-title{color:#5b5b45; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .add-chip-btn{
    flex:0 0 auto; border:1px solid var(--seal); background:#fff; color:var(--seal-deep);
    border-radius:7px; padding:5px 10px; font-size:12.5px; font-weight:600; cursor:pointer;
  }
  .add-chip-btn:hover{background:var(--seal); color:#fff;}
  .add-chip-btn:disabled{border-color:var(--line); color:#b4ae98; cursor:default; background:#f1efe4;}
  .selected-chips{
    min-height:44px; border:1px dashed var(--line); border-radius:8px; padding:10px;
    display:flex; flex-wrap:wrap; gap:6px; align-content:flex-start;
  }
  .sel-chip{
    display:inline-flex; align-items:center; gap:6px; background:var(--paper2); border:1px solid var(--line);
    border-radius:16px; padding:4px 6px 4px 10px; font-size:12.5px; color:var(--ink);
  }
  .sel-chip button{
    border:none; background:var(--seal-deep); color:#fff; width:18px; height:18px; border-radius:50%;
    line-height:1; cursor:pointer; font-size:12px; flex:0 0 auto;
  }
  .related-panel{
    margin-top:16px; background:#FAF7EC; border:1px dashed var(--gold-soft); border-radius:10px; padding:12px 14px;
  }
  .related-list{display:flex; flex-direction:column; gap:8px; margin-top:8px;}
  .related-item{
    display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
    background:#fff; border:1px solid var(--line); border-radius:8px; padding:9px 12px; font-size:13px;
  }
  .related-item .ri-main{min-width:0;}
  .related-item .ri-order{font-weight:700; color:var(--seal-deep);}
  .related-item .ri-title{display:block; color:#5b5b45; margin:2px 0 4px;}
  .related-item .ri-reasons{display:flex; flex-wrap:wrap; gap:5px;}
  .ri-tag{
    font-size:11px; background:#EFE9D3; color:#7a5c1f; border-radius:10px; padding:1px 8px;
  }
  .status-picker{display:flex; flex-wrap:wrap; gap:8px;}
  .status-opt{
    border:1.5px solid var(--line); background:#fff; color:#5b5b45; border-radius:20px;
    padding:8px 16px; font-family:'Sarabun',sans-serif; font-weight:600; font-size:13.5px; cursor:pointer;
  }
  .status-opt.st-merge.active{background:#F4E3E0; border-color:var(--red); color:var(--red);}
  .status-opt.st-cancel.active{background:#EAE2E7; border-color:#5b3b5c; color:#5b3b5c;}
  .status-opt.st-continue.active{background:#DFEFE5; border-color:var(--seal); color:var(--seal-deep);}
  .status-opt.st-pending.active{background:var(--paper2); border-color:var(--gold-soft); color:var(--gold);}
  .builder-actions{display:flex; align-items:center; gap:12px; margin-top:18px; flex-wrap:wrap;}
  .primary-btn{
    background:var(--seal); color:#fff; border:none; border-radius:10px; padding:11px 20px;
    font-family:'Sarabun',sans-serif; font-weight:700; font-size:14px; cursor:pointer; box-shadow:var(--shadow);
  }
  .primary-btn:hover{background:var(--seal-deep);}
  .ghost-btn{
    background:#fff; color:var(--seal-deep); border:1.5px solid var(--seal); border-radius:10px;
    padding:10px 18px; font-family:'Sarabun',sans-serif; font-weight:600; font-size:13.5px; cursor:pointer;
  }
  .ghost-btn:hover{background:#EAF3EC;}
  .ghost-btn.small{padding:7px 14px; font-size:12.5px;}
  .file-btn{display:inline-flex; align-items:center; cursor:pointer;}
  .groups-toolbar{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
    margin:8px 0 14px;
  }
  .groups-toolbar h3{margin:0; font-size:16px; color:var(--seal-deep); font-family:'Noto Serif Thai',serif;}
  .groups-io{display:flex; gap:8px;}
  .group-card{
    background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px;
    box-shadow:var(--shadow); margin-bottom:14px; border-left:6px solid var(--line);
  }
  .group-card.st-merge{border-left-color:var(--red);}
  .group-card.st-cancel{border-left-color:#5b3b5c;}
  .group-card.st-continue{border-left-color:var(--seal);}
  .group-card.st-pending{border-left-color:var(--gold-soft);}
  .group-head{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap;}
  .group-head h4{margin:0; font-size:16px; color:var(--ink); font-family:'Noto Serif Thai',serif;}
  .group-meta{font-size:12px; color:#8b876f; margin-top:3px;}
  .status-badge{
    font-family:'Noto Serif Thai',serif; font-weight:700; font-size:12.5px;
    padding:5px 13px; border-radius:20px; white-space:nowrap;
  }
  .status-badge.st-merge{background:#F4E3E0; color:var(--red);}
  .status-badge.st-cancel{background:#EAE2E7; color:#5b3b5c;}
  .status-badge.st-continue{background:#DFEFE5; color:var(--seal-deep);}
  .status-badge.st-pending{background:var(--paper2); color:var(--gold);}
  .group-orders{margin:10px 0 6px; display:flex; flex-wrap:wrap; gap:6px;}
  .group-issue, .group-reco{font-size:13.5px; margin:8px 0 0;}
  .group-reco{background:#FAF7EC; border-radius:8px; padding:9px 13px; border:1px dashed var(--gold-soft);}
  .group-reco b, .group-issue b{color:var(--seal-deep);}
  .group-actions{display:flex; gap:8px; margin-top:12px;}
  .icon-btn{
    border:1px solid var(--line); background:#fff; color:#5b5b45; border-radius:8px;
    padding:6px 12px; font-size:12.5px; font-weight:600; cursor:pointer;
  }
  .icon-btn:hover{background:#F3EFE0;}
  .icon-btn.danger:hover{background:#F4E3E0; border-color:var(--red); color:var(--red);}

/* ===== Auth pages (login/register) — split-screen design ===== */
body.auth-page{
  margin:0; min-height:100vh;
  background:var(--paper);
  display:flex; align-items:stretch; justify-content:center;
}
.auth-shell{
  display:flex; width:100%; min-height:100vh;
}

/* Left decorative panel */
.auth-visual{
  flex:1 1 46%;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(900px 500px at 15% 110%, rgba(216,179,106,.20), transparent),
    linear-gradient(160deg, var(--seal-deep) 0%, var(--seal) 62%, #0E4A31 100%);
  color:#F4F1E8;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:48px 44px;
}
.auth-visual::before{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(120deg, rgba(244,241,232,.035) 0 1px, transparent 1px 64px),
                     repeating-linear-gradient(30deg, rgba(244,241,232,.03) 0 1px, transparent 1px 64px);
  pointer-events:none;
}
.auth-emblem{
  width:78px; height:78px; flex:0 0 auto;
}
.auth-visual-top{ position:relative; z-index:1; }
.auth-visual-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; letter-spacing:.08em; color:var(--gold-soft);
  margin:22px 0 10px;
}
.auth-visual-eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--gold-soft); display:inline-block;}
.auth-visual h1{
  font-size:30px; line-height:1.35; margin:0 0 14px; max-width:420px;
  font-family:'Noto Serif Thai',serif; font-weight:700;
}
.auth-visual p.tag{
  font-size:14.5px; color:rgba(244,241,232,.82); max-width:400px; line-height:1.7; margin:0;
}
.auth-visual-features{
  position:relative; z-index:1;
  list-style:none; margin:32px 0 0; padding:0;
  display:flex; flex-direction:column; gap:14px;
}
.auth-visual-features li{
  display:flex; align-items:flex-start; gap:12px;
  font-size:13.5px; color:rgba(244,241,232,.88);
}
.auth-visual-features svg{
  flex:0 0 auto; width:19px; height:19px; margin-top:1px; color:var(--gold-soft);
}
.auth-visual-foot{
  position:relative; z-index:1;
  font-size:12px; color:rgba(244,241,232,.55); border-top:1px solid rgba(244,241,232,.18); padding-top:16px;
}

/* Right form panel */
.auth-panel{
  flex:1 1 54%;
  display:flex; align-items:center; justify-content:center;
  padding:40px 24px;
  background:var(--paper);
}
.auth-card{
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:40px 40px 34px; max-width:420px; width:100%;
  box-shadow: 0 1px 2px rgba(18,32,22,.05), 0 30px 60px -24px rgba(18,32,22,.22);
}
.auth-card .auth-mobile-emblem{ display:none; }
.auth-card h1{
  margin:0 0 6px; font-size:23px; color:var(--seal-deep); font-family:'Noto Serif Thai',serif;
}
.auth-card .section-desc{ margin:0 0 22px; font-size:13.5px; }
.auth-card label.fld-lbl{ font-size:12px; }
.auth-card label.fld-lbl:first-of-type{margin-top:16px;}
.auth-card input[type=text], .auth-card input[type=email], .auth-card input[type=password]{
  width:100%; font-family:'Sarabun',sans-serif; font-size:14.5px; padding:11px 13px;
  border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.auth-card input:focus{
  outline:none; border-color:var(--seal); box-shadow:0 0 0 3px rgba(14,91,58,.12);
}
.alert{border-radius:10px; padding:12px 14px; font-size:13.5px; margin-bottom:16px;}
.alert-error{background:#F4E3E0; color:var(--red); border:1px solid #E3B9AF;}
.alert-success{background:#DFEFE5; color:var(--seal-deep); border:1px solid #9FCBAE;}

.auth-card .builder-actions{
  margin-top:22px; display:flex; flex-direction:column; align-items:stretch; gap:12px;
}
.auth-card .primary-btn{
  width:100%; padding:13px 20px; font-size:14.5px; border-radius:10px;
  background:linear-gradient(180deg, var(--seal) 0%, var(--seal-deep) 100%);
  box-shadow:0 10px 22px -10px rgba(10,63,41,.55);
}
.auth-card .primary-btn:hover{ filter:brightness(1.06); }
.auth-card .ghost-btn{
  width:100%; text-align:center; padding:11px 20px; font-size:13.5px; border-radius:10px;
}

@media (max-width: 880px){
  .auth-visual{ display:none; }
  .auth-panel{ padding:32px 18px; }
  .auth-card .auth-mobile-emblem{
    display:flex; justify-content:center; margin-bottom:18px;
  }
  .auth-card .auth-mobile-emblem svg{ width:52px; height:52px; }
}

/* ===== Top bar / user menu ===== */
.topbar-user{
  display:flex; align-items:center; gap:12px; margin-left:auto; padding-left:16px;
  font-size:13px; color:#5b5b45; white-space:nowrap;
}
.topbar-user a{color:var(--seal-deep); font-weight:600; text-decoration:none;}
.topbar-user a:hover{text-decoration:underline;}
.role-chip{
  display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:10px;
  background:var(--paper2); color:var(--seal-deep); vertical-align:middle; margin-left:2px;
}
.tabs-inner{align-items:center;}

/* ===== Checkbox-based selection in search/table ===== */
.pick-checkbox{width:17px; height:17px; cursor:pointer;}
.search-result-item .pick-checkbox{margin-right:2px;}
.loading-row td{text-align:center; padding:30px; color:#9a9483;}
.pager{display:flex; align-items:center; gap:10px; justify-content:flex-end; margin-top:12px; font-size:13px; color:#5b5b45;}
.pager button{
  border:1px solid var(--line); background:#fff; border-radius:8px; padding:6px 12px; cursor:pointer; font-weight:600;
}
.pager button:disabled{color:#c3bda6; cursor:not-allowed;}
.view-btn{
  border:1px solid var(--seal); background:#fff; color:var(--seal-deep); border-radius:7px;
  padding:5px 10px; font-size:12.5px; font-weight:600; cursor:pointer;
}
.view-btn:hover{background:var(--seal); color:#fff;}