:root{--ink:#17231d;--muted:#69756e;--line:#e4e9e5;--panel:#fff;--canvas:#f4f7f4;--green:#176b45;--green-soft:#e8f5ed;--amber:#9a6500;--amber-soft:#fff4d8;--red:#b52b35;--red-soft:#fdebed;--grey:#59645f;--grey-soft:#eef1ef;--nav:#102c22;--shadow:0 12px 36px rgba(21,45,34,.07)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--canvas);color:var(--ink);font-family:Inter,"Noto Sans Thai",Tahoma,Arial,sans-serif;font-size:14px}.shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:238px;padding:27px 18px;background:var(--nav);color:#fff;display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none;padding:0 7px 29px;border-bottom:1px solid rgba(255,255,255,.1)}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#62c38d;color:#0e3626;font-size:20px;font-weight:900}.brand strong,.brand small,.sidebar-foot strong,.sidebar-foot small{display:block}.brand strong{font-size:17px}.brand small,.sidebar-foot small{margin-top:2px;color:#9eb8ac;font-size:11px}nav{display:grid;gap:6px;margin-top:24px}.nav-item{display:flex;gap:12px;align-items:center;padding:11px 13px;border-radius:9px;color:#bcd0c7;text-decoration:none;font-weight:600}.nav-item span{font-size:18px}.nav-item:hover,.nav-item.active{color:#fff;background:rgba(255,255,255,.09)}.sidebar-foot{display:flex;align-items:center;gap:10px;margin-top:auto;padding:17px 8px 0;border-top:1px solid rgba(255,255,255,.1)}.sidebar-foot strong{font-size:12px}.workspace-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#dff5e8;color:#155c3d;font-weight:800;font-size:11px}main{margin-left:238px;min-width:0}.topbar{min-height:94px;padding:22px 34px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px}.eyebrow{margin:0 0 4px;color:var(--green);font-size:10px;font-weight:800;letter-spacing:.14em}.topbar h1{margin:0;font-size:23px;letter-spacing:-.025em}.top-actions{display:flex;align-items:center;gap:10px;margin-left:auto}.last-sync{margin-right:8px;color:var(--muted);font-size:11px}.last-sync strong{color:var(--ink)}.button,select{height:38px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:inherit;font-weight:700;padding:0 14px;cursor:pointer}.button.primary{border-color:var(--green);background:var(--green);color:#fff}.button:hover{transform:translateY(-1px)}.menu-button{display:none;border:0;background:transparent;font-size:22px}.content{padding:24px 34px 42px;max-width:1600px;margin:auto}.notice{display:flex;align-items:center;gap:12px;margin-bottom:17px;padding:11px 14px;border:1px solid #c8e4d3;border-radius:9px;background:#eff9f3;color:#315c48}.notice p{margin:0;flex:1}.notice-icon{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:var(--green);color:#fff;font-weight:800;font-family:serif}.notice button{border:0;background:transparent;color:#547463;font-size:21px;cursor:pointer}.stats{display:grid;grid-template-columns:repeat(5,minmax(130px,1fr));gap:12px;margin-bottom:17px}.stat-card{display:flex;align-items:center;text-align:left;gap:12px;padding:17px;border:1px solid var(--line);border-radius:11px;background:#fff;box-shadow:0 2px 8px rgba(30,49,40,.025);cursor:pointer}.stat-card:hover,.stat-card.selected{border-color:#83ad98;box-shadow:0 0 0 2px rgba(23,107,69,.08)}.stat-card small,.stat-card strong{display:block}.stat-card small{color:var(--muted);font-weight:600}.stat-card strong{margin-top:4px;font-size:25px}.stat-icon{display:grid;place-items:center;width:39px;height:39px;border-radius:10px;font-size:17px;font-weight:900}.stat-icon.neutral{background:#eef3ef;color:#355c49}.healthy{background:var(--green-soft);color:var(--green)}.warning{background:var(--amber-soft);color:var(--amber)}.critical{background:var(--red-soft);color:var(--red)}.offline{background:var(--grey-soft);color:var(--grey)}.panel{border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:var(--shadow);overflow:hidden}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 21px;border-bottom:1px solid var(--line)}.panel-head h2{margin:0;font-size:16px}.panel-head p{margin:4px 0 0;color:var(--muted);font-size:12px}.controls{display:flex;gap:8px}.search{display:flex;align-items:center;gap:8px;width:250px;height:38px;padding:0 11px;border:1px solid var(--line);border-radius:8px;color:var(--muted)}.search input{min-width:0;width:100%;border:0;outline:0;font:inherit}select{font-weight:500;color:var(--muted)}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse}th{padding:11px 16px;background:#fafbfa;color:#778179;text-align:left;font-size:10px;letter-spacing:.06em;text-transform:uppercase}td{padding:13px 16px;border-top:1px solid #edf0ed;color:#57625c;white-space:nowrap}tbody tr:hover{background:#fbfdfb}.site-name{display:flex;align-items:center;gap:10px;border:0;background:transparent;text-align:left;cursor:pointer}.site-name strong,.site-name small{display:block}.site-name strong{color:var(--ink);font-size:13px}.site-name small{margin-top:3px;color:#7a847e}.site-avatar{display:grid;place-items:center;width:35px;height:35px;border-radius:9px;background:#eaf1ec;color:#426153;font-size:10px;font-weight:800}.badge{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border-radius:99px;font-size:11px;font-weight:700}.badge i{width:6px;height:6px;border-radius:50%;background:currentColor}.issue-cell{max-width:290px;white-space:normal;color:#3e4943}.update-count{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:#768078}.update-count.has-updates{background:var(--amber-soft);color:var(--amber)}.row-action{width:28px;height:28px;border:1px solid var(--line);border-radius:7px;background:#fff;color:#647068;font-size:20px;cursor:pointer}.empty-state{padding:38px;text-align:center;color:var(--muted)}.lower-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:17px;margin-top:17px}.text-button{border:0;background:transparent;color:var(--green);font-weight:700;cursor:pointer}.issue-row,.activity-row{display:flex;align-items:center;gap:11px;padding:14px 20px;border-top:1px solid #edf0ed}.issue-row:first-child,.activity-row:first-child{border-top:0}.issue-row strong{flex:1;font-size:12px}.issue-row>span:last-child{color:var(--muted);font-size:11px}.finding-dot{width:9px;height:9px;border-radius:50%;background:currentColor;flex:0 0 auto}.finding-dot.healthy{color:var(--green)}.finding-dot.warning{color:#e0a117}.finding-dot.critical{color:var(--red)}.finding-dot.offline{color:#7a8580}.activity-row p{margin:0;font-size:12px;font-weight:600}.activity-row small{display:block;margin-top:4px;color:var(--muted);font-weight:400}.spinning{pointer-events:none;opacity:.7}dialog{width:min(660px,calc(100% - 32px));padding:0;border:0;border-radius:14px;color:var(--ink);box-shadow:0 30px 90px rgba(8,28,18,.25)}dialog::backdrop{background:rgba(8,28,18,.5);backdrop-filter:blur(2px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--line)}.dialog-head h2{margin:0;font-size:21px}.dialog-head button{border:0;background:transparent;font-size:25px;cursor:pointer}#dialog-content{padding:23px}.site-meta{display:flex;justify-content:space-between;align-items:center;color:var(--muted)}.detail-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:18px 0 24px}.detail-stats div{padding:13px;border:1px solid var(--line);border-radius:9px}.detail-stats small,.detail-stats strong{display:block}.detail-stats small{color:var(--muted);font-size:10px}.detail-stats strong{margin-top:5px;font-size:18px}.finding-list{list-style:none;padding:0;margin:12px 0}.finding-list li{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--line)}.prototype-note{padding:11px 13px;border-radius:8px;background:#f2f6f3;color:var(--muted);font-size:11px}
@media(max-width:1100px){.stats{grid-template-columns:repeat(3,1fr)}.last-sync{display:none}.lower-grid{grid-template-columns:1fr}}
@media(max-width:760px){.sidebar{transform:translateX(-100%);transition:transform .2s}.sidebar.open{transform:translateX(0)}main{margin-left:0}.menu-button{display:block}.topbar{padding:17px 18px}.topbar h1{font-size:18px}.top-actions .secondary{display:none}.content{padding:17px}.stats{grid-template-columns:repeat(2,1fr)}.stats .stat-card:first-child{grid-column:1/-1}.panel-head{align-items:flex-start;flex-direction:column}.controls,.search{width:100%}.controls select{width:40%}.top-actions .primary{font-size:0}.top-actions .primary::after{content:"+";font-size:18px}.lower-grid{grid-template-columns:1fr}.detail-stats{grid-template-columns:repeat(2,1fr)}}

/* Full site detail */
.back-button{margin:0 0 15px;padding:7px 0;border:0;background:transparent;color:var(--green);font-weight:700;cursor:pointer}.detail-hero{display:flex;align-items:center;justify-content:space-between;padding:23px 25px}.detail-identity,.detail-hero-actions{display:flex;align-items:center;gap:15px}.site-avatar.large{width:51px;height:51px;border-radius:12px;font-size:14px}.detail-identity h1{margin:0 0 3px;font-size:24px}.domain-label{color:var(--muted);font-size:12px}.detail-score-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:13px;margin:14px 0}.score-card{display:flex;align-items:center;gap:17px;padding:18px}.score-ring{display:grid;place-content:center;width:78px;height:78px;border:8px solid currentColor;border-radius:50%;text-align:center;flex:0 0 auto}.score-ring strong,.score-ring small{display:block;background:transparent}.score-ring strong{font-size:23px;color:var(--ink)}.score-ring small{font-size:9px;color:var(--muted)}.score-card>div:last-child>small,.mini-detail small{color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.07em}.score-card h2{margin:4px 0 3px;font-size:16px}.score-card p{margin:0;color:var(--muted);font-size:11px}.mini-detail{display:flex;flex-direction:column;justify-content:center;padding:18px}.mini-detail strong{margin:8px 0 1px;font-size:27px}.mini-detail .small-value{font-size:15px}.mini-detail span{color:var(--muted);font-size:10px}.detail-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,.8fr);gap:14px}.detail-side{display:grid;align-content:start;gap:14px}.finding-cards{padding:0 20px}.finding-card{padding:17px 0;border-top:1px solid var(--line)}.finding-card:first-child{border-top:0}.finding-top{display:flex;align-items:flex-start;gap:11px}.finding-top .finding-dot{margin-top:8px}.finding-top h3{margin:3px 0 0;font-size:14px}.finding-dot.unknown{color:#809087}.severity{color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase}.finding-card dl{display:grid;grid-template-columns:1fr 1.3fr;gap:12px;margin:13px 0 0 20px}.finding-card dl div{padding:11px;border-radius:8px;background:#f7f9f7}.finding-card dt,.info-list dt{color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase}.finding-card dd{margin:5px 0 0;line-height:1.55;font-size:11px}.info-list{margin:0;padding:6px 20px 13px}.info-list div{display:flex;justify-content:space-between;gap:15px;padding:11px 0;border-top:1px solid var(--line)}.info-list div:first-child{border-top:0}.info-list dd{margin:0;font-weight:700;font-size:11px}.connection{position:relative;padding-left:11px}.connection::before{content:"";position:absolute;left:0;top:4px;width:6px;height:6px;border-radius:50%;background:var(--green)}.connection.bad::before{background:var(--red)}.timeline-panel{margin-top:14px}.timeline{display:grid;grid-template-columns:repeat(3,1fr);padding:20px}.timeline>div{position:relative;padding:0 18px 0 25px;border-left:1px solid var(--line)}.timeline i{position:absolute;left:-5px;top:2px;width:9px;height:9px;border-radius:50%;background:#87928c}.timeline strong,.timeline span{display:block}.timeline strong{font-size:11px}.timeline span,.timeline p{color:var(--muted);font-size:10px}.timeline p{margin:6px 0 0}
@media(max-width:1100px){.detail-score-grid{grid-template-columns:repeat(3,1fr)}.score-card{grid-column:1/-1}}
@media(max-width:760px){.detail-hero{align-items:flex-start;gap:18px}.detail-hero-actions{align-items:flex-start;flex-direction:column}.detail-score-grid{grid-template-columns:repeat(2,1fr)}.score-card{grid-column:1/-1}.detail-layout{grid-template-columns:1fr}.finding-card dl{grid-template-columns:1fr}.timeline{grid-template-columns:1fr;gap:20px}.timeline>div{padding-bottom:5px}}

/* Connect website flow */
.connect-dialog{width:min(720px,calc(100% - 28px));max-height:calc(100vh - 32px);padding:0;border:0;border-radius:15px;color:var(--ink);box-shadow:0 35px 100px rgba(8,28,18,.3)}.connect-dialog::backdrop{background:rgba(8,28,18,.58);backdrop-filter:blur(3px)}.connect-head{display:flex;align-items:center;justify-content:space-between;padding:22px 25px;border-bottom:1px solid var(--line)}.connect-head h2{margin:0;font-size:21px}.connect-head>button{border:0;background:transparent;font-size:25px;cursor:pointer}.connect-steps{display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:16px 25px;list-style:none;border-bottom:1px solid var(--line);background:#fafcfa}.connect-steps li{position:relative;display:flex;align-items:center;gap:8px;color:#8a948e;font-size:11px;font-weight:700}.connect-steps li:not(:last-child)::after{content:"";height:1px;background:#dce3de;position:absolute;left:40px;right:14px;top:14px}.connect-steps span{display:grid;place-items:center;width:28px;height:28px;border:1px solid #ccd5cf;border-radius:50%;background:#fff;z-index:1}.connect-steps li.active{color:var(--green)}.connect-steps li.active span,.connect-steps li.done span{border-color:var(--green);background:var(--green);color:#fff}.connect-steps li.done span{font-size:0}.connect-steps li.done span::after{content:"✓";font-size:12px}.connect-body{padding:25px}.connect-step{display:none}.connect-step.active{display:block}.connect-intro{display:flex;align-items:center;gap:13px;margin-bottom:20px}.connect-intro h3{margin:0 0 4px;font-size:16px}.connect-intro p{margin:0;color:var(--muted);font-size:11px}.connect-icon{display:grid;place-items:center;width:41px;height:41px;border-radius:10px;background:var(--green-soft);color:var(--green);font-size:19px;font-weight:800}.connect-step form{display:grid;gap:14px}.connect-step label{display:grid;gap:6px;font-size:11px;font-weight:700}.connect-step input{height:42px;padding:0 12px;border:1px solid #ccd5cf;border-radius:8px;font:inherit;outline:0}.connect-step input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(23,107,69,.1)}.form-error{min-height:18px;margin:0;color:var(--red);font-size:11px}.connect-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:4px}.install-card{display:flex;gap:13px;margin:10px 0;padding:14px;border:1px solid var(--line);border-radius:9px}.install-number{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#edf4ef;color:var(--green);font-weight:800;flex:0 0 auto}.install-card strong{font-size:12px}.install-card p{margin:5px 0;color:var(--muted);font-size:11px}.code-box{display:flex;align-items:center;justify-content:space-between;margin:15px 0;padding:15px 17px;border:1px dashed #80aa93;border-radius:10px;background:#f2faf5}.code-box small,.code-box strong,.code-box span{display:block}.code-box small{color:var(--green);font-size:9px;font-weight:800;letter-spacing:.08em}.code-box strong{margin:5px 0;font:800 22px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em}.code-box span{color:var(--muted);font-size:9px}.code-box button{border:1px solid #bdd7c7;border-radius:7px;background:#fff;color:var(--green);padding:8px 11px;font-weight:700;cursor:pointer}.demo-warning{padding:10px 12px;border-radius:8px;background:var(--amber-soft);color:#76520b;font-size:10px}.detection-state{text-align:center;padding:16px 0 8px}.detection-state h3{margin:17px 0 5px;font-size:18px}.detection-state p{margin:0;color:var(--muted)}.radar{position:relative;display:grid;place-items:center;width:82px;height:82px;margin:auto;border:1px solid #bcd8c7;border-radius:50%;background:var(--green-soft)}.radar::before,.radar::after{content:"";position:absolute;border:1px solid #cce1d4;border-radius:50%}.radar::before{inset:14px}.radar::after{inset:28px}.radar i{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 7px rgba(23,107,69,.12);z-index:1}.waiting-lines{display:flex;justify-content:center;gap:5px;margin:20px}.waiting-lines span{width:5px;height:5px;border-radius:50%;background:var(--green);animation:pulse 1s infinite}.waiting-lines span:nth-child(2){animation-delay:.2s}.waiting-lines span:nth-child(3){animation-delay:.4s}@keyframes pulse{50%{opacity:.25;transform:scale(.75)}}.success-mark{display:grid;place-items:center;width:70px;height:70px;margin:auto;border-radius:50%;background:var(--green-soft);color:var(--green);font-size:30px;font-weight:900}.success-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:20px 0}.success-summary div{padding:12px;border:1px solid var(--line);border-radius:8px;text-align:left}.success-summary small,.success-summary strong{display:block}.success-summary small{color:var(--muted);font-size:9px;text-transform:uppercase}.success-summary strong{margin-top:5px;font-size:11px}.connect-actions.centered{justify-content:center}
@media(max-width:600px){.connect-head,.connect-body{padding:18px}.connect-steps{padding:13px 18px}.connect-steps li{font-size:0}.connect-steps li span{font-size:11px}.connect-steps li.done span{font-size:0}.code-box{align-items:flex-start;gap:12px}.code-box strong{font-size:17px}.success-summary{grid-template-columns:1fr}.connect-actions{flex-wrap:wrap}.connect-actions .button{flex:1}}