@font-face{
      font-family:"Noto Sans Thai";
      src:url("/static/fonts/NotoSansThai-Variable.ttf") format("truetype");
      font-style:normal;
      font-weight:100 900;
      font-display:swap;
    }
    :root{
      --navy:#143f6b;
      --navy-dark:#0e355c;
      --cyan:#119bd3;
      --cyan-dark:#087fb8;
      --ink:#15263b;
      --muted:#667c95;
      --page:#eef6fb;
      --line:#7f93a5;
      --line-soft:#c8d7e3;
      --sheet:#e5edf4;
      --head:#f2f6f9;
      --green:#14945d;
      --green-soft:#e8f7ef;
      --blue-soft:#e4f2ff;
      --violet-soft:#eee8ff;
      --amber-soft:#fff3d4;
      --danger:#b44a4a;
      --danger-soft:#fff2f2;
    }
    *{box-sizing:border-box}
    html,body{margin:0;height:100%;min-width:0}
    body{
      height:100vh;
      overflow:hidden;
      display:grid;
      grid-template-rows:70px 52px minmax(0,1fr) 28px;
      background:var(--page);
      color:var(--ink);
      font-family:"Noto Sans Thai",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      font-size:15px;
    }
    a{color:inherit;text-decoration:none}
    button,input,select,textarea{font:inherit}
    button,a,.clickable,summary{cursor:pointer}
    button:disabled,.disabled{cursor:default}

    /* ===== Global header ===== */
    .topbar{
      height:70px;
      min-height:70px;
      max-height:70px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 30px 0 34px;
      position:relative;
      color:#fff;
      background:
        radial-gradient(circle at 10% 8%, rgba(36,168,236,.19), transparent 18rem),
        radial-gradient(circle at 72% -20%, rgba(255,255,255,.07), transparent 24rem),
        linear-gradient(90deg,#17639a 0%,#155286 48%,#123f6b 100%);
      border-bottom:1px solid rgba(255,255,255,.14);
      box-shadow:
        inset 0 -1px 0 rgba(255,255,255,.04),
        0 4px 14px rgba(17,52,84,.13);
    }
    .topbar::after{
      content:"";
      position:absolute;
      left:0;right:0;bottom:0;height:2px;
      background:linear-gradient(90deg,rgba(27,177,230,.72),rgba(100,195,232,.30),transparent 70%);
      pointer-events:none;
    }
    .brand-home{display:flex;align-items:center;gap:18px;min-width:0;height:100%}
    .panel-logo{
      display:block;
      width:auto;
      height:48px;
      max-width:195px;
      max-height:48px;
      object-fit:contain;
      object-position:left center;
      filter:drop-shadow(0 7px 14px rgba(0,0,0,.22));
      flex:0 0 auto;
    }
    .brand-divider{
      width:1px;height:30px;flex:0 0 1px;
      background:linear-gradient(180deg,transparent,rgba(255,255,255,.34),transparent);
      box-shadow:1px 0 0 rgba(0,0,0,.08);
    }
    .brand-copy{
      min-width:0;display:flex;flex-direction:column;justify-content:center;
      line-height:1.08;white-space:nowrap;
    }
    .brand-title{
      color:#fff;font-size:20px;font-weight:820;letter-spacing:.1px;
      text-shadow:0 2px 8px rgba(0,0,0,.16);
    }
    .brand-subtitle{
      margin-top:6px;color:#bcd6e9;font-size:12.5px;font-weight:650;letter-spacing:.35px;
    }
    .top-actions{display:flex;align-items:center;gap:12px}
    .language{
      height:44px;
      display:flex;
      align-items:center;
      gap:2px;
      padding:3px;
      border:1px solid rgba(255,255,255,.27);
      border-radius:12px;
      background:rgba(255,255,255,.055);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    }
    .language button{
      height:36px;
      min-width:48px;
      border:0;
      border-radius:9px;
      background:transparent;
      color:#d7e4ef;
      font-weight:760;
    }
    .language button.active{
      color:#075d92;
      background:#fff;
      box-shadow:0 2px 8px rgba(5,30,52,.14);
    }
    .user-menu{position:relative}
    .user-menu summary{
      list-style:none;
      height:44px;
      min-width:132px;
      padding:0 14px;
      border:1px solid rgba(255,255,255,.27);
      border-radius:12px;
      display:flex;
      align-items:center;
      gap:9px;
      color:#fff;
      font-weight:760;
      background:rgba(255,255,255,.055);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    }
    .user-menu summary::-webkit-details-marker{display:none}
    .user-avatar{
      width:27px;height:27px;border:1px solid rgba(255,255,255,.55);
      border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px
    }
    .user-caret{margin-left:auto;color:#c7d9e8}
    .user-pop{
      position:absolute;right:0;top:51px;z-index:50;
      width:190px;padding:7px;background:#fff;border:1px solid #cbd9e4;border-radius:12px;
      box-shadow:0 14px 34px rgba(15,44,72,.18);color:var(--ink)
    }
    .user-pop a,.user-pop button{
      width:100%;display:flex;align-items:center;min-height:38px;padding:0 11px;
      border:0;border-radius:8px;background:transparent;color:var(--ink);text-align:left
    }
    .user-pop a:hover,.user-pop button:hover{background:#f0f6fa}

    /* ===== Primary nav ===== */
    .primary-nav{
      height:52px;
      min-height:52px;
      max-height:52px;
      display:flex;
      align-items:stretch;
      padding:0 28px;
      gap:2px;
      background:
        linear-gradient(90deg,#103b67 0%,#0f365f 55%,#0d3157 100%);
      border-bottom:1px solid #718ba2;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 4px 10px rgba(22,57,88,.08);
      overflow:hidden;
    }
    .nav-item{
      position:relative;
      min-width:112px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:7px;
      padding:0 12px;
      color:#d1deea;
      font-weight:720;
      font-size:14px;
      border-left:1px solid transparent;
      border-right:1px solid transparent;
      white-space:nowrap;
      transition:background .14s ease,color .14s ease;
    }
    .nav-item:hover:not(.disabled){
      color:#fff;
      background:rgba(255,255,255,.045);
    }
    .nav-item.active{
      color:#fff;
      background:
        linear-gradient(180deg,rgba(20,151,217,.34) 0%,rgba(12,116,184,.23) 100%);
      border-left-color:rgba(75,187,238,.24);
      border-right-color:rgba(75,187,238,.24);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    }
    .nav-item.active::after{
      content:"";
      position:absolute;
      left:0;right:0;bottom:-1px;height:4px;
      border-radius:4px 4px 0 0;
      background:#17a9e3;
      box-shadow:0 -3px 9px rgba(23,169,227,.24);
    }
    .nav-item.disabled{
      color:#90a4b7;
      opacity:.64;
      cursor:default;
      user-select:none;
    }
    .nav-icon{
      width:20px;height:20px;display:inline-grid;place-items:center;flex:0 0 auto
    }
    .nav-icon svg{
      width:20px;height:20px;
      fill:none;stroke:currentColor;stroke-width:1.8;
      stroke-linecap:round;stroke-linejoin:round
    }
    button.nav-item{border-top:0;border-bottom:0;background-color:transparent;font-family:inherit}

    /* ===== Main frame ===== */
    .page-main{min-height:0;padding:16px 20px 12px;overflow:auto}
    .page-main.single-viewport{overflow:hidden}
    .workspace{
      height:100%;
      min-height:0;
      display:flex;
      flex-direction:column;
      background:#fff;
      border:2px solid var(--line);
      border-radius:22px;
      overflow:hidden;
      box-shadow:0 2px 5px rgba(35,73,106,.04);
    }

    /* Radius-style sheet header */
    .sheet-head{
      flex:0 0 76px;
      min-height:76px;
      display:grid;
      grid-template-columns:minmax(470px,1.05fr) repeat(4,minmax(126px,.28fr));
      align-items:stretch;
      border-bottom:1.5px solid var(--line);
      background:#fff;
    }
    .sheet-title{
      min-width:0;padding:14px 22px 11px;
      display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
      border-right:1.5px solid var(--line);
    }
    .sheet-copy{min-width:0}
    .sheet-copy h1{margin:0;font-size:24px;line-height:1.15;letter-spacing:-.02em}
    .sheet-copy p{margin:5px 0 0;color:var(--muted);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .sheet-badge{
      align-self:flex-start;
      flex:0 0 auto;
      margin-top:1px;padding:8px 13px;border-radius:18px;
      background:#e8f6fd;color:#007cad;font-size:12px;font-weight:800;white-space:nowrap
    }
    .sheet-tab{
      position:relative;
      display:grid;place-items:center;
      padding:0 10px;
      background:var(--sheet);
      color:#687e96;
      border-right:1.5px solid var(--line);
      font-weight:760;
      font-size:15px;
    }
    .sheet-tab:last-child{border-right:0}
    .sheet-tab.active{
      background:#fff;color:var(--ink);
      margin-top:-1px;
      margin-bottom:-2px;
      border:1.5px solid var(--line);
      border-bottom-color:#fff;
      border-radius:0 30px 0 0;
      z-index:2;
    }
    .sheet-tab.active::before{
      content:"";position:absolute;left:-2px;top:-1px;bottom:0;width:2px;background:#fff
    }
    .workspace-body{flex:1;min-height:0;padding:14px 16px 10px}

    /* Summary cards */
    .summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
    .summary-card{
      height:90px;
      padding:12px 18px;
      border:1px solid #c6d7e2;border-radius:17px;
      display:grid;grid-template-columns:28px 1fr;align-items:center;column-gap:10px
    }
    .summary-card.green{background:#e5f7ef}
    .summary-card.blue{background:#e4f2ff}
    .summary-card.violet{background:#eee8ff}
    .summary-card.amber{background:#fff2d2}
    .metric-dot{width:15px;height:15px;border-radius:50%;background:#15935b;justify-self:center}
    .blue .metric-dot{background:#2299dc;box-shadow:inset 0 0 0 3px #d7efff}
    .violet .metric-dot{width:13px;height:13px;border-radius:2px;transform:rotate(45deg);background:transparent;border:3px double #8659df}
    .amber .metric-dot{background:#d39a22;box-shadow:inset 0 0 0 4px #fff2d2}
    .metric-label{color:#6c8198;font-size:12px;font-weight:780}
    .metric-value{margin-top:1px;font-size:26px;line-height:1;font-weight:850;letter-spacing:-.02em;color:#10233a}
    .metric-note{margin-top:4px;color:#657b93;font-size:12px}

    /* Toolbar / form */
    .add-strip{
      min-height:40px;display:flex;align-items:center;padding:0 17px;
      border:1px solid #c8d8e4;border-radius:12px;background:#fbfdff;
      color:#0585bd;font-weight:800
    }
    details.add-panel[open] .add-strip{border-radius:12px 12px 0 0}
    .add-form{
      display:grid;grid-template-columns:minmax(180px,1fr) 180px 150px;
      gap:10px;padding:12px;border:1px solid #c8d8e4;border-top:0;border-radius:0 0 12px 12px;background:#f9fcfe
    }
    .add-form input,.add-form button,.toolbar input,.toolbar select,.toolbar button{
      height:42px;border:1px solid #c7d7e3;border-radius:11px;background:#fff;color:var(--ink);padding:0 14px
    }
    .add-form button,.toolbar .primary{
      border-color:#1599d0;background:#1599d0;color:#fff;font-weight:800
    }
    .toolbar{
      display:grid;grid-template-columns:minmax(300px,1fr) 190px 200px 150px;gap:10px
    }
    .toolbar input::placeholder{color:#7c8b9c}
    .error,.success{margin:0;padding:9px 12px;border-radius:9px;font-size:13px}
    .error{background:#fff1f1;border:1px solid #edc3c3;color:#9f3838}
    .success{background:#edf9f3;border:1px solid #c4ead6;color:#137849}

    /* Radius-style table */
    .table-wrap{
      min-height:0;overflow:hidden;
      border:1px solid #c6d7e2;border-radius:16px;background:#fff
    }
    .data-table{width:100%;height:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
    .data-table thead th{
      height:38px;padding:0 12px;
      background:#f1f5f8;color:#5e748b;
      border-bottom:1px solid #c5d7e3;
      font-size:12px;font-weight:800;text-align:left;vertical-align:middle
    }
    .data-table thead th.center,.data-table td.center{text-align:center}
    .data-table tbody td{
      height:52px;padding:9px 12px;vertical-align:top;
      border-bottom:1px solid #d5e1e9;
      color:#16283d;font-size:13px;line-height:1.28
    }
    .data-table tbody tr:last-child td{border-bottom:0}
    .data-table .domain-link{color:#096d9c;font-weight:800}
    .data-table code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#075f94;font-size:12.5px}
    .status-pill{
      display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:14px;
      background:#e8f7ef;border:1px solid #c3e5d3;color:#147b4b;font-size:12px;font-weight:800
    }
    .status-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:#1aa868}
    .manage-btn{
      display:inline-grid;place-items:center;height:34px;padding:0 14px;border:1px solid #bdd1df;
      border-radius:10px;background:#fff;color:#133f67;font-weight:800
    }
    .table-meta{height:28px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 4px;color:#647a92;font-size:12.5px}

    /* Dashboard */
    .dashboard-head{
      flex:0 0 76px;display:flex;justify-content:space-between;align-items:center;
      padding:12px 22px;border-bottom:1.5px solid var(--line)
    }
    .dashboard-head .eyebrow{margin:0 0 2px;color:#008bc4;font-size:12px;font-weight:850;letter-spacing:.12em}
    .dashboard-head h1{margin:0;font-size:25px}
    .dashboard-head p{margin:3px 0 0;color:var(--muted);font-size:13px}
    .dashboard-body{flex:1;min-height:0;padding:16px;display:grid;grid-template-rows:100px auto minmax(0,1fr);gap:16px}
    .dash-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
    .dash-card{
      min-height:100px;border:1px solid #c8d8e4;border-radius:16px;background:#fff;padding:15px 18px;position:relative;overflow:hidden
    }
    .dash-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:#1aad71}
    .dash-card.blue::before{background:#14a0d7}.dash-card.violet::before{background:#7458de}.dash-card.amber::before{background:#e2a621}
    .dash-label{color:#697f96;font-size:12px;font-weight:800}
    .dash-value{margin-top:9px;font-size:27px;font-weight:850}
    .dash-note{margin-top:2px;color:#71869a;font-size:12px}
    .progress{height:8px;margin-top:7px;background:#e4edf3;border-radius:8px;overflow:hidden}
    .progress span{display:block;height:100%;background:#159bd3;border-radius:8px}
    .quick-title{margin:0;font-size:20px}
    .quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;min-height:0}
    .quick-card{
      min-height:0;border:1px solid #c8d8e4;border-radius:16px;background:#fff;padding:18px;
      display:flex;flex-direction:column;justify-content:center
    }
    .quick-icon{
      width:44px;height:44px;border-radius:12px;background:#e7f6fd;color:#0786bc;display:grid;place-items:center;
      font-size:18px;font-weight:900;margin-bottom:12px
    }
    .quick-card h3{margin:0 0 7px;font-size:16px}.quick-card p{margin:0;color:#71869b;font-size:13px;line-height:1.4}
    .quick-card.disabled{opacity:.56}

    /* Existing detail/content template compatibility */
    .wrap{min-height:100%;padding:0}
    .workspace-head{padding:15px 20px;border-bottom:1px solid #c7d7e3;display:flex;align-items:center;justify-content:space-between}
    .workspace-head h1{margin:0;font-size:24px}.workspace-head p{margin:4px 0 0}
    .muted{color:var(--muted)}
    .btn,.secondary{display:inline-grid;place-items:center;min-height:38px;padding:0 13px;border:1px solid #bdd0de;border-radius:10px;background:#fff}
    .subtabs{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:1px solid var(--line)}
    .subtabs a{height:46px;display:grid;place-items:center;background:var(--sheet);border-right:1px solid #bdccd8;color:#647b92;font-weight:760}
    .subtabs a.active{background:#fff;color:var(--ink);box-shadow:inset 0 -4px var(--cyan)}
    .grid{display:grid;gap:14px}
    .card{border:1px solid #c8d8e4;border-radius:15px;background:#fff;padding:16px}
    .system-table{width:100%;border-collapse:collapse}.system-table th,.system-table td{padding:9px;border-bottom:1px solid #dae4eb;text-align:left}
    .section-title{margin:18px 0 10px}
    textarea{width:100%;border:1px solid #c7d7e3;border-radius:10px}

    /* Footer */
    .footer{
      height:28px;min-height:28px;max-height:28px;padding:0 20px;
      display:flex;align-items:center;justify-content:space-between;
      background:var(--navy);color:#c9d8e7;border-top:1px solid rgba(255,255,255,.12);
      font-size:12px
    }
    .footer strong{color:#fff}.footer-status{display:flex;align-items:center;gap:6px}
    .footer .ok{color:#d9fff0}.footer-dot{width:10px;height:10px;border-radius:50%;background:#26ce78;box-shadow:0 0 0 4px rgba(38,206,120,.12)}

    /* Websites single-view layout */
    .websites-layout{
      height:100%;display:grid;
      grid-template-rows:90px 40px 42px minmax(0,1fr) 28px;
      gap:10px
    }

    @media(max-height:820px) and (min-width:901px){
      body{grid-template-rows:70px 52px minmax(0,1fr) 28px}
      .topbar{height:70px;min-height:70px;max-height:70px}.panel-logo{width:auto;height:48px;max-width:195px;max-height:48px}.brand-title{font-size:18px}.brand-subtitle{font-size:11.5px;margin-top:4px}
      .primary-nav{height:52px;min-height:52px;max-height:52px}
      .page-main{padding:10px 16px 8px}
      .sheet-head,.dashboard-head{flex-basis:68px;min-height:68px}
      .workspace-body{padding:10px 14px 7px}
      .websites-layout{grid-template-rows:78px 36px 40px minmax(0,1fr) 24px;gap:7px}
      .summary-card{height:78px;padding:9px 14px}
      .metric-value{font-size:23px}.metric-note{margin-top:2px}
      .add-strip{min-height:36px}
      .toolbar input,.toolbar select,.toolbar button{height:40px}
      .data-table thead th{height:34px}
      .data-table tbody td{height:46px;padding:7px 11px}
      .table-meta{height:24px}
      .dashboard-body{padding:11px;grid-template-rows:88px auto minmax(0,1fr);gap:11px}
      .dash-card{min-height:88px;padding:12px 15px}
      .quick-card{padding:14px}.quick-icon{width:38px;height:38px;margin-bottom:8px}
    }
    @media(max-width:900px){
      body{height:auto;min-height:100%;display:block;overflow:auto}
      .topbar{min-height:72px;padding:0 15px}.panel-logo{width:215px;max-height:52px}.brand-divider,.brand-copy{display:none}.top-actions{gap:7px}
      .primary-nav{overflow-x:auto;padding:0 10px}.nav-item{min-width:112px;height:50px;padding:0 10px}
      .page-main,.page-main.single-viewport{overflow:visible;padding:12px}
      .workspace{height:auto;min-height:650px}
      .sheet-head{grid-template-columns:1fr 1fr;grid-auto-rows:58px;height:auto}
      .sheet-title{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--line)}
      .sheet-tab{border-top:1px solid var(--line)}
      .summary-grid,.dash-summary,.quick-grid{grid-template-columns:1fr 1fr}
      .websites-layout{height:auto;grid-template-rows:auto}
      .toolbar{grid-template-columns:1fr 1fr}
      .toolbar input{grid-column:1/-1}
      .table-wrap{overflow:auto}.data-table{min-width:850px}
      .footer{min-height:42px}
    }