:root{
  --page-bg:#d9caf7;
  --ink:#15142b;
  --white:#ffffff;
  --muted:#9693a9;
  --muted-2:#b2afc4;
  --border:#eef0f4;
  --panel-soft:#f8f7fc;

  --lime:#d8f76e;
  --lime-strong:#c3ea45;

  --green-bg:#dcf3df; --green-ic:#2a9a5a;
  --amber-bg:#fbe3d0; --amber-ic:#d9793a;
  --red-bg:#fbdede; --red-ic:#d64545;
  --blue-bg:#dde4fc; --blue-ic:#5478f0;

  --r-xl:28px;
  --r-lg:20px;
  --r-md:14px;
  --r-sm:10px;
  --shadow:0 14px 34px rgba(21,20,43,.07);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--page-bg);
  color:var(--ink);
  min-height:100vh;
}
.ic{width:18px;height:18px;display:inline-block;vertical-align:middle;flex-shrink:0;}
.muted{color:var(--muted);font-weight:500;}
a{color:inherit;}
button{font-family:inherit;cursor:pointer;}
input,textarea,select{font-family:inherit;}
ul{list-style:none;margin:0;padding:0;}

.page{min-height:100vh;display:flex;justify-content:center;padding:32px 20px;}
.app{
  width:100%;max-width:1360px;display:flex;
  background:var(--white);border-radius:28px;
  box-shadow:0 30px 70px rgba(21,20,43,.16);
  overflow:hidden;align-items:stretch;
}

/* ---------- Sidebar ---------- */
.sidebar{width:236px;flex-shrink:0;background:var(--ink);color:#fff;padding:26px 18px;display:flex;flex-direction:column;}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;padding:0 8px;margin-bottom:26px;}
.brand-mark{width:28px;height:28px;background:#fff;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.nav{display:flex;flex-direction:column;gap:4px;}
.nav-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:13px;color:#a5a2ba;text-decoration:none;font-size:14px;font-weight:600;cursor:pointer;}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff;}
.nav-item.active{background:var(--lime);color:var(--ink);}
.new-article-btn{
  margin-top:18px;display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--lime);color:var(--ink);border:none;border-radius:14px;
  padding:12px 14px;font-size:13.5px;font-weight:800;
}
.new-article-btn:hover{background:var(--lime-strong);}
.sidebar-foot{margin-top:auto;padding:14px 8px 4px;border-top:1px solid rgba(255,255,255,.08);margin-top:auto;}
.sidebar-foot p{margin:0;font-size:12.5px;font-weight:700;}
.sidebar-foot p.muted{font-size:11px;color:#7d7a92;font-weight:600;margin-top:3px;}

/* ---------- Main ---------- */
.main{flex:1;min-width:0;padding:30px 34px 40px;overflow-y:auto;max-height:100vh;}
.view-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:16px;flex-wrap:wrap;}
.view-head h1{font-size:24px;font-weight:800;margin:0;}
.view-head .sub{font-size:13.5px;color:var(--muted);font-weight:600;margin-top:4px;}
.back-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:14px;cursor:pointer;background:none;border:none;padding:0;}
.back-link:hover{color:var(--ink);}

.panel{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:22px;}

