/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Noto+Sans+Thai:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Sarabun:wght@400;500;600;700&family=Prompt:wght@400;500;600;700&display=swap');

  :root{
    --bg:#F2FBF6;
    --surface:#FFFFFF;
    --surface-2:#EAFBF1;
    --surface-3:#D8F6E4;
    --border:#CDEEDC;
    --green:#00C268;
    --green-deep:#00A85C;
    --green-bright:#17E589;
    --teal:#0FB89E;
    --teal-deep:#0A8F7B;
    --text:#0C2B20;
    --muted:#5C8775;
    --muted-2:#8FB3A2;
    --danger:#E0455A;
    --warning:#E0961A;
    --radius:14px;
    --code-bg:#0C2B20;
    --shadow:0 1px 3px rgba(12,43,32,0.06);
    --topbar-bg:rgba(255,255,255,0.85);
  }
  html[data-theme="dark"]{
    --bg:#0A1614;
    --surface:#0F211D;
    --surface-2:#152D27;
    --surface-3:#1B3830;
    --border:#22443B;
    --green:#00E68A;
    --green-deep:#00B36B;
    --green-bright:#17E589;
    --teal:#1AA38A;
    --teal-deep:#0E6E5E;
    --text:#EAF6F1;
    --muted:#7FA396;
    --muted-2:#557066;
    --danger:#FF7A7A;
    --warning:#FFC857;
    --code-bg:#06120F;
    --shadow:none;
    --topbar-bg:rgba(10,22,20,0.85);
  }
  html, body{transition:background-color .25s ease;}
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    background:
      radial-gradient(ellipse 900px 500px at 90% -10%, rgba(23,229,137,0.18), transparent),
      radial-gradient(ellipse 700px 500px at -10% 110%, rgba(15,184,158,0.14), transparent),
      var(--bg);
    color:var(--text);
    font-family:'Noto Sans Thai','Poppins',sans-serif;
    min-height:100vh;
    display:flex;
    transition:background-color .25s ease, color .25s ease;
  }
  .admin-shell{
    display:flex;
    flex:1;
    min-width:0;
    width:100%;
    min-height:100vh;
  }
  .sidebar-backdrop{
    display:none;
  }
  .mono{font-family:'IBM Plex Mono',monospace;}
  .disp{font-family:'Poppins','Noto Sans Thai',sans-serif;}

  /* ===== Sidebar ===== */
  .sidebar{
    width:264px; flex-shrink:0;
    background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
    border-right:1px solid var(--border);
    display:flex; flex-direction:column;
    height:100vh; position:sticky; top:0;
    z-index:300;
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    padding:22px 20px; border-bottom:1px solid var(--border);
  }
  .brand-mark{
    width:36px; height:36px; border-radius:10px;
    background:linear-gradient(135deg, var(--green), var(--teal-deep));
    display:flex; align-items:center; justify-content:center;
    font-family:'Poppins'; font-weight:800; color:#FFFFFF; font-size:16px;
  }
  .brand-text{display:flex; flex-direction:column; line-height:1.15;}
  .brand-text b{font-family:'Poppins'; font-weight:700; font-size:14.5px; color:var(--text);}
  .brand-text span{font-size:10.5px; color:var(--muted); letter-spacing:.04em;}

  nav{padding:16px 12px; flex:1; overflow-y:auto;}
  .nav-label{font-size:10.5px; color:var(--muted-2); text-transform:uppercase; letter-spacing:.09em; padding:14px 12px 6px;}
  .nav-item{
    display:flex; align-items:center; gap:12px;
    padding:10px 12px; border-radius:10px; margin-bottom:2px;
    color:var(--muted); font-size:13.5px; font-weight:500;
    cursor:pointer; border:1px solid transparent; transition:.15s;
    user-select:none;
  }
  .nav-item:hover{background:var(--surface-2); color:var(--text);}
  .nav-item.active{
    background:linear-gradient(135deg, rgba(0,230,138,0.16), rgba(26,163,138,0.10));
    border-color:rgba(0,230,138,0.30); color:var(--green); font-weight:600;
  }
  .nav-item svg{width:17px; height:17px; flex-shrink:0;}
  .nav-badge{
    margin-left:auto; font-size:10px; background:var(--surface-3); color:var(--muted);
    padding:1px 7px; border-radius:20px; font-family:'IBM Plex Mono';
  }
  .nav-item.active .nav-badge{background:rgba(0,230,138,0.2); color:var(--green);}

  .side-footer{
    padding:14px 18px; border-top:1px solid var(--border);
    display:flex; flex-direction:column; gap:10px;
  }
  .side-footer .side-footer-row{display:flex; align-items:center; gap:10px;}
  .side-logout-btn{
    width:100%; padding:8px 10px; border-radius:8px; border:1px solid var(--border);
    background:var(--surface-2); color:var(--danger); font-size:12px; font-weight:600;
    cursor:pointer; font-family:'Noto Sans Thai',sans-serif;
  }
  .side-logout-btn:hover{background:rgba(224,69,90,0.08);}
  .avatar{width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#1AA38A,#0E6E5E); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;}
  .side-footer .who{line-height:1.2;}
  .side-footer .who b{font-size:12.5px; display:block;}
  .side-footer .who span{font-size:10.5px; color:var(--muted);}

  /* ===== Main ===== */
  main{flex:1; min-width:0; display:flex; flex-direction:column;}
  header.topbar{
    height:66px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 28px; position:sticky; top:0; background:var(--topbar-bg); backdrop-filter:blur(8px);
    z-index:200; overflow:visible; gap:12px;
  }
  .topbar-left{display:flex; align-items:center; gap:12px; min-width:0;}
  .nav-toggle{display:none; flex-shrink:0;}
  .topbar h1{font-family:'Poppins'; font-size:17px; font-weight:700;}
  .topbar .sub{font-size:12px; color:var(--muted); margin-top:1px;}
  .search{
    display:flex; align-items:center; gap:8px;
    background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
    padding:8px 12px; width:300px; color:var(--muted-2); font-size:12.5px;
    flex-shrink:1; min-width:0;
  }
  .search input{
    background:transparent; border:none; outline:none; color:var(--text);
    font-family:'Noto Sans Thai',sans-serif; font-size:12.5px; width:100%;
  }
  .topbar-right{display:flex; align-items:center; gap:14px; position:relative; z-index:210;}
  .topbar-menu-wrap{position:relative; display:flex; align-items:center; z-index:500;}
  .topbar-avatar-wrap{z-index:600;}
  .topbar-avatar-dropdown{
    display:block !important; top:calc(100% + 8px); right:0; z-index:9999;
  }
  .topbar-avatar-btn{
    width:34px; height:34px; font-size:11px; cursor:pointer; border:none; padding:0;
    color:#fff !important; flex-shrink:0;
  }
  .icon-btn{width:36px; height:36px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--muted); cursor:pointer;}
  .icon-btn svg{width:16px; height:16px;}

  .content{padding:28px 32px 60px; max-width:1280px;}
  .section{display:none;}
  .section.active{display:block; animation:fade .25s ease;}
  @keyframes fade{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}

  .page-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:12px;}
  .page-head h2{font-family:'Poppins'; font-size:22px; font-weight:700;}
  .page-head p{font-size:13px; color:var(--muted); margin-top:4px;}
  .btn{
    font-family:'Noto Sans Thai'; font-weight:600; font-size:13px;
    padding:10px 18px; border-radius:10px; cursor:pointer; border:1px solid transparent;
    display:inline-flex; align-items:center; gap:7px;
  }
  .btn-primary{background:linear-gradient(135deg, var(--green), var(--teal-deep)); color:#FFFFFF;}
  .btn-ghost{background:var(--surface-2); border-color:var(--border); color:var(--text);}
  .btn-ghost:hover{border-color:var(--green);}
  .btn svg{width:14px; height:14px;}

  /* Stat cards */
  .stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px;}
  .stat-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:18px 18px 16px; position:relative; overflow:hidden;
  }
  .stat-card::after{content:""; position:absolute; right:-30px; top:-30px; width:90px; height:90px; border-radius:50%;
    background:radial-gradient(circle, rgba(0,230,138,0.16), transparent 70%);}
  .stat-card .lbl{font-size:11.5px; color:var(--muted); margin-bottom:8px;}
  .stat-card .val{font-family:'Poppins'; font-size:26px; font-weight:700;}
  .stat-card .delta{font-size:11px; margin-top:6px; color:var(--green);}

  /* Ticket-style cards (signature element) */
  .ticket-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
  .ticket-grid > *{min-width:0;}
  .ticket{
    border-radius:16px; overflow:hidden; border:1px solid var(--border);
    background:var(--surface); display:flex; flex-direction:column; min-width:0;
  }
  .ticket-top{
    padding:18px 18px 16px; background:linear-gradient(160deg, var(--surface-3), var(--surface-2));
    border-bottom:1px dashed var(--border); position:relative; min-width:0; overflow:hidden;
  }
  .ticket-top .badge-row{display:flex; justify-content:space-between; align-items:flex-start;}
  .ticket-icon{width:38px; height:38px; border-radius:50%; background:#0a1a16; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:16px;}
  .status-pill{font-size:10px; font-weight:700; padding:4px 10px; border-radius:20px; letter-spacing:.02em;}
  .status-approved{background:rgba(0,230,138,0.16); color:var(--green); border:1px solid rgba(0,230,138,0.3);}
  .status-draft{background:rgba(255,200,87,0.14); color:var(--warning); border:1px solid rgba(255,200,87,0.3);}
  .ticket-title{
    font-family:'Poppins'; font-size:16.5px; margin-top:12px; font-weight:700;
    display:flex; align-items:center; gap:8px; min-width:0; max-width:100%;
  }
  .ticket-title-text{
    flex:1 1 auto; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .ticket-desc{
    font-size:12px; color:var(--muted); margin-top:4px; line-height:1.5;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
    overflow:hidden; text-overflow:ellipsis; word-break:break-word;
  }
  .ticket-meta{display:flex; gap:18px; padding:14px 18px;}
  .ticket-meta div{flex:1; min-width:0;}
  .ticket-meta .l{font-size:10.5px; color:var(--muted-2);}
  .ticket-meta .v{font-family:'IBM Plex Mono'; font-size:13px; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .ticket-actions{display:flex; gap:8px; padding:0 18px 18px; margin-top:auto;}
  .ticket-actions button{flex:1; padding:8px 0; border-radius:9px; font-size:12px; font-weight:600; border:1px solid var(--border); background:var(--surface-2); color:var(--text); cursor:pointer;}
  .ticket-actions button.primary{background:linear-gradient(135deg, var(--green), var(--teal-deep)); color:#FFFFFF; border:none;}
  .ticket-type-tag{flex-shrink:0; font-size:10px; padding:2px 8px; border-radius:7px; background:rgba(15,184,158,0.14); color:var(--teal);}

  /* Tables */
  .panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;}
  table{width:100%; border-collapse:collapse;}
  th{
    text-align:left; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em;
    padding:14px 18px; border-bottom:1px solid var(--border); background:var(--surface-2); vertical-align:middle;
  }
  td{padding:14px 18px; font-size:13px; line-height:1.45; vertical-align:top; border-bottom:none;}
  tbody tr{border-bottom:1px solid var(--border);}
  tbody tr:last-child{border-bottom:none;}
  tr:hover td{background:rgba(0,230,138,0.03);}
  td.row-actions{display:table-cell; vertical-align:top; white-space:nowrap;}
  .tag{font-size:10.5px; padding:3px 9px; border-radius:7px; background:var(--surface-3); color:var(--muted); display:inline-block;}
  .tag.on{background:rgba(0,230,138,0.14); color:var(--green);}
  .row-actions{display:inline-flex; gap:8px; flex-wrap:wrap; align-items:flex-start;}
  .row-actions span{font-size:12px; color:var(--muted); cursor:pointer; padding:4px 8px; border-radius:6px; display:inline-block;}
  .row-actions span:hover{color:var(--green); background:rgba(0,230,138,0.08);}
  .perm-locked{font-size:11.5px; color:var(--muted); cursor:default; padding:4px 6px;}
  .perm-locked:hover{color:var(--muted); background:transparent;}
  .site-cell{display:flex; align-items:center; gap:10px;}
  .site-dot{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green);}

  /* Tabs within section */
  .subtabs{display:flex; gap:6px; margin-bottom:18px; border-bottom:1px solid var(--border);}
  .subtab{padding:9px 4px; margin-right:18px; font-size:13px; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; font-weight:500;}
  .subtab.active{color:var(--green); border-color:var(--green); font-weight:600;}

  /* Two-column flow (generate link) */
  .flow-wrap{display:grid; grid-template-columns:1.3fr 1fr; gap:22px; align-items:start;}
  .step-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px; margin-bottom:14px;}
  .step-head{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
  .step-num{width:24px; height:24px; border-radius:50%; background:var(--surface-3); color:var(--green); font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono';}
  .step-head h4{font-size:14px; font-weight:600;}
  .choice-row{display:flex; gap:10px; flex-wrap:wrap;}
  .choice-pill{
    border:1px solid var(--border); background:var(--surface-2); border-radius:10px; padding:9px 16px;
    font-size:12.5px; cursor:pointer; color:var(--muted); display:flex; align-items:center; gap:7px;
  }
  .choice-pill.sel{border-color:var(--green); color:var(--green); background:rgba(0,230,138,0.08);}
  .tpl-pick-grid{display:flex; flex-wrap:wrap; gap:8px;}
  .tpl-pick{
    border:1px solid var(--border); background:var(--surface-2); border-radius:10px;
    padding:9px 12px; font-size:12.5px; cursor:pointer; color:var(--muted);
    display:inline-flex; align-items:center; gap:8px; max-width:100%;
    font-family:inherit; text-align:left;
  }
  .tpl-pick:hover{border-color:rgba(0,230,138,0.45);}
  .tpl-pick.sel{border-color:var(--green); color:var(--green); background:rgba(0,230,138,0.1); font-weight:600;}
  .tpl-pick-check{
    width:16px; height:16px; border-radius:50%; border:1px solid var(--border);
    display:inline-flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0;
    background:var(--surface);
  }
  .tpl-pick.sel .tpl-pick-check{border-color:var(--green); background:rgba(0,230,138,0.2); color:var(--green);}
  .tpl-pick-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:240px;}
  .tpl-current-hint{
    margin-top:12px; font-size:12.5px; color:var(--muted); padding:8px 10px;
    background:var(--surface-2); border-radius:8px; border:1px solid var(--border);
  }
  .tpl-current-hint b{color:var(--text);}
  .gen-result-list{display:flex; flex-direction:column; gap:14px;}
  .gen-result-item{
    border:1px solid var(--border); border-radius:12px; padding:14px 14px 12px;
    background:var(--surface); box-shadow:0 1px 0 rgba(0,0,0,0.03);
  }
  .gen-result-meta{
    display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px;
  }
  .gen-result-domain{font-size:14px; font-weight:700; color:var(--text);}
  .gen-result-sub{font-size:11.5px; color:var(--muted); margin-top:3px;}
  .gen-result-badge{
    flex-shrink:0; font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:999px;
    background:rgba(0,230,138,0.12); color:var(--green); border:1px solid rgba(0,230,138,0.28);
  }
  .gen-result-code{margin-bottom:10px;}
  .gen-result-actions{display:flex; flex-wrap:wrap; gap:8px;}
  .gen-pdf-list{display:flex; flex-direction:column; gap:0;}
  .gen-pdf-item{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:16px 4px; border-bottom:1px solid var(--border);
  }
  .gen-pdf-info{min-width:0; flex:1;}
  .gen-pdf-domain{font-size:14px; font-weight:700; color:var(--text); margin-bottom:5px;}
  .gen-pdf-file{
    font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--muted);
    word-break:break-all; line-height:1.45;
  }
  .gen-pdf-dl{padding:8px 16px; font-size:12.5px; flex-shrink:0; min-width:96px; justify-content:center;}
  .gen-pdf-footer{
    margin-top:18px; padding-top:14px; border-top:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  }
  .gen-pdf-total{font-size:13px; color:var(--muted); font-weight:600;}
  .gen-pdf-zip{padding:10px 18px; font-size:13px; justify-content:center; min-width:220px;}
  .wcheck-site{align-items:flex-start;}
  .wcheck-site-text{display:flex; flex-direction:column; gap:2px; line-height:1.35;}
  .wcheck-site-domain{font-size:13px; font-weight:600; color:var(--text);}
  .wcheck-site-type{font-size:11px; color:var(--muted);}
  .wcheck.disabled{opacity:0.72; cursor:default;}
  .user-sites-hint{font-size:12px; color:var(--muted); margin:0 0 10px;}
  .user-sites-hint.admin-all{color:#c62828; font-weight:600;}
  .user-form .field input:not([type="checkbox"]),
  .user-form .field select{width:100%;}
  .user-sites-label{display:block; font-size:12.5px; color:var(--text); font-weight:600; margin-bottom:10px;}
  .user-sites-label-note{color:#c62828; font-weight:600;}
  .user-sites-label-hint{color:var(--muted); font-weight:500;}
  .user-sites-pick{display:flex; flex-direction:column; gap:8px; max-height:220px; overflow-y:auto;}
  .user-form .field-row-2{
    display:grid; grid-template-columns:1fr 1fr; gap:12px;
  }
  .user-sites-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:12px;
    max-height:280px; overflow-y:auto; padding:2px;
  }
  .user-site-card{
    display:flex !important; flex-direction:row !important; align-items:flex-start; gap:10px;
    padding:12px 14px; border:1px solid rgba(0,168,92,0.22);
    border-radius:12px; background:#EAF8F1; cursor:pointer; min-width:0;
    transition:border-color .15s, background .15s;
  }
  .user-site-card:hover{border-color:rgba(0,168,92,0.5); background:#E2F6EB;}
  .user-site-card.selected{
    border-color:rgba(0,168,92,0.45); background:#EAF8F1;
  }
  .user-site-card.disabled{cursor:default;}
  .user-form .user-site-card input[type="checkbox"]{
    width:16px !important; height:16px !important; min-width:16px;
    margin:3px 0 0; padding:0; flex:0 0 16px;
    accent-color:var(--green); cursor:pointer;
    background:transparent; border:none; border-radius:0;
    appearance:auto; -webkit-appearance:checkbox;
  }
  .user-site-card.disabled input[type="checkbox"]{cursor:default;}
  .user-site-card-text{
    display:flex; flex-direction:column; gap:3px; min-width:0; line-height:1.35; flex:1;
  }
  .user-site-card-domain{
    font-size:13.5px; font-weight:700; color:#0C6B45;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .user-site-card-type{font-size:11.5px; color:#6b7280; font-weight:500;}
  .user-form .field input:not([type="checkbox"]),
  .user-form .field select{
    width:100%;
    background:#EAF8F1;
    border:1px solid rgba(15,184,158,0.22);
    border-radius:12px;
  }
  .user-form .field input:not([type="checkbox"]):focus,
  .user-form .field select:focus{border-color:var(--green); background:#E3F6EC;}
  @media (max-width:560px){
    .user-sites-grid,
    .user-form .field-row-2{grid-template-columns:1fr;}
  }
  .user-sites-list{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px;}
  .user-sites-list li{font-size:12.5px; color:var(--text); line-height:1.4;}
  .user-sites-all{font-size:12.5px; font-weight:600; color:var(--green);}
  .user-status{
    display:inline-flex; align-items:center; gap:7px;
    font-size:12.5px; font-weight:600; color:var(--muted-2);
  }
  .user-status.on{color:var(--green);}
  .user-status-dot{
    width:8px; height:8px; border-radius:50%; background:var(--muted-2); display:inline-block;
  }
  .user-status.on .user-status-dot{background:var(--green); box-shadow:0 0 0 3px rgba(0,230,138,0.18);}
  .user-status:not(.on) .user-status-dot{background:transparent; border:1.5px solid var(--muted-2);}
  .users-table th, .users-table td{vertical-align:top;}
  .website-pick{display:flex; flex-direction:column; gap:8px; margin-top:4px;}
  .wcheck{display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--border); border-radius:9px; background:var(--surface-2); font-size:13px;}
  .wcheck input{accent-color:var(--green); width:15px; height:15px; margin-top:2px;}
  .result-panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px; position:sticky; top:90px;}
  .result-panel h4{font-size:14px; margin-bottom:14px; font-weight:600;}
  .code-box{background:var(--code-bg); border:1px solid var(--border); border-radius:10px; padding:14px; font-family:'IBM Plex Mono'; font-size:11.5px; color:var(--green); word-break:break-all; line-height:1.6; margin-bottom:10px;}
  .preview-frame{border:1px dashed var(--border); border-radius:10px; padding:30px 16px; text-align:center; color:var(--muted-2); font-size:12px; margin-top:14px;}

  /* Permission matrix */
  .perm-grid th, .perm-grid td{text-align:center;}
  .perm-grid td:first-child, .perm-grid th:first-child{text-align:left;}
  .perm-check{accent-color:var(--green); width:16px; height:16px; cursor:pointer;}
  .role-chip{font-size:10.5px; padding:3px 10px; border-radius:20px; background:var(--surface-3); color:var(--muted);}
  .role-chip.admin{background:rgba(0,230,138,0.15); color:var(--green);}
  .role-chip.editor{background:rgba(26,163,138,0.18); color:var(--teal);}
  .role-chip.viewer{background:rgba(255,200,87,0.13); color:var(--warning);}
  .dot-check{width:16px; height:16px; border-radius:5px; display:inline-flex; align-items:center; justify-content:center; font-size:10px;}
  .dot-check.yes{background:rgba(0,230,138,0.18); color:var(--green);}
  .dot-check.no{background:var(--surface-3); color:var(--muted-2);}

  /* note banner */
  .note{
    display:flex; gap:12px; background:var(--surface-2); border:1px solid var(--border); border-left:3px solid var(--green);
    border-radius:10px; padding:13px 16px; font-size:12.5px; color:var(--muted); margin-bottom:20px; line-height:1.6;
  }
  .note b{color:var(--text);}

  .upload-zone{
    border:1.5px dashed var(--border); border-radius:14px; padding:40px 20px; text-align:center;
    background:var(--surface); color:var(--muted);
  }
  .upload-zone .ic{width:46px; height:46px; border-radius:50%; background:var(--surface-3); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; color:var(--green); font-size:20px;}

  ::-webkit-scrollbar{width:9px; height:9px;}
  ::-webkit-scrollbar-thumb{background:var(--surface-3); border-radius:10px;}

  /* ===== Toast ===== */
  #toast-wrap{position:fixed; bottom:24px; right:24px; display:flex; flex-direction:column; gap:10px; z-index:6000;}
  .toast{
    background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--green);
    border-radius:10px; padding:12px 16px; font-size:13px; color:var(--text); box-shadow:0 6px 20px rgba(0,0,0,0.12);
    min-width:240px; max-width:340px; display:flex; align-items:center; gap:10px;
    animation:toast-in .2s ease;
  }
  .toast.err{border-left-color:var(--danger);}
  @keyframes toast-in{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}

  /* ===== Modal ===== */
  #modal-overlay{
    position:fixed; inset:0; background:rgba(10,22,20,0.45); backdrop-filter:blur(2px);
    display:none; align-items:center; justify-content:center; z-index:5000;
    padding:24px; overflow-y:auto;
  }
  #modal-overlay.show{display:flex;}
  .modal-box{
    background:var(--surface); border:1px solid var(--border); border-radius:16px;
    width:420px; max-width:90vw; max-height:min(85vh, calc(100vh - 48px)); overflow-y:auto;
    padding:24px; animation:toast-in .2s ease; position:relative; z-index:5001;
  }
  .modal-box h3{font-family:'Poppins'; font-size:16.5px; font-weight:700; margin-bottom:16px;}
  .field{margin-bottom:14px;}
  .field label{display:block; font-size:12px; color:var(--muted); margin-bottom:6px;}
  .field label.user-site-card{
    display:flex !important; flex-direction:row !important; align-items:flex-start;
    gap:10px; color:inherit; font-size:inherit; margin-bottom:0;
  }
  .field input:not([type="checkbox"]), .field select, .field textarea{
    width:100%; padding:10px 12px; border-radius:9px; border:1px solid var(--border);
    background:var(--surface-2); color:var(--text); font-family:'Noto Sans Thai'; font-size:13px; outline:none;
  }
  .field input:not([type="checkbox"]):focus, .field select:focus, .field textarea:focus{border-color:var(--green);}
  .modal-actions{display:flex; gap:10px; margin-top:20px;}
  .modal-actions .btn{flex:1; justify-content:center;}
  .modal-box.wide{width:640px;}
  .modal-box.xwide{width:min(1100px, 96vw);}
  /* TC_AD-077-01: Preview PDF เต็มจอเกือบทั้งหน้าจอ */
  .modal-box.full{
    width:min(1280px, 98vw);
    max-width:98vw;
    height:min(94vh, calc(100vh - 24px));
    max-height:min(94vh, calc(100vh - 24px));
    padding:16px 18px 14px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .modal-box.full > form,
  .modal-box.full > .pdf-view-shell{
    flex:1;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .pdf-preview-frame{
    width:100%;
    flex:1;
    min-height:0;
    border:none;
    background:#525659;
  }
  .status-custom{background:rgba(15,184,158,0.16); color:var(--teal); border:1px solid rgba(15,184,158,0.35);}
  .tpl-section{border:1px solid var(--border); border-radius:11px; padding:14px; margin-bottom:12px; background:var(--surface-2);}
  .var-cell{cursor:pointer; padding:4px 8px; border-radius:6px; display:inline-block; font-size:12.5px;}
  .var-cell:hover{background:rgba(0,230,138,0.10); color:var(--green);}

  .audit-filter-panel{margin-bottom:16px; padding:16px 18px;}
  .audit-filter-title{
    font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:12px;
  }
  .audit-filters{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
    gap:12px 14px;
    align-items:end;
  }
  .audit-filter-field{margin-bottom:0;}
  .audit-filter-actions{display:flex; align-items:end; padding-bottom:2px;}
  .audit-result-meta{
    font-size:12.5px; color:var(--muted); margin-bottom:12px; font-weight:600;
  }
  .audit-pagination{
    display:flex; align-items:center; justify-content:center; gap:14px;
    margin-top:16px; padding-top:14px; border-top:1px solid var(--border);
  }
  .audit-page-label{font-size:12.5px; color:var(--muted); font-weight:600; min-width:90px; text-align:center;}
  .audit-pagination .btn{padding:7px 14px; font-size:12.5px;}

  /* ===== Dropdown panel (avatar menu) ===== */
  .dropdown-panel{
    position:absolute; top:calc(100% + 8px); right:0; background:var(--surface); border:1px solid var(--border);
    border-radius:12px; box-shadow:0 10px 28px rgba(0,0,0,0.14); width:260px; z-index:300;
    overflow:hidden;
  }
  .dropdown-panel .dd-head{padding:12px 14px; font-size:12.5px; font-weight:600; border-bottom:1px solid var(--border); color:var(--text);}
  .dropdown-panel .dd-item{
    display:block; width:100%; text-align:left;
    padding:11px 14px; font-size:12.5px; color:var(--muted); cursor:pointer;
    border-bottom:1px solid var(--border); background:transparent; border-left:none; border-right:none; border-top:none;
    font-family:'Noto Sans Thai',sans-serif;
  }
  .dropdown-panel .dd-item:last-child{border-bottom:none;}
  .dropdown-panel .dd-item:hover{background:var(--surface-2); color:var(--text);}
  .dropdown-panel .dd-item.dd-item-danger{color:var(--danger);}
  .dropdown-panel .dd-item.dd-item-danger:hover{background:rgba(224,69,90,0.08); color:var(--danger);}
  .dropdown-panel .dd-item b{color:var(--text); display:block; font-size:12.5px; margin-bottom:2px;}

  /* ===== Template Editor specific ===== */
  .editor-layout{display:flex; flex-direction:column; gap:14px; min-width:0;}
  .section-block{border:1px solid var(--border); border-radius:11px; padding:0; background:var(--surface-2); margin-bottom:12px; position:relative; min-width:0; max-width:100%;}
  .section-block .sec-head{display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-bottom:1px solid var(--border); background:var(--surface-3);}
  .section-block .sec-head input{font-weight:600; font-size:13px; color:#111; background:transparent; border:none; border-bottom:1px dashed var(--border); padding:2px 0; width:70%;}
  .section-block textarea{min-height:90px; resize:vertical; font-size:12.5px; line-height:1.7;}
  .sec-actions span{font-size:11px; color:var(--muted); cursor:pointer; margin-left:8px;}
  .sec-actions span:hover{color:var(--danger);}
  .var-side{border:1px solid var(--border); border-radius:11px; background:var(--surface-2); padding:12px; max-height:420px; overflow-y:auto;}
  .var-side h5{font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px;}
  .var-pill{display:flex; justify-content:space-between; align-items:center; padding:7px 9px; border-radius:8px; background:var(--surface); border:1px solid var(--border); margin-bottom:6px; cursor:pointer; font-size:11.5px;}
  .var-pill:hover{border-color:var(--green); color:var(--green);}
  .var-pill .vname{font-family:'IBM Plex Mono'; font-weight:600;}
  .editmode-banner{display:flex; align-items:center; gap:8px; background:rgba(255,200,87,0.13); border:1px solid rgba(255,200,87,0.35); color:var(--warning); border-radius:9px; padding:9px 12px; font-size:12px; margin-bottom:12px;}
  .pdf-tpl-box{border:1.5px dashed var(--border); border-radius:11px; padding:22px; text-align:center; color:var(--muted); background:var(--surface);}
  .site-pick-list{display:flex; flex-direction:column; gap:8px; max-height:260px; overflow-y:auto;}

  /* ===== Variable bar (top, grid of chips like screenshot) + WYSIWYG preview ===== */
  .var-bar-wrap{border:1px solid var(--border); border-radius:11px; background:var(--surface-2); padding:12px 14px; margin-bottom:14px;}
  .var-bar-wrap h5{font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px;}
  .var-bar-grid{display:flex; flex-wrap:wrap; gap:8px; max-height:160px; overflow-y:auto;}
  .var-chip{
    display:flex; align-items:baseline; gap:6px; padding:6px 10px; border-radius:8px;
    background:var(--surface); border:1px solid var(--border); cursor:pointer; font-size:11px; white-space:nowrap;
  }
  .var-chip:hover{border-color:var(--green); background:rgba(0,230,138,0.06);}
  .var-chip .vname{font-family:'IBM Plex Mono'; font-weight:700; color:var(--green);}
  .var-chip .vex{color:var(--muted-2); max-width:160px; overflow:hidden; text-overflow:ellipsis;}
  .editor-toolbar{
    display:flex; align-items:center; gap:4px; flex-wrap:wrap; overflow-x:visible; padding:8px 10px;
    border:1px solid var(--border); border-bottom:none; border-radius:11px 11px 0 0; background:var(--surface-2);
  }
  .editor-toolbar > *{flex-shrink:0;}
  .editor-toolbar button{
    width:30px; height:30px; border-radius:7px; border:1px solid transparent; background:transparent;
    color:var(--text); cursor:pointer; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center;
  }
  .editor-toolbar button:hover{background:var(--surface-3); border-color:var(--border);}
  .editor-toolbar .sep{width:1px; height:20px; background:var(--border); margin:0 4px;}
  .editor-toolbar select.tb-select{
    height:30px; border-radius:7px; border:1px solid var(--border); background:var(--surface);
    color:var(--text); font-family:'Noto Sans Thai'; font-size:11.5px; padding:0 6px; cursor:pointer; max-width:108px;
  }
  .tb-color-wrap{position:relative; display:inline-flex;}
  .tb-color-btn{width:30px; height:30px; border-radius:7px; border:1px solid transparent; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center;}
  .tb-color-btn:hover{background:var(--surface-3); border-color:var(--border);}
  .tb-color-a{font-weight:700; font-size:13px; color:var(--text);}
  .tb-color-input{position:absolute; bottom:-2px; left:4px; width:22px; height:6px; opacity:0; cursor:pointer; padding:0; border:none;}
  .tb-swatch-row{display:inline-flex; align-items:center; gap:4px; padding:0 4px;}
  .tb-swatch{width:16px; height:16px; border-radius:50%; border:1px solid var(--border); cursor:pointer; display:inline-block;}
  .tb-swatch:hover{transform:scale(1.15); box-shadow:0 0 0 2px var(--surface-3);}
  .tb-table-wrap{position:relative; display:inline-flex;}
  .tb-table-popover{
    position:absolute; top:calc(100% + 6px); left:0; z-index:30;
    min-width:190px; padding:10px 12px; border-radius:10px;
    border:1px solid var(--border); background:var(--surface);
    box-shadow:0 8px 24px rgba(0,0,0,0.12);
  }
  .tb-table-popover-title{font-size:11.5px; font-weight:700; color:var(--text); margin-bottom:8px;}
  .tb-table-field{display:flex; flex-direction:column; gap:4px; margin-bottom:8px; font-size:11px; color:var(--muted);}
  .tb-table-field input{
    height:28px; border-radius:7px; border:1px solid var(--border);
    background:var(--surface-2); color:var(--text); padding:0 8px; font-family:'Noto Sans Thai'; font-size:12px;
  }
  .tb-table-insert{
    width:100%; height:30px; border-radius:7px; border:1px solid var(--green);
    background:var(--green); color:#fff; font-family:'Noto Sans Thai'; font-size:12px; font-weight:700; cursor:pointer;
  }
  .tb-table-insert:hover{filter:brightness(1.05);}
  .editor-toolbar button.tb-table-act{
    width:auto; min-width:42px; padding:0 8px; font-size:11px; font-weight:600; font-family:'Noto Sans Thai';
  }
  .wysiwyg-area{
    border:1px solid var(--border); border-radius:0 0 11px 11px; background:var(--surface);
    padding:24px; min-height:140px; outline:none; font-size:13.5px; line-height:1.85; color:var(--text);
    min-width:0; max-width:100%; overflow-x:auto; position:relative;
  }
  /* TC_AD-025: ฟอนต์ Rich Text Editor + Live Preview */
  .wysiwyg-area font[face="Sarabun"],
  .wysiwyg-area font[face="Sarabun,sans-serif"],
  .wysiwyg-area font[face="TH Sarabun New"],
  .doc-render font[face="Sarabun"],
  .doc-render font[face="Sarabun,sans-serif"],
  .doc-render font[face="TH Sarabun New"],
  .policy-content font[face="Sarabun"],
  .policy-content font[face="Sarabun,sans-serif"],
  .policy-content font[face="TH Sarabun New"],
  .wysiwyg-area span[style*="Sarabun"],
  .doc-render span[style*="Sarabun"],
  .policy-content span[style*="Sarabun"]{
    font-family:'Sarabun','Noto Sans Thai',sans-serif !important;
    line-height:2.05 !important;
  }
  /* Sarabun มี vowel/diacritic สูงกว่า Prompt — ขยาย line box ของ block แม่ */
  .wysiwyg-area h1:has(font[face*="Sarabun"]),
  .wysiwyg-area h2:has(font[face*="Sarabun"]),
  .wysiwyg-area h3:has(font[face*="Sarabun"]),
  .wysiwyg-area h4:has(font[face*="Sarabun"]),
  .wysiwyg-area h5:has(font[face*="Sarabun"]),
  .wysiwyg-area h6:has(font[face*="Sarabun"]),
  .wysiwyg-area h1:has(span[style*="Sarabun"]),
  .wysiwyg-area h2:has(span[style*="Sarabun"]),
  .wysiwyg-area h3:has(span[style*="Sarabun"]),
  .wysiwyg-area h4:has(span[style*="Sarabun"]),
  .wysiwyg-area h5:has(span[style*="Sarabun"]),
  .wysiwyg-area h6:has(span[style*="Sarabun"]),
  .policy-content h1:has(font[face*="Sarabun"]),
  .policy-content h2:has(font[face*="Sarabun"]),
  .policy-content h3:has(font[face*="Sarabun"]),
  .policy-content h4:has(font[face*="Sarabun"]),
  .policy-content p:has(font[face*="Sarabun"]),
  .policy-content li:has(font[face*="Sarabun"]),
  .policy-content h1:has(span[style*="Sarabun"]),
  .policy-content h2:has(span[style*="Sarabun"]),
  .policy-content h3:has(span[style*="Sarabun"]),
  .policy-content h4:has(span[style*="Sarabun"]),
  .policy-content p:has(span[style*="Sarabun"]),
  .policy-content li:has(span[style*="Sarabun"]){
    line-height:2 !important;
    overflow:visible;
  }
  .wysiwyg-area font[face="Prompt"],
  .wysiwyg-area font[face="Prompt,sans-serif"],
  .doc-render font[face="Prompt"],
  .doc-render font[face="Prompt,sans-serif"]{
    font-family:'Prompt','Noto Sans Thai',sans-serif !important;
  }
  .wysiwyg-area font[face="Noto Sans Thai"],
  .wysiwyg-area font[face="Noto Sans Thai,sans-serif"],
  .doc-render font[face="Noto Sans Thai"],
  .doc-render font[face="Noto Sans Thai,sans-serif"]{
    font-family:'Noto Sans Thai',sans-serif !important;
  }
  .wysiwyg-area font[face="Poppins"],
  .wysiwyg-area font[face="Poppins,sans-serif"],
  .doc-render font[face="Poppins"],
  .doc-render font[face="Poppins,sans-serif"]{
    font-family:'Poppins','Noto Sans Thai',sans-serif !important;
  }
  .wysiwyg-area:focus{border-color:var(--green);}
  .wysiwyg-area h1,.wysiwyg-area h2,.wysiwyg-area h3,
  .wysiwyg-area h4,.wysiwyg-area h5,.wysiwyg-area h6{
    color:#111; font-weight:700; margin:0.6em 0 0.35em; line-height:1.35;
  }
  .wysiwyg-area h1{font-size:1.55em;}
  .wysiwyg-area h2{font-size:1.35em;}
  .wysiwyg-area h3{font-size:1.2em;}
  .wysiwyg-area h4{font-size:1.05em;}
  .wysiwyg-area ul,.wysiwyg-area ol{
    margin:0.5em 0 0.5em 1.4em; padding:0; color:inherit;
  }
  .wysiwyg-area ul{list-style:disc;}
  .wysiwyg-area ol{list-style:decimal;}
  .wysiwyg-area li{margin:0.2em 0; line-height:1.7;}
  .editor-toolbar .tb-list-btn{width:34px;}
  .editor-toolbar .tb-list-icon{
    display:flex; flex-direction:column; justify-content:center; gap:3px; width:16px; height:14px;
  }
  .editor-toolbar .tb-list-icon span{
    display:block; height:2px; border-radius:1px; background:currentColor; position:relative;
  }
  .editor-toolbar .tb-list-bullet span::before{
    content:""; position:absolute; left:-7px; top:50%; width:3px; height:3px; border-radius:50%;
    background:currentColor; transform:translateY(-50%);
  }
  .editor-toolbar .tb-list-ordered span::before{
    position:absolute; left:-9px; top:50%; transform:translateY(-55%);
    font-size:7px; font-weight:700; line-height:1; color:currentColor; font-family:inherit;
  }
  .editor-toolbar .tb-list-ordered span:nth-child(1)::before{content:"1";}
  .editor-toolbar .tb-list-ordered span:nth-child(2)::before{content:"2";}
  .editor-toolbar .tb-list-ordered span:nth-child(3)::before{content:"3";}
  .editor-toolbar .tb-list-icon span{margin-left:8px; width:10px;}
  .wysiwyg-area .var-token{
    display:inline !important;
    background:none !important;
    color:#111 !important;
    border:none !important;
    border-radius:0;
    padding:0;
    margin:0;
    font:inherit !important;
    font-family:inherit !important;
    font-size:inherit !important;
    font-weight:inherit !important;
    white-space:normal;
    vertical-align:baseline;
  }
  .wysiwyg-area img,.wysiwyg-area .rte-img{
    max-width:100%; height:auto; display:inline-block; vertical-align:middle;
    border-radius:6px; cursor:pointer;
  }
  .wysiwyg-area img[data-align="left"],
  .wysiwyg-area img[data-align="center"],
  .wysiwyg-area img[data-align="right"]{
    display:block;
  }
  .wysiwyg-area img[data-align="left"]{margin-left:0; margin-right:auto;}
  .wysiwyg-area img[data-align="center"]{margin-left:auto; margin-right:auto;}
  .wysiwyg-area img[data-align="right"]{margin-left:auto; margin-right:0;}
  .wysiwyg-area .rte-img-box{
    position:relative; display:inline-block; max-width:100%; line-height:0; vertical-align:middle;
  }
  .wysiwyg-area .rte-img-box[data-align="left"],
  .wysiwyg-area .rte-img-box[data-align="center"],
  .wysiwyg-area .rte-img-box[data-align="right"]{
    display:block;
  }
  .wysiwyg-area .rte-img-box[data-align="left"]{margin-left:0; margin-right:auto;}
  .wysiwyg-area .rte-img-box[data-align="center"]{margin-left:auto; margin-right:auto;}
  .wysiwyg-area .rte-img-box[data-align="right"]{margin-left:auto; margin-right:0;}
  .wysiwyg-area .rte-img-box img{
    display:block; max-width:100%; height:auto;
  }
  .wysiwyg-area img.rte-selected{
    outline:2px solid var(--green); outline-offset:2px;
  }
  .wysiwyg-area .rte-resize-handle{
    position:absolute; right:-6px; bottom:-6px; width:14px; height:14px;
    background:var(--green); border:2px solid #fff; border-radius:3px;
    cursor:nwse-resize; box-shadow:0 1px 4px rgba(0,0,0,0.25); z-index:2;
  }
  .wysiwyg-area .rte-table{
    max-width:100%; border-collapse:collapse; margin:10px 0; table-layout:fixed;
  }
  .wysiwyg-area .rte-table-wrap{
    display:block; width:100%; max-width:100%; margin:10px 0;
  }
  .wysiwyg-area .rte-table-wrap .rte-table{
    margin:0 !important;
  }
  .wysiwyg-area .rte-table[data-align="left"],
  .wysiwyg-area table.rte-table[data-align="left"]{
    display:block; margin-left:0; margin-right:auto;
  }
  .wysiwyg-area .rte-table[data-align="center"],
  .wysiwyg-area table.rte-table[data-align="center"]{
    display:block; margin-left:auto; margin-right:auto;
  }
  .wysiwyg-area .rte-table[data-align="right"],
  .wysiwyg-area table.rte-table[data-align="right"]{
    display:block; margin-left:auto; margin-right:0;
  }
  .wysiwyg-area .rte-table th,.wysiwyg-area .rte-table td{
    border:1px solid #333; padding:8px 10px; vertical-align:top; color:#111;
    background:#fff; word-break:break-word; overflow-wrap:anywhere;
  }
  .wysiwyg-area .rte-table th{font-weight:600; text-align:center; background:#fff;}
  .wysiwyg-area .rte-table-selected{
    outline:2px solid rgba(0,168,92,0.45); outline-offset:2px;
  }
  .rte-table-overlay{
    position:absolute; pointer-events:none; z-index:4;
  }
  .rte-table-overlay-outline{
    position:absolute; inset:0; border:1px dashed rgba(0,168,92,0.55); border-radius:2px;
    pointer-events:none;
  }
  .rte-table-col-handle{
    position:absolute; top:0; width:14px; height:100%; margin-left:-7px;
    pointer-events:auto; cursor:col-resize; z-index:5;
  }
  .rte-table-col-handle::after{
    content:""; position:absolute; top:0; bottom:0; left:6px; width:2px;
    background:rgba(0,168,92,0.85); border-radius:1px;
    box-shadow:0 0 0 1px rgba(255,255,255,0.8);
  }
  .rte-table-col-handle:hover::after{
    width:3px; left:5.5px; background:var(--green-deep);
  }
  .wysiwyg-area .rte-table-selected th,
  .wysiwyg-area .rte-table-selected td{
    position:relative;
  }
  .rte-table-width-handle{
    position:absolute; right:-7px; bottom:-7px; width:14px; height:14px;
    pointer-events:auto; cursor:nwse-resize; z-index:6;
    background:var(--green); border:2px solid #fff; border-radius:3px;
    box-shadow:0 1px 4px rgba(0,0,0,0.25);
  }
  .preview-doc-box{
    border:1px dashed var(--border); border-radius:12px; padding:24px; background:var(--surface-2);
    margin-top:14px; font-size:13.5px; line-height:1.85;
    min-width:0; max-width:100%; overflow:hidden;
  }
  .preview-doc-box--collapsed{
    padding:16px 20px;
  }
  .preview-doc-head{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
  }
  .preview-doc-box h5{
    font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
    margin:0; flex:1; min-width:0;
  }
  .preview-doc-toggle{
    flex-shrink:0; height:28px; padding:0 10px; border-radius:8px;
    border:1px solid var(--border); background:var(--surface); color:var(--text);
    font-family:'Noto Sans Thai',sans-serif; font-size:11.5px; font-weight:600;
    cursor:pointer;
  }
  .preview-doc-toggle:hover{background:var(--surface-3); border-color:var(--green);}
  .preview-doc-collapsed-hint{
    margin:10px 0 0; font-size:12px; color:var(--muted-2); line-height:1.5;
  }
  .preview-site-row{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px;
    font-size:12.5px; color:var(--text);
  }
  .preview-site-row label{font-weight:600; white-space:nowrap;}
  .preview-site-row select{
    min-width:220px; max-width:100%; height:34px; border-radius:8px;
    border:1px solid var(--border); background:var(--surface); color:var(--text);
    font-family:inherit; font-size:12.5px; padding:0 10px;
  }
  .preview-doc-box .doc-render{
    background:var(--surface); border-radius:10px; padding:20px; color:#111;
    max-width:100%; min-width:0; overflow-x:auto;
  }
  .doc-render h1,.doc-render h2,.doc-render h3,.doc-render h4,.doc-render h5,.doc-render h6{
    color:#111; font-weight:700; margin:0.6em 0 0.35em;
  }
  .doc-render h4{font-size:15px;}
  .doc-render img{max-width:100%; height:auto;}
  .doc-render img[data-align="left"]{display:block; margin-left:0; margin-right:auto;}
  .doc-render img[data-align="center"]{display:block; margin-left:auto; margin-right:auto;}
  .doc-render img[data-align="right"]{display:block; margin-left:auto; margin-right:0;}
  .doc-render table,
  .doc-render .rte-table{
    max-width:100%; border-collapse:collapse; margin:10px 0;
    table-layout:fixed;
  }
  .doc-render .rte-table[data-align="left"],
  .doc-render table.rte-table[data-align="left"]{
    display:block; margin-left:0; margin-right:auto;
  }
  .doc-render .rte-table[data-align="center"],
  .doc-render table.rte-table[data-align="center"]{
    display:block; margin-left:auto; margin-right:auto;
  }
  .doc-render .rte-table[data-align="right"],
  .doc-render table.rte-table[data-align="right"]{
    display:block; margin-left:auto; margin-right:0;
  }
  .doc-render table th,.doc-render table td,
  .doc-render .rte-table th,.doc-render .rte-table td{
    border:1px solid #333; padding:8px 10px; background:#fff; color:#111;
    word-break:break-word; overflow-wrap:anywhere; vertical-align:top;
  }
  .doc-render table th,.doc-render .rte-table th{font-weight:600; text-align:center;}
  .doc-render .resolved-tag{font:inherit; color:inherit; font-weight:inherit; background:none; border-radius:0; padding:0;}

/* ===== Login page ===== */
body:has(> .login-page){
  display:flex;
  align-items:center;
  justify-content:center;
}
.login-page{
  width:100%;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.login-card{
  width:380px; max-width:90vw; background:var(--surface); border:1px solid var(--border);
  border-radius:18px; padding:34px 30px; box-shadow:0 12px 40px rgba(0,0,0,0.10);
}
.login-brand{display:flex; flex-direction:column; align-items:center; gap:0; margin-bottom:22px; text-align:center;}
.login-brand .brand-mark{width:48px; height:48px; font-size:20px; margin:0 auto 16px;}
.login-brand .brand-text{align-items:center;}
.login-brand .brand-text b{font-family:'Poppins'; font-size:19px; font-weight:700; display:block;}
.login-brand .brand-text span{font-size:12.5px; color:var(--muted); margin-top:4px; display:block; letter-spacing:0;}
.login-card > h2{font-family:'Poppins'; font-size:19px; font-weight:700; text-align:center; margin-bottom:4px;}
.login-card > p.login-sub{font-size:12.5px; color:var(--muted); text-align:center; margin-bottom:22px;}
.login-form .field{margin-bottom:14px;}
.login-form .btn-primary{width:100%; justify-content:center; margin-top:8px; padding:11px 0;}
.login-error{color:var(--danger); font-size:12px; margin-bottom:10px; text-align:center; min-height:14px;}
.password-field{position:relative;}
.password-field input{width:100%; padding-right:44px;}
.password-toggle{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border:none; background:transparent;
  color:var(--muted); cursor:pointer; border-radius:8px; padding:0;
}
.password-toggle:hover{color:var(--text); background:var(--surface-2);}
.login-remember{
  display:flex; align-items:center; gap:8px; margin:2px 0 14px;
  font-size:12.5px; color:var(--muted); cursor:pointer; user-select:none;
}
.login-remember input{accent-color:var(--green); width:15px; height:15px; flex-shrink:0;}
.login-hint{margin-top:18px; border-top:1px solid var(--border); padding-top:14px; font-size:11px; color:var(--muted-2); line-height:1.8;}
.login-hint b{color:var(--text); font-family:'IBM Plex Mono';}
.login-roles{margin-top:24px; text-align:center;}
.login-roles > span{font-size:10px; color:var(--muted-2); text-transform:uppercase; letter-spacing:.08em;}
.login-role-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px;}
.login-role-btn{
  padding:8px; border-radius:9px; border:1px solid var(--border); background:var(--surface-2);
  font-size:10px; color:var(--muted); cursor:pointer; font-family:'Noto Sans Thai';
}
.login-role-btn.sel{border-color:var(--green); color:var(--green); background:rgba(0,230,138,0.08); font-weight:600;}

/* ===== Public policy / embed pages (QA: full screen, white bg, no PDPA header) ===== */
.policy-page{
  min-height:100vh;
  width:100%;
  background:#fff;
  color:#111;
  overflow-x:hidden;
}
.policy-page--embed{
  min-height:0;
  overflow:visible;
  background:#fff;
}
html:has(.policy-page--embed),
body:has(.policy-page--embed){
  overflow:visible;
  height:auto;
  min-height:0 !important;
  display:block;
  background:#fff !important;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
html:has(.policy-page--embed)::-webkit-scrollbar,
body:has(.policy-page--embed)::-webkit-scrollbar{
  display:none;
  width:0;
  height:0;
}
.policy-page--embed .policy-main{
  padding:44px 20px 16px;
  max-width:100%;
  background:#fff;
}
.policy-page--embed .policy-content:has(font[face*="Sarabun"]),
.policy-page--embed .policy-content:has(span[style*="Sarabun"]){
  padding-top:6px;
}
.policy-page--embed .policy-content > :first-child:has(font[face*="Sarabun"]),
.policy-page--embed .policy-content > :first-child:has(span[style*="Sarabun"]){
  padding-top:0.15em;
}
.policy-page--embed .policy-content{
  overflow:visible;
  overflow-x:visible;
  line-height:1.85;
}
.policy-page--embed .policy-content > :first-child{
  margin-top:0;
}
.policy-page--embed .policy-content h1,
.policy-page--embed .policy-content h2,
.policy-page--embed .policy-content h3,
.policy-page--embed .policy-content h4{
  line-height:1.6;
}
.policy-page--embed .policy-pdf-wrap{
  min-height:0;
  gap:0;
}
.policy-page--embed .policy-pdf-dl{
  display:none;
}
.policy-page--embed .policy-pdf-frame{
  min-height:0;
  overflow:hidden;
}
.policy-main{
  width:100%;
  max-width:920px;
  margin:0 auto;
  padding:28px 24px 56px;
  box-sizing:border-box;
  background:#fff;
}
.policy-content{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  overflow-wrap:anywhere;
  word-break:break-word;
  -webkit-overflow-scrolling:touch;
}
.policy-section-body{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto;
}
.policy-section-body + .policy-section-body{
  margin-top:14px;
}
.policy-content h2{font-size:1.35rem; font-weight:700; margin:1.5rem 0 .75rem; color:#111; line-height:1.6;}
.policy-content h3{font-size:1.1rem; font-weight:600; margin:1.25rem 0 .5rem; color:#222; line-height:1.55;}
.policy-content h4{font-size:1.05rem; font-weight:700; margin:1.1rem 0 .5rem; color:#111; line-height:1.6;}
.policy-content > h2:first-child,
.policy-content > h3:first-child,
.policy-content > h4:first-child{
  margin-top:0;
}
.policy-content p,.policy-content li{line-height:1.75; color:#333;}
.policy-content ul,.policy-content ol{margin:0.75rem 0 0.75rem 1.5rem; padding:0;}
.policy-content ul{list-style:disc;}
.policy-content ol{list-style:decimal;}
.policy-content li{margin:0.25rem 0;}
.policy-content img,
.policy-content .doc-render img{
  max-width:100%;
  height:auto;
}
.policy-content table,
.policy-content .rte-table{
  width:100%;
  max-width:100%;
  border-collapse:collapse;
  margin:10px 0;
  table-layout:fixed;
}
.policy-content .rte-table[data-align="left"],
.policy-content table.rte-table[data-align="left"]{
  width:auto; display:block; margin-left:0; margin-right:auto;
}
.policy-content .rte-table[data-align="center"],
.policy-content table.rte-table[data-align="center"]{
  width:auto; display:block; margin-left:auto; margin-right:auto;
}
.policy-content .rte-table[data-align="right"],
.policy-content table.rte-table[data-align="right"]{
  width:auto; display:block; margin-left:auto; margin-right:0;
}
.policy-content table th,
.policy-content table td,
.policy-content .rte-table th,
.policy-content .rte-table td{
  border:1px solid #333;
  padding:8px 10px;
  background:#fff;
  color:#111;
  word-break:break-word;
  overflow-wrap:anywhere;
  vertical-align:top;
}
.policy-content table th,
.policy-content .rte-table th{
  font-weight:600;
  text-align:center;
}
.policy-protected{user-select:none; -webkit-user-select:none;}
.policy-pdf-wrap{display:flex; flex-direction:column; gap:12px; min-height:calc(100vh - 48px);}
.policy-pdf-frame{
  width:100%;
  flex:1;
  min-height:70vh;
  border:0;
  background:#fff;
}
.policy-pdf-dl{text-align:center; font-size:13px; margin:0;}
.policy-pdf-dl a{color:#0a8f7b;}

/* ===== Admin shell responsive (TC_EIT_015 dashboard/tablet/mobile) ===== */
@media (max-width:1024px){
  .nav-toggle{display:flex;}
  .sidebar{
    position:fixed;
    left:0; top:0;
    height:100vh;
    width:min(280px, 86vw);
    transform:translateX(-105%);
    transition:transform .22s ease;
    box-shadow:none;
    border-right:1px solid var(--border);
  }
  .sidebar.sidebar--open{
    transform:translateX(0);
    box-shadow:8px 0 28px rgba(12,43,32,0.18);
  }
  .sidebar-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(12,43,32,0.42);
    z-index:250;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
  }
  .admin-shell--nav-open .sidebar-backdrop{
    opacity:1;
    pointer-events:auto;
  }
  header.topbar{padding:0 14px 0 12px;}
  .content{padding:18px 14px 40px;}
  .stat-grid{grid-template-columns:repeat(2,1fr); gap:12px;}
  .ticket-grid{grid-template-columns:1fr 1fr; gap:12px;}
  .search{width:min(220px, 36vw);}
  .panel{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .panel table{min-width:560px;}
}

@media (max-width:640px){
  header.topbar{height:auto; min-height:58px; padding:10px 12px; flex-wrap:wrap;}
  .topbar h1{font-size:15px;}
  .topbar .sub{display:none;}
  .topbar-right{width:100%; justify-content:flex-end; gap:8px;}
  .search{flex:1; width:auto; min-width:0; max-width:none;}
  .content{padding:14px 12px 36px;}
  .page-head h2{font-size:18px;}
  .stat-grid{grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px;}
  .stat-card{padding:14px 12px;}
  .stat-card .val{font-size:22px;}
  .ticket-grid{grid-template-columns:1fr; gap:12px;}
  .panel table{min-width:480px;}
  th, td{padding:10px 12px; font-size:12px;}
}

/* TC_EIT_015: Tablet — public policy */
@media (max-width:1024px){
  .policy-main{padding:22px 18px 48px; max-width:100%;}
  .policy-content h2{font-size:1.25rem;}
  .policy-content h3{font-size:1.05rem;}
  .policy-pdf-frame{min-height:65vh;}
  .policy-page--embed .policy-main{padding:44px 18px 20px;}
  .policy-page--embed .policy-pdf-frame{min-height:0;}
}

/* TC_EIT_015: Mobile — public policy */
@media (max-width:640px){
  .policy-main{padding:16px 12px 40px;}
  .policy-content h2{font-size:1.15rem; margin:1.15rem 0 .6rem;}
  .policy-content h3{font-size:1rem; margin:1rem 0 .4rem;}
  .policy-content p,.policy-content li{font-size:15px; line-height:1.7;}
  .policy-content ul,.policy-content ol{margin-left:1.15rem;}
  .policy-pdf-wrap{min-height:calc(100vh - 32px); gap:8px;}
  .policy-pdf-frame{min-height:60vh;}
  .policy-pdf-dl{font-size:12px; padding:0 4px;}
  .policy-page--embed .policy-pdf-wrap{min-height:0; gap:0;}
  .policy-page--embed .policy-pdf-frame{min-height:0;}
}