@import "/infinet/styles.css";

:root{
  --ink:var(--neutral-900);
  --muted:var(--neutral-600);
  --line:var(--neutral-200);
  --bg:#f7f7f7;
  --card:#fff;
  --accent:var(--indigo-700);
  --accent-hover:var(--indigo-600);
  --accent-ink:#fff;
  --danger:var(--red-500);
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--ink);
  font-size:15px;
  line-height:1.6;
}
a{color:var(--accent);text-decoration:none;font-weight:650}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--yellow-400);outline-offset:3px}

.topnav{
  background:#fff;
  border-bottom:1px solid var(--line);
  border-top:4px solid var(--indigo-700);
  padding:0 24px;
  display:flex;
  align-items:center;
  gap:24px;
  min-height:72px;
  position:sticky;
  top:0;
  z-index:5;
  box-shadow:var(--shadow-sm);
}
.topnav .brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:210px;
}
.topnav .brand img{width:132px;height:auto;display:block}
.topnav .product{
  border-left:1px solid var(--line);
  padding-left:14px;
  color:var(--indigo-700);
  font-size:13px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
}
.topnav nav{display:flex;gap:20px;font-size:13px;letter-spacing:.09em;text-transform:uppercase}
.topnav nav a{color:var(--neutral-700);padding:24px 0 20px;border-bottom:4px solid var(--yellow-400)}
.topnav .spacer{margin-left:auto}
.topnav button.link{border:none;background:none;color:var(--muted);font:700 13px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;padding:8px 0}
.topnav button.link:hover{color:var(--indigo-700)}

main{max-width:1200px;margin:32px auto 80px;padding:0 24px}
.page-head{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.page-head h1{
  font-size:30px;
  line-height:1.15;
  margin:0;
  color:var(--indigo-700);
  letter-spacing:0;
}
.page-head h1:after{
  content:"";
  display:block;
  width:64px;
  height:4px;
  background:var(--yellow-400);
  margin-top:10px;
}
.page-head .right{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
}
.card .pad{padding:22px 24px}
table.list{width:100%;border-collapse:collapse;font-size:14px}
table.list th{
  text-align:left;
  font-weight:800;
  color:var(--neutral-600);
  padding:14px 16px;
  border-bottom:2px solid var(--line);
  font-size:12px;
  letter-spacing:.09em;
  text-transform:uppercase;
}
table.list td{padding:14px 16px;border-bottom:1px solid var(--neutral-100);vertical-align:middle}
table.list tr:last-child td{border-bottom:none}
table.list tr.rowlink{cursor:pointer}
table.list tr.rowlink:hover{background:var(--indigo-50)}
.empty{padding:54px 28px;text-align:center;color:var(--muted)}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 18px}
.metric{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:15px 17px;min-height:82px}
.metric span{display:block;color:var(--neutral-600);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;line-height:1.25}
.metric strong{display:block;color:var(--indigo-700);font-size:25px;line-height:1.1;margin-top:9px}

