
:root{
  --ink:#17131a;--muted:#6c6470;--paper:#f7f4f6;--card:#fff;--line:#e6dde2;
  --accent:#0B7480;--accent2:#095F68;--soft:#E8F6F7;--ok:#166534;--warn:#92400e;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif}
body{min-height:100vh}
.p17-shell{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}
.mdl-sidebar{min-width:0}
.p17-main{min-width:0;width:100%;padding:22px 28px 72px}
.p17-hero{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;padding:26px 0 22px;border-bottom:3px solid var(--accent)}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--accent)}
h1{font-family:Georgia,serif;font-size:42px;line-height:1.02;margin:8px 0 12px;max-width:900px}
h2{font-family:Georgia,serif;margin:0 0 4px}
p{line-height:1.55}
.hero-actions,.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{border:1px solid var(--accent);border-radius:3px;padding:10px 14px;font-weight:700;cursor:pointer;background:#fff;color:var(--accent)}
.btn.primary{background:var(--accent);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed}
.notice{margin:18px 0;padding:12px 14px;border-left:4px solid var(--accent);background:#fff}
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:20px;margin:18px 0}
.section-title{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}
.step{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;flex:0 0 28px}
.grid{display:grid;gap:12px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:13px}
input,select,textarea{width:100%;border:1px solid #d9cdd3;border-radius:3px;padding:10px;font:inherit;background:#fff;color:var(--ink)}
textarea{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;resize:vertical}
.check{flex-direction:row;align-items:center;padding-top:29px}.check input{width:auto}
.site{border:1px solid var(--line);border-radius:5px;padding:14px;margin:12px 0;background:#fcfafb}
.site-head{display:flex;justify-content:space-between;gap:12px;align-items:center}
.variant{border-top:1px dashed var(--line);padding-top:12px;margin-top:12px}
.variant-head{display:flex;justify-content:space-between;gap:8px;align-items:center}
.small{font-size:12px;color:var(--muted)}
.status{padding:12px;background:#f8f5f6;border:1px solid var(--line);border-radius:4px}
.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}
.metric{background:#faf7f8;border:1px solid var(--line);padding:12px;border-radius:4px}
.metric b{display:block;font-size:22px}
.result-card{border:1px solid var(--line);border-radius:5px;padding:14px;margin:12px 0}
.result-head{display:flex;justify-content:space-between;gap:10px;align-items:center}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:var(--soft);color:var(--accent);font-size:12px;font-weight:800}
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:620px}
th,td{text-align:left;border-bottom:1px solid var(--line);padding:8px;font-size:13px;vertical-align:top}
.seq{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;word-break:break-all;background:#f7f5f6;padding:8px;border-radius:3px;font-size:12px}
.score{font-weight:900;color:var(--ok)}
.warn{color:var(--warn)}
.remove{border:none;background:transparent;color:#a11;cursor:pointer;font-weight:800}
@media(max-width:900px){
  .p17-shell{grid-template-columns:minmax(0,1fr)}
  .p17-main{grid-column:1;width:100%;padding:16px 12px 64px}
  .p17-hero{flex-direction:column}
  h1{font-size:clamp(30px,9vw,40px)}
  .grid.two,.grid.three,.summary-grid{grid-template-columns:minmax(0,1fr)}
  .check{padding-top:0}
}
