:root { --ink:#153137; --muted:#687c80; --bg:#f1f5f3; --paper:#fff; --line:#dce7e2; --forest:#17685d; --forest-dark:#10544b; --accent:#e5ae63; --pale:#e8f3ed; --danger:#a53d3d; --shadow:0 14px 40px rgba(14,46,43,.07); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--bg); font:15px/1.53 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
a { color:var(--forest); }
.hidden { display:none!important; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:20px; background:#102b30; color:#f7fbf8; padding:15px clamp(18px,4vw,62px); }
.brand { display:flex; align-items:center; gap:11px; font-size:21px; font-weight:750; letter-spacing:-.6px; }
.brand-icon { width:37px; height:37px; background:#2c7b6d; border-radius:11px; display:grid; place-items:center; box-shadow:inset 0 0 0 1px #6caba1; }
.brand-icon svg { width:25px; }
.top-hint { color:#b8ccc9; font-size:12px; }
.shell { max-width:1510px; margin:auto; display:grid; grid-template-columns:270px minmax(0,1fr); gap:28px; padding:28px clamp(18px,4vw,62px) 60px; }
.sidebar { min-width:0; }
.sidebar-inner { position:sticky; top:24px; }
.side-title { font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:#81938f; font-weight:800; margin:19px 12px 10px; }
.nav-btn { width:100%; text-align:left; padding:12px 14px; display:flex; align-items:center; gap:12px; color:var(--ink); background:transparent; border:0; border-radius:11px; font-weight:650; }
.nav-btn:hover,.nav-btn.active { background:#dcebe4; color:#12594d; }
.nav-btn .symbol { font-size:18px; opacity:.85; }
.project-link { text-align:left; display:block; width:100%; border:1px solid transparent; border-radius:12px; padding:10px 12px; margin-bottom:4px; background:transparent; color:var(--ink); }
.project-link strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:13px; }
.project-link small { display:block; color:var(--muted); margin-top:3px; }
.project-link.active { background:white; border-color:var(--line); box-shadow:0 5px 18px rgba(15,50,44,.05); }
.side-footer { padding:16px 13px; background:#e2ece5; border-radius:13px; margin-top:20px; font-size:12px; color:#547066; }
.main { min-width:0; }
.eyebrow { font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:11px; color:#4f867a; }
h1 { font-size:clamp(28px,3.3vw,43px); letter-spacing:-1.7px; line-height:1.12; margin:9px 0 12px; }
h2 { font-size:22px; letter-spacing:-.6px; margin:0 0 14px; }
h3 { font-size:17px; margin:0 0 9px; }
p { margin:8px 0 15px; }
.muted { color:var(--muted); }
.tiny { font-size:12px; }
.lead { font-size:16px; color:#607477; max-width:730px; }
.hero { padding:32px 34px; background:linear-gradient(120deg,#fdfefe 0%,#f9fcfa 60%,#e8f4ed 100%); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); margin-bottom:24px; }
.hero-grid { display:grid; grid-template-columns:1fr auto; align-items:center; gap:26px; }
.hero-art { width:150px;height:120px; display:grid;place-items:center; border-radius:19px; background:#d5e9de; }
.hero-art svg { width:105px; }
.btn { border:1px solid transparent; border-radius:10px; padding:11px 16px; font-weight:700; display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:43px; transition:.15s; text-decoration:none; }
.btn:hover { transform:translateY(-1px); }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.btn-primary { background:var(--forest); color:white; }
.btn-primary:hover { background:var(--forest-dark); }
.btn-secondary { background:#e2efe8; color:#185d50; border-color:#cce0d3; }
.btn-ghost { background:white; color:var(--ink); border-color:var(--line); }
.btn-danger { background:#fff6f5;color:var(--danger);border-color:#f0d7d3; }
.btn-sm { min-height:34px; padding:7px 11px; font-size:12px; }
.actions { display:flex;flex-wrap:wrap;align-items:center;gap:9px; }
.grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.grid3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.card { background:var(--paper); border:1px solid var(--line); border-radius:17px; padding:24px; box-shadow:var(--shadow); min-width:0; }
.card + .card { margin-top:18px; }
.choice { text-align:left; width:100%; border:1px solid var(--line); background:white; border-radius:15px; padding:22px; color:var(--ink); min-height:155px; }
.choice:hover { border-color:#519b89; box-shadow:0 8px 20px #194c3720; }
.choice .choice-icon { width:44px;height:44px;border-radius:12px;background:#e0f0e6;display:grid;place-items:center;font-size:24px;margin-bottom:13px; }
.choice strong { display:block; font-size:18px; margin-bottom:4px; }
.choice small { color:var(--muted); display:block; line-height:1.5; }
.notice { border-radius:12px; padding:14px 16px; background:#fff7e8; border:1px solid #eedbb2; color:#66552f; font-size:13px; margin:17px 0; }
.notice-blue { background:#edf5f4; border-color:#cde3dd; color:#315c56; }
.metric { background:white; border:1px solid var(--line); border-radius:13px;padding:18px; }
.metric strong {display:block;font-size:26px;letter-spacing:-.7px;}
.metric small { color:var(--muted); }
.back {background:none;border:0;color:var(--forest);font-weight:700;padding:0;margin-bottom:13px;}
.header-row { display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap; }
.pill { display:inline-flex;align-items:center;border-radius:30px;padding:4px 10px;background:#e4f0e9;color:#23594f;font-size:12px;font-weight:700;white-space:nowrap; }
.pill.gold { background:#fff2dc;color:#936222; }
.tabs { display:flex;gap:7px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:20px 0 22px; }
.tab { background:none;border:0;border-bottom:3px solid transparent;padding:12px 17px;color:#6f8583;font-weight:700; }
.tab.active {border-color:#24776b;color:#155c52;}
.field { display:block; margin-bottom:16px; }
.field > span,.field-label {display:block;font-size:12px;letter-spacing:.01em;font-weight:750;color:#4c6463;margin-bottom:6px;}
.input {border:1px solid #cfdcd6;border-radius:10px;min-height:43px;padding:10px 12px;width:100%;background:#fff;color:var(--ink);outline:0;}
.input:focus {border-color:#2c8e7a;box-shadow:0 0 0 3px #2c8e7a22;}
textarea.input { min-height:105px;resize:vertical; }
.fieldset {border:0;padding:0;margin:0;}
.fieldset legend {font-weight:800;font-size:16px;margin-bottom:15px;}
.inline-small {max-width:160px;}
.photo-layout { display:grid;grid-template-columns:245px minmax(0,1fr); gap:17px; }
.photo-list { max-height:610px;overflow-y:auto; }
.photo-tile { display:flex;gap:9px;text-align:left;padding:8px;width:100%;border:1px solid var(--line);background:#fff;border-radius:11px;margin-bottom:8px;align-items:center;color:var(--ink);}
.photo-tile.active {outline:2px solid #328570;}
.photo-tile img { width:59px;height:56px;object-fit:cover;border-radius:7px; }
.photo-tile strong {font-size:12px;display:block;}
.photo-tile small {display:block;color:var(--muted);font-size:11px;}
.canvas-wrap {border-radius:13px;background:#1d2e2d;padding:12px;position:relative;min-height:180px;display:grid;place-items:center;}
.canvas-wrap canvas { display:block;width:auto;height:auto;max-width:100%;max-height:560px;object-fit:contain;touch-action:manipulation;cursor:crosshair; }
.surface-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:14px 0 20px;}
.surface {padding:12px;background:#fafcfb;border:1px solid var(--line);border-radius:10px;font-size:12px;}
.surface strong {display:block;margin-bottom:3px;}
.surface .ok {color:#147250;}
.surface .missing {color:#8b744f;}
.measure-strip {padding:15px;background:#f3f8f4;border-radius:11px;border:1px solid #dfe9df;margin:15px 0;}
.measure-strip .input {max-width:165px;}
.defect-row {display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border-bottom:1px solid var(--line);padding:13px 0;}
.defect-row:last-child {border:0;}
.defect-row strong {display:block;font-size:13px;}
.defect-row small {display:block;color:var(--muted);}
.report-facts {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 20px;margin:17px 0;}
.report-facts div {padding:8px 0;border-bottom:1px solid #e6eeeb;}
.report-facts dt {font-size:11px;color:var(--muted);font-weight:700;}
.report-facts dd {margin:2px 0 0;font-weight:650;word-break:break-word;}
.report-image {width:180px;max-width:100%;max-height:150px;object-fit:contain;border-radius:10px;border:1px solid var(--line);}
.report-photo {break-inside:avoid;border-top:1px solid var(--line);padding:18px 0;display:grid;grid-template-columns:180px 1fr;gap:16px;}
.empty {text-align:center;padding:40px 20px;border:1px dashed #c8d9d0;border-radius:15px;color:#718781;}
.icon-btn {border:0;background:none;font-size:20px;color:inherit;padding:5px 10px;}
.modal {position:fixed;inset:0;background:#081b1acf;z-index:30;display:grid;place-items:center;padding:12px;}
.modal-content {width:min(650px,100%);background:white;border-radius:19px;padding:19px;box-shadow:0 30px 80px #0006;}
.modal-head {display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
#videoPreview {width:100%;aspect-ratio:4/3;object-fit:cover;background:#10242c;border-radius:12px;}
.footer-note {font-size:12px;color:#7a9188;margin:25px 5px 0;}
.loading {margin:100px auto;max-width:360px;text-align:center;color:var(--forest);}
.no-print {}
@media(max-width:990px){.shell{grid-template-columns:205px 1fr;gap:17px;padding:22px 19px}.hero-art{display:none}.hero-grid{grid-template-columns:1fr}.photo-layout{grid-template-columns:1fr}.photo-list{display:flex;gap:8px;max-width:100%;overflow-x:auto}.photo-tile{min-width:155px}.surface-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.topbar{padding:13px 16px}.top-hint{display:none}.shell{display:block;padding:13px 11px 50px}.sidebar-inner{position:static}.sidebar{margin-bottom:13px}.sidebar-nav{display:flex;gap:5px;overflow-x:auto}.nav-btn{white-space:nowrap;width:auto;padding:9px 12px;font-size:12px}.side-title,.side-projects,.side-footer{display:none}.hero{padding:24px 21px}.card{padding:17px}.grid2,.grid3{grid-template-columns:1fr}.header-row{display:block}.report-facts{grid-template-columns:1fr}.surface-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.report-photo{grid-template-columns:1fr}.hero h1{font-size:31px}.tabs{gap:0}.tab{padding:10px 12px;font-size:13px}}
@media print { @page{size:A4;margin:15mm} body{background:white;font-size:11pt;color:#111} .topbar,.sidebar,.tabs,.no-print,.back,.footer-note,.btn,button{display:none!important}.shell{display:block;padding:0;margin:0}.card{border:0;box-shadow:none;padding:6px 0;break-inside:auto}.hero{display:none}.main{width:100%}.report-photo{break-inside:avoid}.report-image{max-height:110px}.notice{border:1px solid #bbb;background:white;color:#222}.report-facts{grid-template-columns:repeat(2,1fr)}.print-title{display:block!important} }