.badge{
  display:inline-block;
  padding:4px 11px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  text-transform:capitalize;
  border:1px solid transparent;
}
.badge.draft,.badge.pending{background:var(--neutral-100);color:var(--neutral-700);border-color:var(--neutral-200)}
.badge.sent,.badge.invited,.badge.viewed{background:var(--indigo-50);color:var(--indigo-700);border-color:var(--indigo-100)}
.badge.signed{background:var(--green-50);color:var(--green-500);border-color:#bfe8d7}
.badge.expired{background:var(--red-50);color:var(--red-500);border-color:#f0c3c3}
.badge.in_review,.badge.commented{background:var(--indigo-50);color:var(--indigo-700);border-color:var(--indigo-100)}
.badge.changes_requested{background:var(--yellow-50);color:#6b6500;border-color:var(--yellow-300)}
.badge.approved,.badge.transferred{background:var(--green-50);color:var(--green-500);border-color:#bfe8d7}

label.f{display:grid;gap:7px;font-size:13px;color:var(--neutral-700);font-weight:750;margin-bottom:15px}
input[type=text],input[type=email],input[type=date],input[type=password],select,textarea{
  font:15px var(--font-sans);
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  outline:none;
  width:100%;
  background:#fff;
  color:var(--ink);
}
input:focus,textarea:focus{border-color:var(--indigo-500);box-shadow:var(--shadow-focus)}
select:focus{border-color:var(--indigo-500);box-shadow:var(--shadow-focus)}
textarea.code{font-family:var(--font-mono);font-size:13px;min-height:300px;resize:vertical;line-height:1.5}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.grid3{display:grid;grid-template-columns:1fr 1fr 160px;gap:0 18px}
.compact-controls{display:grid;grid-template-columns:1fr 180px auto auto;gap:12px;align-items:end}
.compact-controls label.f{margin-bottom:0}
.checkline{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--neutral-700);font-weight:750;min-height:40px}
.checkline input{width:16px;height:16px;accent-color:var(--indigo-600)}
@media(max-width:760px){.grid2{grid-template-columns:1fr}.topnav{align-items:flex-start;flex-direction:column;padding:14px 18px}.topnav .spacer{display:none}.topnav nav a{padding:4px 0 8px}.page-head{align-items:flex-start;flex-direction:column}.page-head .right{margin-left:0}}
@media(max-width:900px){.grid3,.compact-controls{grid-template-columns:1fr}}
@media(max-width:760px){.metrics{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.metrics{grid-template-columns:1fr}}
.security-metrics{grid-template-columns:repeat(6,minmax(0,1fr))}
.security-metrics .metric strong{font-size:23px}
.ops-band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:4px solid var(--indigo-700);border-bottom:1px solid var(--line);background:#fff}
.ops-band>div{padding:15px 18px;border-right:1px solid var(--line)}
.ops-band>div:nth-child(3n){border-right:0}
.ops-band>div:nth-child(n+4){border-top:1px solid var(--line)}
.ops-band span{display:block;color:var(--neutral-600);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.ops-band strong{display:block;color:var(--indigo-700);font-size:14px;margin-top:4px;overflow-wrap:anywhere}
.security-toolbar{display:flex;align-items:end;gap:24px;border-bottom:1px solid var(--line)}
.security-toolbar>div:first-child{flex:1}.security-toolbar p{margin:3px 0 0;font-size:13px}.security-toolbar label{width:240px;margin:0}
.table-scroll{overflow-x:auto}.badge.security-event{background:var(--neutral-100);color:var(--indigo-700);border-color:var(--neutral-200);white-space:nowrap}
@media(max-width:1000px){.security-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.security-metrics,.ops-band{grid-template-columns:1fr 1fr}.ops-band>div,.ops-band>div:nth-child(3n){border-right:1px solid var(--line)}.ops-band>div:nth-child(2n){border-right:0}.ops-band>div:nth-child(n+3){border-top:1px solid var(--line)}.security-toolbar{align-items:stretch;flex-direction:column}.security-toolbar label{width:100%}}
@media(max-width:440px){.security-metrics,.ops-band{grid-template-columns:1fr}.ops-band>div{border-right:0!important}.ops-band>div:nth-child(n+2){border-top:1px solid var(--line)}}

button.primary,button.secondary,button.danger{
  font:800 13px var(--font-sans);
  letter-spacing:.08em;
  text-transform:uppercase;
  border-radius:var(--radius-md);
  padding:10px 18px;
  cursor:pointer;
  border:1px solid transparent;
  min-height:40px;
  transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard);
}
button.primary{background:var(--yellow-400);color:var(--indigo-800);border-color:var(--yellow-400)}
button.primary:hover{background:var(--yellow-500);border-color:var(--yellow-500)}
button.primary:disabled{background:var(--neutral-200);border-color:var(--neutral-200);color:var(--neutral-500);cursor:default}
button.secondary{background:#fff;color:var(--indigo-700);border-color:var(--indigo-200)}
button.secondary:hover{background:var(--indigo-700);border-color:var(--indigo-700);color:#fff}
button.danger{background:#fff;color:var(--danger);border-color:#f0c3c3}
button.danger:hover{background:var(--red-500);color:#fff;border-color:var(--red-500)}
button.small{padding:6px 12px;font-size:12px;min-height:32px}
button:active{transform:translateY(1px)}

.msg{font-size:13.5px;margin-top:10px}
.msg.err{color:var(--danger)}
.msg.ok{color:var(--green-500)}
.muted{color:var(--muted)}
.mono{font-family:var(--font-mono);font-size:12.5px}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px}
.tabs button{font:800 13px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;border:none;background:none;color:var(--muted);padding:12px 16px;cursor:pointer;border-bottom:4px solid transparent;margin-bottom:-1px}
.tabs button.active{color:var(--indigo-700);border-bottom-color:var(--yellow-400)}

.preview-frame{width:100%;height:75vh;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff;display:block}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:180px 1fr;gap:14px;padding:12px 4px;border-bottom:1px solid var(--neutral-100);font-size:14px}
.timeline li:last-child{border-bottom:none}
.timeline .t{color:var(--muted);font-size:13px;white-space:nowrap}
.timeline .e strong{text-transform:capitalize;color:var(--indigo-700)}
.timeline .meta{color:var(--muted);font-size:12.5px;margin-top:2px}

.copyrow{display:flex;gap:8px;align-items:center;margin-top:6px}
.copyrow input{flex:1;font-size:12.5px;font-family:var(--font-mono);color:var(--muted)}

.insertbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.insertbar .muted{font-size:13px}
.status-rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0 0 18px}
.status-step{border:1px solid var(--neutral-200);background:#fff;border-radius:var(--radius-md);padding:10px 12px}
.status-step strong{display:block;color:var(--neutral-700);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.status-step span{display:block;color:var(--neutral-500);font-size:12.5px;margin-top:2px}
.status-step.done{border-color:#bfe8d7;background:var(--green-50)}
.status-step.done strong{color:var(--green-500)}
.email-template{font-family:var(--font-mono);font-size:12.5px;min-height:120px;margin-top:10px}
.section-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}.section-head strong:first-child{margin-right:auto}
.review-rail{grid-template-columns:repeat(4,minmax(0,1fr))}
.review-workspace{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.review-side{display:grid;gap:0;position:sticky;top:92px}
.simple-list{list-style:none;margin:10px 0 0;padding:0}.simple-list li{padding:10px 0;border-bottom:1px solid var(--neutral-100)}.simple-list li:last-child{border-bottom:0}.simple-list strong,.simple-list span{display:block}.simple-list span{font-size:12.5px;color:var(--muted);margin-top:2px}
.comment{border:1px solid var(--line);border-left:4px solid var(--yellow-400);padding:14px 16px;margin:0 0 10px;background:#fff}.comment.resolved{border-left-color:var(--green-500);background:var(--neutral-50)}.comment-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.comment-head .muted{margin-left:auto;font-size:12px}.comment-ref{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--indigo-700);margin-top:8px}.comment p{margin:8px 0;white-space:pre-wrap}.comment-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px}
.handoff-actions{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.handoff-item{border-top:1px solid var(--line);padding:14px 0;display:grid;gap:8px}.handoff-item>div:first-child{display:flex;align-items:center;gap:10px}.handoff-update{display:flex;gap:8px}.handoff-track{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.handoff-track span{border-top:4px solid var(--indigo-200);padding-top:7px;font-size:12px;font-weight:800;color:var(--neutral-600);text-align:center;text-transform:uppercase}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:20;background:var(--neutral-900);color:#fff;padding:10px 18px;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);font-size:13px}
@media(max-width:820px){.status-rail{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.status-rail{grid-template-columns:1fr}}
@media(max-width:940px){.review-workspace{grid-template-columns:1fr}.review-side{position:static}}

.html-editor-shell{border:1px solid var(--line);border-radius:var(--radius-md);background:#fff;overflow:hidden}
.html-editor-toolbar{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:9px;background:var(--neutral-50);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2}
.html-editor-toolbar select{width:auto;min-width:130px;padding:7px 9px;font-size:13px}
.html-editor-toolbar button{font:700 12px var(--font-sans);min-height:34px;padding:6px 9px;border:1px solid var(--neutral-200);border-radius:6px;background:#fff;color:var(--indigo-700);cursor:pointer}
.html-editor-toolbar button:hover{border-color:var(--indigo-300);background:var(--indigo-50)}
.html-editor-toolbar button:disabled,.html-editor-toolbar select:disabled{opacity:.55;cursor:default}
.html-editor-divider{height:24px;width:1px;background:var(--neutral-200);margin:0 3px}
.html-editor-frame{display:block;width:100%;height:68vh;min-height:480px;border:0;background:#fff}
.html-editor-help{padding:8px 12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.html-editor-shell.is-dirty .html-editor-help:before{content:"Unsaved changes · ";font-weight:800;color:var(--red-500)}
.editor-actions{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin-top:12px}
.editor-actions label{flex:1;min-width:260px;margin:0}
.editor-actions .msg{width:100%;margin:0}
@media(max-width:620px){.html-editor-divider{display:none}.html-editor-frame{min-height:380px;height:65vh}.editor-actions{align-items:stretch;flex-direction:column}.editor-actions label{width:100%;min-width:0}}

.login-wrap{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    linear-gradient(90deg,rgba(46,52,148,.94),rgba(46,52,148,.74)),
    url("/infinet/assets/photo-network.jpg") center/cover;
}
.login-card{
  width:min(420px,100%);
  background:#fff;
  border:1px solid rgba(255,255,255,.55);
  border-radius:var(--radius-md);
  padding:34px 36px;
  box-shadow:var(--shadow-lg);
}
.login-card img{width:150px;height:auto;margin-bottom:24px}
.login-card h1{font-size:25px;line-height:1.2;margin:0 0 6px;color:var(--indigo-700);letter-spacing:0}
.login-card h1:after{content:"";display:block;width:56px;height:4px;background:var(--yellow-400);margin-top:10px}
.login-card p{color:var(--muted);font-size:14px;margin:0 0 22px}
.microsoft-signin{display:block;text-align:center;text-decoration:none;width:100%;box-sizing:border-box;margin-bottom:18px}
.login-divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;margin:4px 0 18px}
.login-divider:before,.login-divider:after{content:"";height:1px;background:var(--line);flex:1}