/* =====================================================================
   Comptrusence, member app (dashboard) shell, reskinned to New design
   ===================================================================== */
.app-body{background:#F4F7FD;min-height:100vh;}
.app-topbar{
  position:sticky;top:0;z-index:50;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 22px;
}
.app-topbar .logo img{height:34px;background:#fff;border-radius:7px;padding:4px 6px;}
.app-topbar .tb-right{display:flex;align-items:center;gap:16px;font-size:13.5px;color:#C7D5EF;}
.app-topbar .tb-right a{color:#C7D5EF;}
.app-topbar .tb-right a:hover{color:#fff;}
.app-user{display:flex;align-items:center;gap:9px;}
.app-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--blue-bright));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;}

.app-shell{display:flex;align-items:stretch;}
.app-side{width:230px;flex-shrink:0;background:#fff;border-right:1px solid var(--line);min-height:calc(100vh - 58px);padding:18px 14px;}
.side-label{font-size:11px;color:#94a3b8;text-transform:uppercase;letter-spacing:.08em;padding:14px 10px 6px;font-weight:700;}
.side-link{display:flex;align-items:center;gap:10px;width:100%;border:none;background:none;text-align:left;color:var(--slate);border-radius:10px;padding:10px 12px;font-size:14px;font-weight:500;cursor:pointer;transition:background .15s,color .15s;}
.side-link i{font-size:16px;}
.side-link:hover{background:#F1F5FD;color:var(--navy);}
.side-link.active{background:var(--ice);color:var(--blue);font-weight:600;}
.app-main{flex:1;padding:28px 32px;min-width:0;}

.app-page{display:none;}
.app-page.active{display:block;}
.page-title{font-family:'Space Grotesk';font-size:24px;font-weight:600;margin-bottom:4px;}
.page-sub{color:var(--slate);font-size:14px;margin-bottom:24px;}

.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;}
.panel + .panel{margin-top:20px;}

/* scan input bar */
.scan-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.scan-bar input[type=url]{flex:1;min-width:240px;padding:13px 15px;border:1px solid var(--line);border-radius:12px;font-size:15px;font-family:inherit;color:var(--navy);}
.scan-bar input[type=url]:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,111,237,.12);}
.scan-bar select{padding:13px 14px;border:1px solid var(--line);border-radius:12px;font-size:14px;font-family:inherit;background:#fff;color:var(--navy);}
.consent-row{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--slate);margin-top:14px;}

/* progress */
.prog-wrap{margin-top:20px;display:none;}
.prog-bar{background:#EAF1FF;border-radius:100px;height:8px;overflow:hidden;}
.prog-fill{height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--blue-bright));border-radius:100px;transition:width .4s var(--ease);}
.prog-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.chip{font-size:12px;padding:4px 11px;border-radius:100px;background:#F1F5FD;border:1px solid var(--line);color:var(--slate);}
.chip.done{background:#F0FDF4;border-color:#BBF7D0;color:#166534;}
.chip.run{background:var(--ice);border-color:#BFDBFE;color:var(--blue);}

/* metric cards */
.metric-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px;}
.metric{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;}
.metric .mv{font-family:'Space Grotesk';font-size:28px;font-weight:700;line-height:1;}
.metric .ml{font-size:12px;color:var(--slate);margin-top:8px;text-transform:uppercase;letter-spacing:.05em;}
.metric.crit .mv{color:var(--crit);} .metric.high .mv{color:#d97706;}
.metric.med .mv{color:var(--blue);} .metric.low .mv{color:var(--ok);}

/* findings table */
.tbl{width:100%;border-collapse:collapse;margin-top:20px;font-size:13.5px;}
.tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line);background:#FAFCFF;}
.tbl td{padding:12px;border-bottom:1px solid #EEF3FB;vertical-align:top;color:var(--navy);}
.tbl tr:hover td{background:#FAFCFF;}
.badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:6px;}
.badge-critical{background:#FEF2F2;color:#991B1B;}
.badge-high{background:#FFFBEB;color:#92400E;}
.badge-medium{background:#EFF6FF;color:#1E40AF;}
.badge-low{background:#F0FDF4;color:#166534;}
.badge-info{background:#F1F5F9;color:#475569;}

/* diagram studio */
.studio{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch;}
.studio textarea{width:100%;min-height:320px;border:1px solid var(--line);border-radius:12px;padding:14px;font-family:'Courier New',monospace;font-size:13px;line-height:1.6;color:var(--navy);resize:vertical;}
.studio textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,111,237,.12);}
.diagram-out{border:1px solid var(--line);border-radius:12px;background:#fff;padding:16px;overflow:auto;display:flex;align-items:center;justify-content:center;min-height:320px;}
.diag-error{color:var(--crit);font-size:12.5px;margin-top:10px;padding:8px 12px;background:#FEF2F2;border:1px solid #FECACA;border-radius:8px;}

/* AI chat */
.ai-panel{margin-top:20px;border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.ai-head{display:flex;align-items:center;gap:9px;padding:12px 16px;background:#FAFCFF;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:600;}
.ai-head .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);}
.ai-msgs{padding:14px;display:flex;flex-direction:column;gap:10px;max-height:260px;overflow-y:auto;}
.ai-msg{padding:9px 13px;border-radius:10px;font-size:13px;line-height:1.55;max-width:90%;white-space:pre-wrap;}
.ai-user{align-self:flex-end;background:var(--ice);color:#1E40AF;border:1px solid #BFDBFE;}
.ai-bot{align-self:flex-start;background:#FAFCFF;color:var(--navy);border:1px solid var(--line);}
.ai-input{display:flex;gap:10px;padding:12px 14px;border-top:1px solid var(--line);background:#FAFCFF;}
.ai-input input{flex:1;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font-size:14px;font-family:inherit;}
.ai-input input:focus{outline:none;border-color:var(--blue);}

.empty{text-align:center;padding:40px 16px;color:#94a3b8;font-size:13.5px;}
.empty i{font-size:30px;display:block;margin-bottom:10px;color:#CBD5E1;}

/* ===================================================================
   OVERVIEW / richer dashboard components
   =================================================================== */
.app-topbar .tb-left{display:flex;align-items:center;gap:14px;}
.tb-search{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:100px;padding:7px 14px;color:#9FB2D6;font-size:13px;min-width:230px;}
.tb-search input{background:none;border:none;outline:none;color:#fff;font-family:inherit;font-size:13px;flex:1;}
.tb-search input::placeholder{color:#7C90B6;}
.side-badge{margin-left:auto;font-size:10px;font-weight:700;background:#F0FDF4;color:#166534;border-radius:100px;padding:2px 7px;}
.side-badge.blue{background:var(--ice);color:var(--blue);}
.side-foot{margin-top:auto;padding:14px 12px 4px;border-top:1px solid var(--line);}
.app-side{display:flex;flex-direction:column;}

.greet{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:14px;margin-bottom:22px;}
.greet h1{font-family:'Space Grotesk';font-size:26px;font-weight:600;}
.greet p{color:var(--slate);font-size:14px;margin-top:4px;}

/* gradient stat cards */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.stat-card{border-radius:16px;padding:18px 20px;color:#fff;position:relative;overflow:hidden;min-height:118px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 12px 26px -18px rgba(20,50,110,.5);}
.stat-card .si{position:absolute;top:14px;right:16px;font-size:22px;opacity:.5;}
.stat-card .sv{font-family:'Space Grotesk';font-size:32px;font-weight:700;line-height:1;}
.stat-card .sl{font-size:12.5px;opacity:.9;margin-top:6px;}
.stat-card .sd{font-size:11.5px;opacity:.8;margin-top:8px;display:inline-flex;align-items:center;gap:5px;}
.sc-blue{background:linear-gradient(135deg,#2F6FED,#5B93FF);}
.sc-navy{background:linear-gradient(135deg,#0E2A54,#1E4C8A);}
.sc-green{background:linear-gradient(135deg,#059669,#10B981);}
.sc-amber{background:linear-gradient(135deg,#D97706,#F59E0B);}

.grid-2col{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;margin-top:18px;align-items:start;}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.panel-head h3{font-family:'Space Grotesk';font-size:16px;font-weight:600;}
.panel-head a{font-size:12.5px;color:var(--blue);font-weight:600;}

/* donut (conic gradient) */
.donut-wrap{display:flex;align-items:center;gap:22px;}
.donut{width:150px;height:150px;border-radius:50%;flex-shrink:0;position:relative;background:conic-gradient(var(--crit) 0 var(--a),#d97706 var(--a) var(--b),var(--blue) var(--b) var(--c),var(--ok) var(--c) 100%);}
.donut::after{content:"";position:absolute;inset:20px;border-radius:50%;background:#fff;}
.donut .dc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2;}
.donut .dc b{font-family:'Space Grotesk';font-size:26px;font-weight:700;}
.donut .dc span{font-size:11px;color:var(--slate);}
.legend{display:flex;flex-direction:column;gap:9px;font-size:13px;}
.legend .lg{display:flex;align-items:center;gap:8px;}
.legend .sw{width:11px;height:11px;border-radius:3px;flex-shrink:0;}

/* activity feed */
.feed{display:flex;flex-direction:column;}
.feed-item{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid #EEF3FB;}
.feed-item:last-child{border-bottom:none;}
.feed-ic{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:15px;}
.fi-blue{background:var(--ice);color:var(--blue);} .fi-green{background:#F0FDF4;color:#166534;} .fi-amber{background:#FFFBEB;color:#92400E;}
.feed-item .ft{font-size:13.5px;color:var(--navy);font-weight:500;}
.feed-item .fs{font-size:12px;color:var(--slate);margin-top:2px;}
.feed-item .fx{margin-left:auto;font-size:11.5px;color:#94a3b8;white-space:nowrap;}

/* quick actions */
.qa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px;}
.qa{border:1px solid var(--line);border-radius:14px;padding:18px;background:#fff;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s,border-color .2s;text-align:left;display:block;}
.qa:hover{transform:translateY(-4px);box-shadow:0 16px 30px -20px rgba(20,50,110,.35);border-color:transparent;}
.qa i{font-size:22px;color:var(--blue);}
.qa h4{font-size:15px;font-weight:600;margin:10px 0 5px;font-family:'Space Grotesk';}
.qa p{font-size:12.5px;color:var(--slate);line-height:1.5;}

/* severity focus cards on the scanner */
.focus-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px;}
.focus{border-radius:14px;overflow:hidden;color:#fff;box-shadow:0 10px 24px -18px rgba(20,50,110,.5);}
.focus .fh{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;font-size:12.5px;font-weight:600;}
.focus .fb{background:#fff;color:var(--navy);padding:12px 15px;font-family:'Space Grotesk';font-size:26px;font-weight:700;}
.fg-crit{background:linear-gradient(135deg,#ef4444,#b91c1c);} .fg-high{background:linear-gradient(135deg,#fb923c,#d97706);}
.fg-med{background:linear-gradient(135deg,#3b82f6,#2563eb);} .fg-low{background:linear-gradient(135deg,#10b981,#059669);}

/* ===================================================================
   Shared tool forms (lab checker, breach, ssl, dns)
   =================================================================== */
.tool-form{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;}
.tool-field{flex:1;min-width:200px;}
.tool-field.grow2{flex:2;min-width:260px;}
.tool-field label{display:block;font-size:12.5px;font-weight:600;color:var(--navy-2);margin-bottom:6px;}
.tool-field input,.tool-field select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-size:14px;font-family:inherit;background:#fff;color:var(--navy);}
.tool-field input:focus,.tool-field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,111,237,.12);}
.tool-hint{font-size:12.5px;color:var(--slate);margin-top:12px;display:flex;align-items:center;gap:7px;}
.tool-err{display:none;margin-top:14px;background:#FEF2F2;border:1px solid #FECACA;color:#991B1B;border-radius:10px;padding:10px 14px;font-size:13px;}

/* lab checker: pass/fail check rows + tally */
.tally{display:flex;justify-content:space-between;align-items:center;margin:6px 0 10px;font-size:13.5px;}
.tally b{font-family:'Space Grotesk';font-weight:600;}
.check-row{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px;background:#fff;transition:border-color .2s;}
.check-row .cr-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;}
.check-step{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--blue);}
.check-row h4{font-size:14.5px;font-weight:600;margin:3px 0;}
.check-row .cr-detail{font-size:13px;color:var(--slate);min-height:2px;}
.check-hint{margin-top:10px;background:#FFFBEB;border-left:3px solid #F59E0B;border-radius:6px;padding:9px 13px;font-size:12.5px;color:var(--navy);line-height:1.5;}
.stamp{flex-shrink:0;font-size:11px;font-weight:700;padding:5px 11px;border-radius:100px;letter-spacing:.04em;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;}
.stamp-wait{background:#F1F5F9;color:#94a3b8;} .stamp-pass{background:#F0FDF4;color:#166534;} .stamp-fail{background:#FEF2F2;color:#991B1B;}

/* key/value result lists (ssl, dns) */
.kv-list{display:flex;flex-direction:column;}
.kv{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid #EEF3FB;font-size:13.5px;}
.kv:last-child{border-bottom:none;}
.kv .k{width:170px;flex-shrink:0;color:var(--slate);font-weight:500;}
.kv .v{color:var(--navy);word-break:break-word;}
.grade{display:inline-flex;align-items:center;justify-content:center;width:66px;height:66px;border-radius:16px;font-family:'Space Grotesk';font-size:30px;font-weight:700;color:#fff;flex-shrink:0;}
.grade-a{background:linear-gradient(135deg,#10b981,#059669);} .grade-b{background:linear-gradient(135deg,#3b82f6,#2563eb);}
.grade-c{background:linear-gradient(135deg,#f59e0b,#d97706);} .grade-f{background:linear-gradient(135deg,#ef4444,#b91c1c);}
.status-line{display:flex;align-items:center;gap:8px;font-size:13.5px;padding:9px 0;border-bottom:1px solid #EEF3FB;}
.status-line:last-child{border-bottom:none;}
.status-line i{font-size:16px;} .s-ok i{color:var(--ok);} .s-warn i{color:var(--warn);} .s-bad i{color:var(--crit);}
.status-line .sn{font-weight:500;} .status-line .sx{margin-left:auto;color:var(--slate);font-size:12.5px;}

/* ===================================================================
   Scanner: tabs + urlscan-style page analysis
   =================================================================== */
.scan-tabs{display:flex;gap:8px;margin:22px 0 4px;}
.scan-tab{border:1px solid var(--line);background:#fff;color:var(--slate);border-radius:100px;
  padding:8px 18px;font-size:13.5px;font-weight:600;cursor:pointer;transition:all .15s;}
.scan-tab:hover{color:var(--navy);}
.scan-tab.active{background:var(--ice);color:var(--blue);border-color:#BFDBFE;}

.pa-top{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;align-items:start;}
.pa-shot{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#0b1220;}
.pa-shot img{width:100%;display:block;}
.pa-shot .cap{padding:8px 12px;font-size:12px;color:var(--slate);background:#fff;border-top:1px solid var(--line);word-break:break-all;}
.pa-meta{display:flex;flex-direction:column;gap:10px;}
.pa-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.pa-stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;}
.pa-stat b{font-family:'Space Grotesk';font-size:22px;font-weight:700;display:block;line-height:1;}
.pa-stat span{font-size:11.5px;color:var(--slate);text-transform:uppercase;letter-spacing:.04em;margin-top:6px;display:block;}
.pa-stat.warn b{color:var(--warn);} .pa-stat.bad b{color:var(--crit);}
.chip-set{display:flex;flex-wrap:wrap;gap:6px;}
.chip-tag{font-size:11.5px;font-weight:600;background:var(--ice);color:var(--navy-2);border-radius:100px;padding:4px 11px;}
.chip-tag.tk{background:#FFFBEB;color:#92400E;}
.redir{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;}
.redir .hop{background:#FAFCFF;border:1px solid var(--line);border-radius:8px;padding:5px 10px;word-break:break-all;max-width:100%;}
.redir .code{font-weight:700;margin-right:6px;}
.redir .arrow{color:#94a3b8;}
.dom-row td .tp{font-size:10.5px;font-weight:700;background:var(--ice);color:var(--blue);border-radius:100px;padding:1px 7px;margin-left:6px;}
.dom-row td .tk2{font-size:10.5px;font-weight:700;background:#FFFBEB;color:#92400E;border-radius:100px;padding:1px 7px;margin-left:6px;}
.rt-bar{height:8px;border-radius:100px;background:var(--blue);}
.pa-note{font-size:12.5px;color:var(--slate);margin-top:6px;}

@media(max-width:860px){ .pa-top{grid-template-columns:1fr;} }

@media(max-width:960px){
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .grid-2col{grid-template-columns:1fr;}
  .qa-grid{grid-template-columns:1fr;}
  .focus-row{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:860px){
  .app-side{position:fixed;left:-260px;top:58px;bottom:0;z-index:200;transition:left .25s ease;box-shadow:6px 0 24px rgba(7,28,60,.25);}
  .app-side.open{left:0;}
  .app-main{padding:18px;}
  .studio{grid-template-columns:1fr;}
  .metric-row{grid-template-columns:repeat(2,1fr);}
  .tb-search{display:none;}
  .side-toggle{display:inline-flex !important;}
}
.side-toggle{display:none;background:none;border:none;color:#fff;font-size:20px;cursor:pointer;}

.side-legal{margin-top:14px;padding:10px 14px;font-size:11.5px;line-height:1.5;color:var(--slate);opacity:.8;}