/* ---------- Overview ---------- */
.stat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px;}
.stat-card{background:var(--white);border:1px solid var(--border);border-radius:18px;padding:18px 20px;box-shadow:var(--shadow);}
.stat-card .num{font-size:30px;font-weight:800;}
.stat-card .label{font-size:12.5px;color:var(--muted);font-weight:700;margin-top:4px;}
.stat-card.accent{background:var(--ink);color:#fff;}
.stat-card.accent .label{color:#a5a2ba;}

.recent-list{display:flex;flex-direction:column;}
.recent-list li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);cursor:pointer;}
.recent-list li:last-child{border-bottom:none;}
.recent-list li:hover .rl-title{color:#5478f0;}
.rl-icon{width:36px;height:36px;border-radius:11px;background:var(--panel-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--muted);}
.rl-text{flex:1;min-width:0;}
.rl-title{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rl-meta{font-size:11.5px;color:var(--muted);margin-top:2px;}

/* ---------- Status pill ---------- */
.pill{font-size:10.5px;font-weight:800;padding:5px 11px;border-radius:20px;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;}
.pill-published{background:var(--green-bg);color:var(--green-ic);}
.pill-draft{background:var(--amber-bg);color:var(--amber-ic);}
.pill-in_review{background:var(--blue-bg);color:var(--blue-ic);}
.pill-approved{background:#e7e6fb;color:#5b4bd6;}
.pill-rejected{background:var(--red-bg);color:var(--red-ic);}

/* ---------- Articles list ---------- */
.list-toolbar{display:flex;gap:12px;margin-bottom:16px;align-items:center;flex-wrap:wrap;}
.search-box{display:flex;align-items:center;gap:8px;background:var(--panel-soft);border:1px solid var(--border);border-radius:20px;padding:9px 15px;flex:1;min-width:200px;max-width:320px;}
.search-box .ic{color:var(--muted);width:16px;height:16px;}
.search-box input{border:none;outline:none;background:transparent;font-size:13.5px;width:100%;color:var(--ink);}
.filter-select{background:var(--panel-soft);border:1px solid var(--border);border-radius:20px;padding:9px 15px;font-size:13px;font-weight:700;color:var(--ink);}

.article-table{width:100%;border-collapse:collapse;}
.article-table th{text-align:left;font-size:11px;color:var(--muted-2);font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:0 12px 10px;}
.article-table td{padding:14px 12px;border-top:1px solid var(--border);vertical-align:middle;}
.article-table tr:hover td{background:var(--panel-soft);}
.at-title{font-size:14px;font-weight:800;}
.at-slug{font-size:11.5px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin-top:2px;}
.at-actions{display:flex;gap:6px;justify-content:flex-end;}
.icon-btn{width:32px;height:32px;border-radius:10px;border:1px solid var(--border);background:var(--white);display:flex;align-items:center;justify-content:center;color:var(--ink);}
.icon-btn:hover{background:var(--panel-soft);}
.icon-btn.danger:hover{background:var(--red-bg);color:var(--red-ic);border-color:var(--red-bg);}
/* article table: 1-line title truncate + people/date cells */
.art-table{table-layout:fixed;}
.art-table th:nth-child(1){width:38%;}
.art-table th:nth-child(2),.art-table th:nth-child(3){width:12%;}
.art-table th:nth-child(4){width:16%;}
.at-titlecell{min-width:0;}
.at-title1{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.at-people{font-size:13px;font-weight:700;color:var(--ink);}
.at-datecell{font-size:12.5px;color:var(--muted);font-weight:600;}
.at-upd{font-size:11px;color:var(--muted-2);margin-top:2px;}

/* ตารางผลงาน: ปรับความกว้างคอลัมน์ + องค์ประกอบเฉพาะ */
.proj-table th:nth-child(1){width:26%;}
.proj-table th:nth-child(2){width:10%;}
.proj-table th:nth-child(3){width:13%;}
.proj-table th:nth-child(4){width:15%;}
.proj-table th:nth-child(5){width:11%;}
.proj-table th:nth-child(6){width:12%;}
.proj-titlecell{display:flex;align-items:center;gap:12px;min-width:0;}
.proj-titletext{min-width:0;}
.sol-tag{display:inline-block;font-size:12px;font-weight:700;color:var(--ink);background:var(--panel-soft);border:1px solid var(--border);border-radius:20px;padding:3px 10px;}

/* อุปกรณ์ทั้งหมด (คำนวณอัตโนมัติ - อ่านอย่างเดียว) */
.equip-auto{background:var(--panel-soft);border:1px solid var(--border);border-radius:12px;padding:6px 4px;}
.equip-auto-list{list-style:none;margin:0;padding:0;}
.equip-auto-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;font-size:13.5px;}
.equip-auto-list li + li{border-top:1px solid var(--border);}
.equip-auto-list .ea-name{font-weight:700;color:var(--ink);}
.equip-auto-list .ea-qty{font-weight:700;color:var(--muted);white-space:nowrap;}

.empty-state{text-align:center;padding:60px 20px;color:var(--muted);}
.empty-state .ic{width:36px;height:36px;margin-bottom:10px;}

/* ---------- Editor ---------- */
.editor-grid{display:grid;grid-template-columns:1fr 300px;gap:22px;align-items:start;}
.editor-main{display:flex;flex-direction:column;gap:16px;min-width:0;}
.field{display:flex;flex-direction:column;gap:6px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.field label{font-size:12.5px;font-weight:800;color:var(--ink);}
.field .hint{font-size:11.5px;color:var(--muted);font-weight:500;}
.field input[type=text],.field input[type=date],.field select,.field textarea{
  border:1px solid var(--border);background:var(--panel-soft);border-radius:12px;
  padding:11px 14px;font-size:14px;color:var(--ink);outline:none;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#c7bdf5;background:#fff;}
.field textarea{resize:vertical;font-family:inherit;line-height:1.6;}
.counter{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;font-weight:700;}
.counter .n{padding:2px 8px;border-radius:10px;}
.counter .n.ok{background:var(--green-bg);color:var(--green-ic);}
.counter .n.warn{background:var(--amber-bg);color:var(--amber-ic);}

.summary-preview{background:var(--panel-soft);border:1px dashed var(--border);border-radius:12px;padding:12px 14px;font-size:12.5px;color:var(--muted);}
.summary-preview strong{color:var(--ink);}

/* rich-text toolbar */
.rte{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#fff;}
.rte-toolbar{
  display:flex;align-items:center;gap:3px;flex-wrap:nowrap;overflow-x:auto;
  padding:6px 8px;background:var(--panel-soft);border-bottom:1px solid var(--border);
  scrollbar-width:thin;
}
.rte-toolbar::-webkit-scrollbar{height:5px;}
.rte-toolbar::-webkit-scrollbar-thumb{background:#d5d1e6;border-radius:3px;}
.rte-toolbar > *{flex-shrink:0;}
.rte-select{
  appearance:none;-webkit-appearance:none;
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239693a9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 8px center;
  border:1px solid var(--border);border-radius:9px;
  padding:7px 24px 7px 10px;font-size:12.5px;font-weight:700;color:var(--ink);cursor:pointer;
  max-width:150px;
}
.rte-select:hover{background-color:var(--panel-soft);}
.rte-select:disabled{opacity:.5;cursor:not-allowed;}
.rte-btn{
  width:30px;height:30px;border-radius:9px;border:none;background:transparent;
  color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:14px;
}
.rte-btn b{font-weight:800;font-size:15px;}
.rte-btn .ic{width:17px;height:17px;}
.rte-btn:hover{background:#e9e6f5;}
.rte-btn:active{background:#ddd8ee;}
.rte-btn:disabled{opacity:.4;cursor:not-allowed;}
.rte-div{width:1px;height:20px;background:var(--border);margin:0 3px;}
.rte-spacer{flex:1 1 auto;min-width:8px;}
.rte-tabs{display:flex;gap:3px;background:#fff;border:1px solid var(--border);border-radius:9px;padding:2px;}
.rte-tab{background:transparent;border:none;border-radius:7px;padding:5px 11px;font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap;}
.rte-tab.active{background:var(--ink);color:#fff;}

.body-editor textarea{min-height:420px;font-size:13.5px;border:none;border-radius:0;background:#fff;padding:16px 18px;}
.body-editor textarea:focus{border:none;background:#fff;}
.body-preview{display:none;min-height:420px;padding:20px 22px;background:#fff;overflow-y:auto;max-height:560px;}
.body-preview.active{display:block;}
.body-editor{display:none;}
.body-editor.active{display:block;}
.body-preview h2{font-size:18px;margin:20px 0 10px;}
.body-preview h2:first-child{margin-top:0;}
.body-preview h3{font-size:15.5px;margin:16px 0 8px;}
.body-preview p{font-size:14px;line-height:1.75;margin:0 0 12px;color:#2a2a3d;}
.body-preview ul{margin:0 0 12px;padding-left:20px;list-style:disc;}
.body-preview li{font-size:14px;line-height:1.7;margin-bottom:4px;color:#2a2a3d;}
.body-preview a{color:#5478f0;text-decoration:underline;}
.body-preview img{max-width:100%;border-radius:12px;margin:10px 0;}
.body-preview strong{font-weight:800;}

/* ---------- SEO sidebar ---------- */
.seo-panel{position:sticky;top:0;display:flex;flex-direction:column;gap:16px;}
.seo-panel h2{font-size:14.5px;font-weight:800;margin:0 0 2px;}
.seo-checklist{display:flex;flex-direction:column;gap:10px;}
.seo-item{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;}
.seo-item .dot{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.seo-item .dot.pass{background:var(--green-bg);color:var(--green-ic);}
.seo-item .dot.warn{background:var(--amber-bg);color:var(--amber-ic);}
.seo-item .dot.fail{background:var(--red-bg);color:var(--red-ic);}
.seo-item .dot.info{background:var(--panel-soft);color:var(--muted-2);}
.seo-item .dot .ic{width:12px;height:12px;}
.seo-item .txt strong{display:block;font-weight:700;color:var(--ink);}
.seo-item .txt span{color:var(--muted);font-size:11.5px;}

/* ---- Phase 3: SEO Score + SERP + groups ---- */
.score-box{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.score-ring{--pct:0;width:64px;height:64px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--ring-c) calc(var(--pct)*1%), var(--panel-soft) 0);}
.score-ring::after{content:"";position:absolute;width:50px;height:50px;border-radius:50%;background:var(--white);}
.score-ring{position:relative;}
.score-num{position:relative;z-index:1;font-size:20px;font-weight:800;color:var(--ink);}
.score-great{--ring-c:var(--green-ic);}
.score-good{--ring-c:#4a9d5b;}
.score-ok{--ring-c:var(--amber-ic);}
.score-bad{--ring-c:var(--red-ic);}
.score-title{font-size:13px;font-weight:800;color:var(--ink);}
.score-grade{font-size:12px;font-weight:700;color:var(--muted);margin-top:2px;}
.serp-wrap{margin-bottom:14px;}
.serp-label{font-size:11px;font-weight:700;color:var(--muted-2);margin-bottom:5px;text-transform:uppercase;letter-spacing:.03em;}
.serp{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:11px 13px;}
.serp-url{font-size:11.5px;color:#3c7a3c;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.serp-title{font-size:15px;color:#1a0dab;font-weight:600;line-height:1.3;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;}
.serp-desc{font-size:12px;color:#4d5156;line-height:1.5;}
.seo-groups{display:flex;flex-direction:column;gap:14px;}
.seo-group{display:flex;flex-direction:column;gap:9px;}
.sg-title{font-size:11px;font-weight:800;color:var(--muted-2);text-transform:uppercase;letter-spacing:.03em;padding-bottom:2px;border-bottom:1px solid var(--border);}

.error-box{background:var(--red-bg);color:var(--red-ic);border-radius:12px;padding:12px 14px;font-size:12.5px;font-weight:700;display:flex;flex-direction:column;gap:4px;}

.editor-actions{display:flex;flex-direction:column;gap:8px;}
.btn{border:none;border-radius:14px;padding:12px 16px;font-size:13.5px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;}
.btn .ic{width:16px;height:16px;}
.btn-primary{background:var(--ink);color:#fff;}
.btn-primary:hover{background:#252345;}
.btn-lime{background:var(--lime);color:var(--ink);}
.btn-lime:hover{background:var(--lime-strong);}
.btn-ghost{background:var(--panel-soft);color:var(--ink);border:1px solid var(--border);}
.btn-ghost:hover{background:#eeecf7;}
.btn-danger{background:var(--red-bg);color:var(--red-ic);}
.btn-danger:hover{background:#f7caca;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

.status-row{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:var(--panel-soft);border-radius:12px;font-size:12.5px;font-weight:700;}

.meta-info{display:flex;flex-direction:column;gap:2px;padding:12px 14px;background:var(--panel-soft);border-radius:12px;}
.mi-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;font-size:12.5px;}
.mi-row + .mi-row{border-top:1px solid var(--border);}
.mi-k{color:var(--muted);font-weight:600;}
.mi-v{font-weight:700;color:var(--ink);text-align:right;}

/* ---------- Toast ---------- */
.toast-wrap{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:10px;z-index:999;}
.toast{background:var(--ink);color:#fff;padding:14px 18px;border-radius:14px;font-size:13px;font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.25);max-width:340px;display:flex;align-items:center;gap:10px;animation:toast-in .2s ease;}
.toast.success{background:#1f7a45;}
.toast.error{background:#a83232;}
@keyframes toast-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* ---------- Confirm modal ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(21,20,43,.45);display:flex;align-items:center;justify-content:center;z-index:998;}
.modal{background:#fff;border-radius:20px;padding:24px;max-width:380px;width:90%;box-shadow:0 30px 60px rgba(0,0,0,.3);}
.modal h3{margin:0 0 8px;font-size:16px;font-weight:800;}
.modal p{margin:0 0 18px;font-size:13.5px;color:var(--muted);line-height:1.6;}
.modal-actions{display:flex;gap:10px;}
.modal-actions .btn{width:auto;flex:1;}
.modal-input{width:100%;box-sizing:border-box;margin:0 0 18px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;font:inherit;font-size:13.5px;resize:vertical;}
.modal-input:focus{outline:none;border-color:#c7bdf5;}

/* ---------- Workflow: reject box + warn button ---------- */
.reject-box{background:var(--red-bg);color:var(--red-ic);border-radius:12px;padding:10px 12px;font-size:12.5px;line-height:1.55;display:flex;gap:6px;align-items:flex-start;}
.reject-box .ic{width:15px;height:15px;flex-shrink:0;margin-top:1px;}
.btn-warn{background:var(--amber-bg);color:var(--amber-ic);}
.btn-warn:hover{filter:brightness(.97);}

/* ---------- Dashboard ---------- */
.pipe-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px;}
.pipe-card{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:6px;}
.pipe-num{font-size:30px;font-weight:800;line-height:1;color:var(--ink);}
.pipe-label{margin-top:2px;}
.pipe-sub{font-size:11px;color:var(--muted);font-weight:600;}
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
.dash-h{margin:0 0 12px;font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px;}
.dash-count{background:var(--blue-bg);color:var(--blue-ic);font-size:12px;font-weight:800;padding:2px 9px;border-radius:20px;}
.dash-empty{color:var(--muted);font-size:13px;padding:14px 4px;display:flex;align-items:center;gap:8px;}
.dash-empty .ic{width:16px;height:16px;color:var(--green-ic);}
.review-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--border);}
.review-item:last-child{border-bottom:none;}
.ri-main{min-width:0;}
.ri-type{font-size:10.5px;font-weight:800;color:var(--muted);background:var(--panel-soft);padding:2px 8px;border-radius:20px;}
.ri-title{font-size:13.5px;font-weight:700;color:var(--ink);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px;}
.ri-actions{display:flex;gap:6px;flex-shrink:0;}
.btn-mini.ok{color:var(--green-ic);border-color:var(--green-ic);}
.af-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);}
.af-item:last-child{border-bottom:none;}
.af-dot{width:9px;height:9px;border-radius:50%;margin-top:5px;flex-shrink:0;background:var(--muted-2);}
.af-status{background:var(--blue-ic);}
.af-create{background:var(--green-ic);}
.af-update{background:var(--amber-ic);}
.af-delete{background:var(--red-ic);}
.af-body{flex:1;min-width:0;}
.af-line{font-size:12.5px;color:var(--ink);}
.af-type{color:var(--muted);font-weight:600;}
.af-title{font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.af-reason{font-size:11.5px;color:var(--red-ic);margin-top:2px;}
.af-when{font-size:11px;color:var(--muted-2);white-space:nowrap;flex-shrink:0;}
.dash-h .btn-mini{font-size:11.5px;padding:6px 10px;}
.link-sum{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--red-ic);margin-bottom:10px;}
.link-sum .ic{width:16px;height:16px;flex-shrink:0;}
.link-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border);font-size:12.5px;flex-wrap:wrap;}
.link-row:last-child{border-bottom:none;}
.link-src{color:var(--ink);font-weight:700;text-decoration:none;}
.link-src:hover{text-decoration:underline;}
.link-arrow{color:var(--muted-2);}
.link-bad{color:var(--red-ic);font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--red-bg);padding:2px 8px;border-radius:8px;}
@media (max-width:900px){.dash-grid{grid-template-columns:1fr;}.pipe-row{grid-template-columns:repeat(2,1fr);}}

/* ---------- Technical SEO ---------- */
.tech-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
.tech-card .dash-h .ic{width:17px;height:17px;color:var(--muted);}
.tech-status{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;padding:6px 0;}
.tech-status .ic{width:15px;height:15px;flex-shrink:0;}
.tech-status.ok{color:var(--green-ic);}
.tech-status.warn{color:var(--amber-ic);}
.tech-status.bad{color:var(--red-ic);}
.tech-label{display:block;font-size:12px;font-weight:800;color:var(--ink);margin:10px 0 6px;}
.tech-label .hint{font-weight:500;color:var(--muted);}
.tech-input{width:100%;box-sizing:border-box;border:1px solid var(--border);background:var(--panel-soft);border-radius:12px;padding:10px 12px;font-size:12.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);resize:vertical;}
.tech-input:focus{outline:none;border-color:#c7bdf5;background:#fff;}
.tech-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.tech-actions .btn{padding:9px 14px;}
.tech-note{font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.6;}
.tech-kv{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;padding:6px 0;color:var(--muted);}
.tech-kv b{color:var(--ink);}
.tech-copyrow{display:flex;align-items:center;gap:8px;margin-top:8px;background:var(--panel-soft);border:1px solid var(--border);border-radius:10px;padding:6px 6px 6px 12px;}
.tech-copyrow code{flex:1;min-width:0;font-size:12px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ai-pre{background:var(--ink);color:#e8f7c8;border-radius:12px;padding:14px 16px;font-size:12.5px;line-height:1.7;overflow-x:auto;margin:8px 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}

/* ---------- Login gate ---------- */
body.logged-out .sidebar{display:none;}
body.logged-out .main{margin:0;}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.login-card{background:var(--white);border:1px solid var(--border);border-radius:22px;box-shadow:0 30px 70px rgba(21,20,43,.12);padding:34px 32px;width:100%;max-width:380px;}
.login-brand{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;color:var(--muted);margin-bottom:16px;}
.login-brand .ic{width:16px;height:16px;color:var(--lime-strong,#8bc34a);}
.login-card h1{margin:0 0 4px;font-size:24px;font-weight:800;}
.login-sub{margin:0 0 20px;font-size:13px;color:var(--muted);}
.login-card .field{margin-bottom:14px;}
.login-card .btn{width:100%;}
.login-hint{margin-top:16px;font-size:11.5px;color:var(--muted);text-align:center;}
#lg-err{margin-bottom:12px;}
#lg-err:empty{margin:0;}

/* user chip in sidebar */
.nav-user{display:flex;align-items:center;gap:8px;margin-top:14px;padding:9px 10px;background:var(--panel-soft);border-radius:12px;}
.nu-avatar{width:32px;height:32px;flex-shrink:0;border-radius:9px;background:var(--lime,#c6f24e);color:#15142b;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;}
.nu-avatar.sm{width:30px;height:30px;font-size:13px;border-radius:8px;}
.nu-info{min-width:0;flex:1;}
.nu-name{font-size:13px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nu-role{font-size:11px;color:var(--muted);font-weight:700;}
.nu-btn{width:30px;height:30px;flex-shrink:0;border-radius:9px;background:var(--white);border:1px solid var(--border);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.nu-btn .ic{width:15px;height:15px;}
.nu-btn:hover{background:#eeecf7;color:var(--ink);}
.nu-logout:hover{background:var(--red-bg);color:var(--red-ic);}
@media (max-width:900px){.tech-grid{grid-template-columns:1fr;}}

/* ---------- Users / Roles page ---------- */
.u-table{width:100%;border-collapse:collapse;}
.u-table th{text-align:left;font-size:11.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;padding:0 10px 10px;border-bottom:1px solid var(--border);}
.u-table td{padding:12px 10px;border-bottom:1px solid var(--border);vertical-align:middle;}
.u-table tbody tr:last-child td{border-bottom:none;}
.u-table .ta-right,.ta-right{text-align:right;}
.ucell{display:flex;align-items:center;gap:11px;}
.uname{font-size:13.5px;font-weight:800;color:var(--ink);}
.uuser{font-size:11.5px;color:var(--muted);font-weight:600;}
.you-tag{font-size:10px;font-weight:800;color:var(--muted);background:var(--panel-soft);border:1px solid var(--border);border-radius:6px;padding:1px 6px;vertical-align:middle;}
.role-pill{display:inline-block;font-size:11.5px;font-weight:800;padding:4px 11px;border-radius:999px;border:1px solid transparent;}
.role-admin{background:#efe7ff;color:#6b3fd4;border-color:#dcccff;}
.role-editor{background:#e4f0ff;color:#2b6cd4;border-color:#cfe2ff;}
.role-writer{background:#e7f7ec;color:#1f9d54;border-color:#cdeed8;}
.role-reviewer{background:#fff2df;color:#c9821a;border-color:#ffe4be;}
.role-viewer{background:#eef0f4;color:#6b7280;border-color:#e0e3ea;}
.btn-mini-danger{background:var(--white);color:var(--muted);border:1px solid var(--border);}
.btn-mini-danger:hover:not([disabled]){background:var(--red-bg);color:var(--red-ic);border-color:#f3c7c7;}
.btn-mini-danger[disabled]{opacity:.4;cursor:not-allowed;}
.role-legend{margin-top:18px;}
.role-line{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px dashed var(--border);}
.role-line:last-child{border-bottom:none;}
.role-desc{font-size:12.5px;color:var(--muted);font-weight:600;}
.modal .field{margin-bottom:12px;}
.modal select{padding:10px 12px;border-radius:11px;border:1.5px solid var(--border);background:var(--panel-soft);font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink);}
.modal input[type=password],.modal input[type=text]{padding:10px 12px;border-radius:11px;border:1.5px solid var(--border);background:var(--panel-soft);font-family:inherit;font-size:13.5px;}
.modal input:disabled{opacity:.6;}

/* ---------- LINE notifications card ---------- */
.line-card .dash-h .ic{color:#06c755;}
.line-toggle,.line-ev,.line-radio{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;}
.line-toggle{margin:12px 0 4px;font-weight:800;}
.line-toggle input,.line-ev input,.line-radio input{width:16px;height:16px;accent-color:#06c755;cursor:pointer;flex-shrink:0;}
.line-mode{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
.line-radio span b{font-weight:800;}
.line-events{display:flex;flex-direction:column;gap:9px;margin-top:6px;}
.line-help{margin-top:16px;border-top:1px solid var(--border);padding-top:12px;}
.line-help summary{cursor:pointer;font-size:12.5px;font-weight:800;color:var(--muted);display:flex;align-items:center;gap:7px;list-style:none;}
.line-help summary::-webkit-details-marker{display:none;}
.line-help summary .ic{width:15px;height:15px;}
.line-steps{margin:12px 0 4px;padding-left:20px;font-size:12.5px;line-height:1.7;color:var(--ink);}
.line-steps li{margin-bottom:7px;}
.line-steps ul{margin:5px 0;padding-left:16px;}
.line-steps a{color:#2b6cd4;font-weight:700;}
.line-toggle input:disabled,.line-ev input:disabled,.line-radio input:disabled{opacity:.5;cursor:not-allowed;}
.line-sources{display:flex;flex-wrap:wrap;gap:7px;}
.src-chip{font-size:12.5px;font-weight:700;padding:7px 12px;border-radius:999px;border:1.5px solid var(--border);background:var(--panel-soft);color:var(--ink);cursor:pointer;}
.src-chip:hover{background:#eaf7ee;border-color:#9fdcb2;}
.src-chip.sel{background:#06c755;border-color:#06c755;color:#fff;}

/* ---------- Share preview modal ---------- */
.share-note{font-size:12.5px;color:var(--muted);font-weight:500;line-height:1.6;margin:0 0 14px;}
.share-row{display:flex;gap:8px;align-items:stretch;}
.share-row input{flex:1;padding:10px 12px;border-radius:11px;border:1.5px solid var(--border);background:var(--panel-soft);font-family:inherit;font-size:12.5px;color:var(--ink);}
.share-row .btn-mini{flex-shrink:0;white-space:nowrap;}
.modal-actions .btn-sm{padding:8px 12px;font-size:12px;width:auto;}

/* ---------- Projects ---------- */
.proj-thumb{
  width:52px;height:40px;border-radius:9px;overflow:hidden;flex-shrink:0;
  background:var(--panel-soft);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--muted-2);
}
.proj-thumb img{width:100%;height:100%;object-fit:cover;display:block;}

.img-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;
}
.img-cell{
  position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;
  border:1px solid var(--border);background:var(--panel-soft);
}
.img-cell img{width:100%;height:100%;object-fit:cover;display:block;}
.cover-badge{
  position:absolute;top:6px;left:6px;background:var(--lime);color:var(--ink);
  font-size:10px;font-weight:800;padding:3px 8px;border-radius:20px;
}
.img-cell-actions{position:absolute;top:6px;right:6px;display:flex;gap:4px;}
.img-mini{
  width:24px;height:24px;border-radius:7px;border:none;
  background:rgba(21,20,43,.72);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.img-mini .ic{width:13px;height:13px;}
.img-mini:hover{background:rgba(21,20,43,.9);}
.img-mini.danger:hover{background:var(--red-ic);}
.img-add{
  aspect-ratio:4/3;border:2px dashed var(--border);border-radius:12px;
  background:var(--panel-soft);color:var(--muted);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  font-size:12px;font-weight:700;
}
.img-add .ic{width:20px;height:20px;}
.img-add:hover{border-color:#c7bdf5;color:var(--ink);background:#f1eefb;}

/* รูปผลงาน: การ์ดรูป + ช่อง alt ใต้รูป */
.pimg-item{display:flex;flex-direction:column;gap:6px;}
.pimg-item .img-cell{aspect-ratio:4/3;}
.pimg-alt{width:100%;font-size:12px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--white);}
.pimg-alt:focus{outline:none;border-color:#c7bdf5;}

/* ---------- Cover uploader (สไตล์เดียวกับ img-grid) ---------- */
.cover-grid{grid-template-columns:minmax(180px,240px);max-width:240px;}
.cover-manual{margin-top:10px;}
.linklike{background:none;border:none;padding:0;color:var(--muted);font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:5px;cursor:pointer;}
.linklike .ic{width:13px;height:13px;}
.linklike:hover{color:var(--ink);}
.cover-path{margin-top:8px;width:100%;}
.img-cell.img-broken img{display:none;}
.img-cell.img-broken::after{content:'ไม่พบรูป';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;font-weight:700;}

.other-input{margin-top:8px;}

/* ---------- Editor header (title + copyable slug + top-right save) ---------- */
.editor-head{align-items:flex-start;gap:16px;}
.eh-left{min-width:0;}
.eh-left h1{margin:0;}
.slug-copy{display:inline-flex;align-items:center;gap:8px;margin-top:8px;background:var(--panel-soft);border:1px solid var(--border);border-radius:12px;padding:6px 8px 6px 12px;}
.slug-text{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:700;color:var(--ink);}
.copy-btn{display:inline-flex;align-items:center;gap:5px;background:var(--white);border:1px solid var(--border);border-radius:9px;padding:5px 10px;font-size:12px;font-weight:700;color:var(--ink);}
.copy-btn .ic{width:14px;height:14px;color:var(--muted);}
.copy-btn:hover{background:var(--panel-soft);}
.eh-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.last-saved{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap;}
.save-dd{display:flex;align-items:stretch;}
.save-dd select{
  appearance:none;-webkit-appearance:none;
  background:var(--panel-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239693a9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 8px center;
  border:1px solid var(--border);border-right:none;border-radius:12px 0 0 12px;
  padding:9px 26px 9px 12px;font-size:12.5px;font-weight:700;color:var(--ink);cursor:pointer;
}
.save-dd .btn{width:auto;border-radius:0 12px 12px 0;padding:9px 16px;}
.eh-right .btn{width:auto;padding:9px 14px;}

/* ---------- Accordion sections ---------- */
.acc{
  background:var(--white);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden;
}
.acc > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  padding:16px 20px;user-select:none;
}
.acc > summary::-webkit-details-marker{display:none;}
.acc-title{font-size:15px;font-weight:800;color:var(--ink);}
.acc-sub{font-size:12px;color:var(--muted);font-weight:600;}
.acc-chev{width:18px;height:18px;color:var(--muted);margin-left:auto;transition:transform .2s;}
.acc[open] > summary .acc-chev{transform:rotate(180deg);}
.acc > summary:hover{background:var(--panel-soft);}
.acc-body{padding:4px 20px 20px;display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--border);}

/* install cards */
.install-card{
  border:1px solid var(--border);background:var(--panel-soft);border-radius:12px;
  padding:12px;margin-bottom:10px;display:flex;flex-direction:column;gap:8px;
}
.install-top{display:grid;grid-template-columns:1fr 108px 30px;gap:8px;align-items:center;}
.install-card select,.install-card input{
  border:1px solid var(--border);background:#fff;border-radius:10px;
  padding:8px 10px;font-size:13px;color:var(--ink);outline:none;width:100%;
}
.install-card select:focus,.install-card input:focus{border-color:#c7bdf5;}
.install-card .img-mini{width:30px;height:30px;}
.install-card.row-invalid{border-color:#f0b6b6;background:#fdf2f2;}

/* inline icon strip (เลือกไอคอน - ไม่มี popover ไม่ดันเลย์เอาต์) */
.iconstrip{display:flex;flex-wrap:wrap;gap:5px;}
.iconstrip-opt{
  width:32px;height:32px;border-radius:9px;border:1px solid var(--border);background:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
}
.iconstrip-opt .ic{width:17px;height:17px;color:var(--muted);}
.iconstrip-opt:hover{background:var(--panel-soft);}
.iconstrip-opt.on{border-color:var(--ink);background:var(--ink);}
.iconstrip-opt.on .ic{color:#fff;}

/* number input with unit suffix */
.input-suffix{display:flex;align-items:stretch;}
.input-suffix input{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;}
.input-suffix .suffix{
  display:flex;align-items:center;padding:0 12px;font-size:13px;font-weight:700;color:var(--muted);
  background:var(--panel-soft);border:1px solid var(--border);border-left:none;
  border-top-right-radius:12px;border-bottom-right-radius:12px;
}

/* equipment rows */
.equip-row{display:grid;grid-template-columns:1fr 90px 100px 30px;gap:8px;align-items:center;margin-bottom:8px;}
.equip-row input{
  border:1px solid var(--border);background:var(--panel-soft);border-radius:10px;
  padding:8px 10px;font-size:13px;color:var(--ink);outline:none;width:100%;
}
.equip-row input:focus{border-color:#c7bdf5;background:#fff;}
.equip-row .img-mini{width:30px;height:30px;}
.equip-row.row-invalid input.eq-name{border-color:#e88;background:#fdf2f2;}

/* FAQ rows (คำถาม-คำตอบแยกคู่) */
.faq-row{border:1px solid var(--border);background:var(--panel-soft);border-radius:12px;padding:12px;margin-bottom:10px;display:flex;flex-direction:column;gap:8px;}
.faq-row.row-invalid{border-color:#f0b6b6;background:#fdf2f2;}
.faq-head{display:flex;align-items:center;justify-content:space-between;}
.faq-num{font-size:11px;font-weight:800;color:var(--muted);background:var(--white);border:1px solid var(--border);border-radius:20px;padding:2px 10px;}
.faq-row input,.faq-row textarea{border:1px solid var(--border);background:#fff;border-radius:10px;padding:9px 11px;font-size:13px;color:var(--ink);outline:none;width:100%;font-family:inherit;}
.faq-row textarea{resize:vertical;line-height:1.6;}
.faq-row input:focus,.faq-row textarea:focus{border-color:#c7bdf5;}
.faq-q{font-weight:700;}

/* required-field red error */
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:#e88 !important;background:#fdf2f2;}
.field.invalid .img-grid{outline:1.5px solid #e88;outline-offset:3px;border-radius:12px;}
.field-err{font-size:11.5px;font-weight:700;color:#d64545;margin-top:5px;}

/* ---------- Cover uploader ---------- */
.cover-uploader{display:flex;gap:12px;align-items:flex-start;}
.cover-thumb{
  width:76px;height:76px;flex-shrink:0;border-radius:12px;overflow:hidden;
  background:var(--panel-soft);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
}
.cover-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.cover-thumb .cover-empty{color:var(--muted-2);}
.cover-thumb .cover-empty .ic{width:24px;height:24px;}
.cover-controls{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;}
.cover-btns{display:flex;gap:8px;flex-wrap:wrap;}
.btn-mini{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--ink);color:#fff;border:none;border-radius:10px;
  padding:8px 12px;font-size:12px;font-weight:700;
}
.btn-mini .ic{width:14px;height:14px;}
.btn-mini:hover{background:#252345;}
.btn-mini.ghost{background:var(--panel-soft);color:var(--ink);border:1px solid var(--border);}
.btn-mini.ghost:hover{background:#eeecf7;}
.btn-mini.loading{opacity:.6;pointer-events:none;}

@media (max-width:1000px){
  .editor-grid{grid-template-columns:1fr;}
  .seo-panel{position:static;}
  .field-row{grid-template-columns:1fr;}
  .stat-cards{grid-template-columns:1fr;}
}