:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --brand: #69aaff;
  --brand-strong: #4f98f7;
  --brand-soft: #a9cfff;
  --welcome: #07182b;
  --work: #242a30;
  --chrome: #0f1722;
  --panel: #101e30;
  --panel-raised: #14263b;
  --paper: #f8f9fb;
  --text: #e7edf5;
  --text-2: #aab7c6;
  --muted: #748394;
  --line: #27405c;
  --line-soft: #223247;
  --success: #52c58a;
  --warning: #e8b44c;
  --danger: #f06a6a;
  --shadow: 0 18px 60px rgba(0,0,0,.30);
  --shadow-soft: 0 10px 30px rgba(0,0,0,.22);
  --radius: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--chrome); color: var(--text); }
button, input, select { font: inherit; }
button, select, input { outline: none; }
button { color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
a { color: var(--brand-soft); }
.app { width: 100vw; height: 100dvh; display: grid; grid-template-rows: 52px minmax(0,1fr) 28px; background: var(--chrome); }
.topbar { display: flex; align-items: center; gap: 18px; padding: 0 18px; background: rgba(12,22,35,.97); border-bottom: 1px solid #26374c; z-index: 90; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; min-width: max-content; }
.brand strong { font-size: 20px; letter-spacing: -1px; font-weight: 690; }
.brand strong span { color: var(--brand); font-weight: 520; }
.brand small { font-size: 8px; line-height: 1.15; letter-spacing: .9px; color: #8da0b5; }
.brand-divider { width: 1px; height: 22px; background: #31435a; }
.brand-cube { width: 18px; height: 18px; border: 1.5px solid var(--brand); transform: rotate(30deg) skewY(-10deg); border-radius: 3px; box-shadow: inset 0 0 0 1px #69aaff15; }
.topnav { display: flex; align-items: center; justify-content: center; gap: 4px; margin-left: auto; }
.nav-button, .nav-link, .ghost-button, .primary-compact { min-height: 32px; border: 1px solid transparent; background: transparent; border-radius: 7px; padding: 6px 10px; font-size: 11px; color: #cad5e2; }
.nav-button { border-color: #2b425e; background: #122034; }
.nav-link:hover, .nav-button:hover, .ghost-button:hover { background: #ffffff0a; }
.nav-secondary { color: #8da0b5; }
.chev { color: #8397ac; padding-left: 3px; }
.top-actions { display: flex; align-items: center; gap: 6px; }
.ghost-button { color: #9db0c3; display: flex; align-items: center; gap: 7px; }
.phone-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 12px #52c58a66; }
.primary-compact { color: #07182b; background: var(--brand); border-color: #89bbff; font-weight: 650; }
.workspace { min-height: 0; position: relative; }
.canvas { position: absolute; inset: 0; overflow: hidden; user-select: none; touch-action: none; background: var(--welcome); transition: background 420ms ease; }
.canvas-grid { position: absolute; inset: 0; pointer-events: none; opacity: .76; background-image: linear-gradient(#29486633 1px, transparent 1px), linear-gradient(90deg,#29486633 1px,transparent 1px), linear-gradient(#38608320 1px, transparent 1px), linear-gradient(90deg,#38608320 1px,transparent 1px); background-size: 24px 24px,24px 24px,120px 120px,120px 120px; transition: opacity 420ms ease, filter 420ms ease; }
.ambient { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .72; transition: opacity 420ms ease, filter 420ms ease; }
.app[data-mode="work"] .canvas { background: var(--work); }
.app[data-mode="work"] .canvas-grid { opacity: .24; filter: grayscale(1); }
.app[data-mode="work"] .ambient { opacity: .035; filter: grayscale(1); }
.canvas-layer { position: absolute; inset: 0; transform-origin: 0 0; z-index: 6; will-change: transform; }
.hero { position: absolute; z-index: 15; left: 50%; top: 47%; transform: translate(-50%,-50%); width: min(510px, calc(100vw - 700px)); text-align: center; pointer-events: none; transition: opacity 250ms ease, transform 250ms ease; }
.hero button { pointer-events: auto; }
.app[data-mode="work"] .hero { opacity: 0; pointer-events: none; transform: translate(-50%,-48%) scale(.98); }
.hero-mark { width: 76px; height: 66px; margin: 0 auto 14px; position: relative; }
.hero-mark span { position: absolute; left: 16px; top: 15px; width: 42px; height: 30px; border: 1px solid #6b99cb55; background: linear-gradient(135deg,#69aaff16,transparent); transform: skewY(-28deg); }
.hero-mark span:nth-child(2) { transform: translateY(8px) skewY(-28deg); opacity: .6; }
.hero-mark span:nth-child(3) { transform: translateY(16px) skewY(-28deg); opacity: .35; }
.eyebrow { color: #89a5c2; letter-spacing: 2px; font-size: 9px; font-weight: 650; margin-bottom: 12px; }
.hero h1 { margin: 0; font-size: clamp(27px,2.2vw,36px); line-height: 1.12; letter-spacing: -1.1px; font-weight: 470; }
.hero p { color: #a7b5c4; line-height: 1.7; font-size: 13px; margin: 15px 0 0; }
.hero small { display: block; color: #73879b; font-size: 10px; margin-top: 14px; }
.hero-actions { display: grid; gap: 8px; width: 250px; margin: 22px auto 0; }
.primary, .secondary, .text-button { min-height: 42px; border-radius: 8px; border: 1px solid transparent; padding: 9px 14px; }
.primary { background: var(--brand); color: #07182b; border-color: #8abfff; font-weight: 670; box-shadow: 0 3px 0 #245899, 0 10px 35px #69aaff16; }
.primary:hover { background: #86bbff; }
.secondary { background: #0c1c30; color: #d6e2ef; border-color: #4675a9; }
.secondary:hover { background: #142942; }
.project-panel { position: absolute; z-index: 28; top: 28px; right: 16px; width: 290px; padding: 14px; border: 1px solid #355475; border-radius: 12px; background: linear-gradient(155deg,rgba(16,30,48,.97),rgba(12,26,43,.97)); box-shadow: var(--shadow); transition: opacity 220ms ease, transform 220ms ease; }
.panel-title { display: flex; align-items: center; gap: 9px; margin-bottom: 15px; }
.panel-title strong { font-size: 14px; font-weight: 650; }
.panel-title .icon-button { margin-left: auto; }
.folder-icon { color: var(--brand); }
.project-panel label, .modal label { display: grid; gap: 6px; color: #91a2b5; font-size: 10px; margin: 11px 0; }
.project-panel input, .project-panel select, .modal input, .modal select { min-height: 36px; width: 100%; border: 1px solid #304b69; border-radius: 7px; background: #0d1928; color: #dbe6f1; padding: 8px 10px; }
.project-panel input::placeholder, .modal input::placeholder { color: #60758b; }
.panel-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.panel-stats > div { padding: 9px 10px; border: 1px solid #294561; border-radius: 8px; background: #14243a; }
.panel-stats span { display: block; font-size: 9px; color: #8da0b4; }
.panel-stats strong { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 11px; color: #d8e4ef; }
.status-dot { width: 7px; height: 7px; background: var(--warning); border-radius: 50%; }
.submit-main { width: 100%; margin-top: 3px; }
.panel-divider { border-top: 1px solid #28415d; margin: 16px 0; }
.panel-note strong { display: block; font-size: 11px; margin-bottom: 7px; }
.panel-note p { color: #8296aa; font-size: 10px; line-height: 1.6; margin: 0; }
.text-button { width: 100%; background: transparent; color: #9bc8ff; border-color: transparent; min-height: 34px; margin-top: 6px; text-align: left; }
.text-button:hover { background: #ffffff08; }
.icon-button { border: 0; background: transparent; color: #91a4b7; border-radius: 6px; min-width: 28px; min-height: 28px; }
.icon-button:hover { background: #ffffff0b; }
.help-card { position: absolute; z-index: 25; left: 16px; bottom: 20px; width: 232px; height: 58px; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid #355475; background: #102039e8; border-radius: 9px; box-shadow: var(--shadow-soft); }
.help-card .help-icon { color: var(--brand); font-size: 20px; }
.help-card > span:nth-child(2) { display: grid; gap: 2px; }
.help-card small { color: #91a4b6; font-size: 9px; }
.help-card strong { font-size: 12px; font-weight: 560; }
.help-card button { margin-left: auto; }
.zoom-controls { position: absolute; z-index: 26; left: 16px; bottom: 88px; display: flex; align-items: center; border: 1px solid #314c69; border-radius: 8px; background: #0d1a2bde; padding: 2px; }
.zoom-controls button { border: 0; background: transparent; color: #aec1d4; min-width: 28px; min-height: 28px; border-radius: 6px; }
.zoom-controls button:hover { background: #ffffff0a; }
.zoom-controls output { width: 48px; text-align: center; font-size: 10px; color: #c4d1de; }
.work-hint { position: absolute; z-index: 45; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(20px); display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid #345371; border-radius: 8px; background: #101e30ee; color: #9fb3c7; font-size: 10px; opacity: 0; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; }
.work-hint button { margin-left: 12px; border: 0; background: transparent; color: #879aac; }
.app[data-mode="work"] .work-hint.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.statusbar { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: #0d1623; border-top: 1px solid #22344a; color: #7e91a5; font-size: 9px; z-index: 100; }
.statusbar i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--warning); }
.statusbar.saved i { background: var(--success); }
.status-note { color: #657a8e; }
.ruler { position: absolute; z-index: 55; background: #19232d; color: #8294a7; pointer-events: none; opacity: 0; transition: opacity 180ms ease; }
.ruler-x { top: 0; left: 26px; right: 0; height: 26px; border-bottom: 1px solid #3d4d5d; background-image: repeating-linear-gradient(90deg,transparent 0 24px,#7c899755 24px 25px,transparent 25px 49px,#7c899733 49px 50px); }
.ruler-y { top: 26px; bottom: 0; left: 0; width: 26px; border-right: 1px solid #3d4d5d; background-image: repeating-linear-gradient(0deg,transparent 0 24px,#7c899755 24px 25px,transparent 25px 49px,#7c899733 49px 50px); }
.app[data-mode="work"] .ruler { opacity: .92; }
.app[data-mode="work"] .project-panel { right: 18px; }
.document-card { position: absolute; width: 235px; border: 1px solid #315779; border-radius: 9px; background: linear-gradient(160deg,#11243b,#0d1b2e); box-shadow: var(--shadow-soft); overflow: hidden; cursor: default; transition: border-color 120ms ease, box-shadow 120ms ease, opacity 200ms ease; }
.app[data-mode="work"] .document-card:not(.selected) { opacity: .68; }
.document-card.selected { border-color: var(--brand); box-shadow: 0 0 0 1px #69aaff44, 0 0 28px #69aaff24, var(--shadow-soft); }
.document-header { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 10px; border-bottom: 1px solid #2b4765; font-size: 11px; font-weight: 640; }
.document-header .doc-kind { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #42688e; border-radius: 5px; color: #9ecbff; background: #18324f; }
.document-header .more { margin-left: auto; color: #7890a8; }
.document-preview { height: 160px; padding: 10px; background: #0a1727; display: grid; place-items: center; overflow: hidden; }
.document-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; pointer-events: none; }
.paper-preview { width: 78%; height: 100%; padding: 12px 10px; border-radius: 2px; color: #25303a; background: var(--paper); box-shadow: 0 8px 18px #0005; display: flex; flex-direction: column; align-items: center; text-align: center; }
.paper-preview .crest { font-size: 20px; line-height: 1; margin-bottom: 8px; }
.paper-preview strong { font-family: Georgia, serif; font-size: 9px; line-height: 1.35; }
.paper-preview .lines { width: 86%; margin-top: auto; display: grid; gap: 4px; }
.paper-preview .lines i { height: 3px; background: #ccd4dc; border-radius: 4px; }
.sign-preview { width: 90%; height: 74px; position: relative; display: grid; place-items: center; border: 1px solid #45586b; background: #18202a; box-shadow: 0 10px 20px #0005; letter-spacing: 6px; font-size: 22px; }
.sign-preview::before { content: "3200 мм"; position: absolute; top: -18px; left: 0; right: 0; font-size: 7px; color: #8997a5; letter-spacing: 0; }
.approved-preview { width: 88%; height: 100%; position: relative; background: var(--paper); color: #48515b; padding: 12px; box-shadow: 0 8px 18px #0005; }
.approved-preview::before, .approved-preview::after { content: ""; display: block; height: 1px; background: #8a959f; margin: 8px 0; box-shadow: 0 16px 0 #a3adb7, 0 32px 0 #a3adb7, 0 48px 0 #a3adb7; }
.approved-preview b { display: block; text-align: center; letter-spacing: 4px; font-size: 10px; }
.approved-preview em { position: absolute; right: 6px; bottom: 11px; border: 2px solid #2a9c60; color: #1f9257; padding: 3px 6px; font-size: 9px; font-style: normal; font-weight: 700; transform: rotate(-9deg); }
.file-preview { width: 86%; height: 100%; display: grid; place-items: center; border: 1px dashed #3f5d79; border-radius: 5px; color: #8ca7c0; text-align: center; }
.file-preview strong { font-size: 34px; font-weight: 450; }
.file-preview small { display: block; margin-top: 6px; font-size: 9px; }
.document-meta { display: flex; gap: 10px; justify-content: space-between; padding: 7px 10px 8px; color: #8195aa; font-size: 9px; }
.document-meta span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-badge { position: absolute; top: 42px; right: 8px; z-index: 2; padding: 3px 6px; border: 1px solid #47617a; border-radius: 5px; background: #0d1a2bd9; color: #adc2d7; font-size: 8px; }
.context-menu { position: fixed; z-index: 200; width: 220px; padding: 5px; border: 1px solid #3c5e80; border-radius: 10px; background: #0f1e30fa; box-shadow: var(--shadow); }
.context-menu button { width: 100%; min-height: 35px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 7px; background: transparent; color: #d3deea; text-align: left; padding: 6px 9px; font-size: 11px; }
.context-menu button:hover { background: #274b7255; }
.context-divider { border-top: 1px solid #2a435f; margin: 4px; }
.drop-overlay { position: absolute; z-index: 300; inset: 12px; display: grid; place-items: center; pointer-events: none; border: 2px dashed #7db6ff; border-radius: 16px; background: #07182be8; opacity: 0; transition: opacity 120ms ease; }
.drop-overlay.show { opacity: 1; }
.drop-overlay div { display: grid; gap: 8px; text-align: center; padding: 24px 34px; border: 1px solid #47709b; border-radius: 12px; background: #0e2138; box-shadow: var(--shadow); }
.drop-overlay strong { font-size: 20px; }
.drop-overlay span { color: #89a0b6; font-size: 11px; }
.viewer { position: absolute; z-index: 60; left: clamp(40px, 18vw, 330px); top: 46px; width: min(760px, calc(100vw - 650px)); height: calc(100% - 78px); min-width: 520px; border: 1px solid var(--brand); border-radius: 10px; overflow: hidden; background: #0f1d2e; box-shadow: 0 0 0 1px #69aaff33, 0 26px 90px #0008; }
.viewer-header { height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: 1px solid #38536f; background: #10243c; }
.viewer-title { display: flex; align-items: center; gap: 10px; }
.viewer-title > span:first-child { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; background: #b74550; color: #fff; }
.viewer-title > span:last-child { display: grid; gap: 2px; }
.viewer-title strong { font-size: 13px; }
.viewer-title small { color: #91a4b7; font-size: 9px; }
.viewer-actions { display: flex; gap: 3px; }
.viewer-actions button, .viewer-toolbar button { border: 0; background: transparent; color: #c2d0de; border-radius: 6px; min-height: 30px; padding: 5px 8px; }
.viewer-actions button:hover, .viewer-toolbar button:hover { background: #ffffff0c; }
.viewer-toolbar { height: 42px; display: flex; align-items: center; gap: 5px; padding: 0 12px; border-bottom: 1px solid #2f465f; background: #112135; font-size: 10px; color: #aebdcb; }
.viewer-toolbar button.active { color: var(--brand); background: #284d73; }
.toolbar-divider { width: 1px; height: 20px; background: #35506a; margin: 0 4px; }
.viewer-body { height: calc(100% - 94px); display: grid; grid-template-columns: 112px minmax(0,1fr); }
.page-strip { overflow-y: auto; padding: 10px; background: #0b1828; border-right: 1px solid #2d445b; }
.page-thumb { width: 80px; height: 104px; margin: 0 auto 12px; border: 1px solid #4c6075; background: var(--paper); color: #52606d; display: grid; place-items: center; font-size: 10px; box-shadow: 0 5px 14px #0005; }
.page-thumb.active { border: 2px solid var(--brand); box-shadow: 0 0 0 2px #69aaff22; }
.viewer-stage { overflow: auto; position: relative; display: grid; place-items: start center; padding: 18px; background: #242a30; }
.viewer-stage iframe, .viewer-stage img { display: block; max-width: 100%; border: 0; background: white; box-shadow: 0 12px 36px #0007; transform-origin: top center; }
.viewer-stage iframe { width: 100%; min-height: 100%; }
.viewer-stage img { max-height: calc(100vh - 190px); object-fit: contain; }
.viewer-paper { width: min(92%,620px); min-height: 780px; padding: 70px 58px; background: var(--paper); color: #202933; box-shadow: 0 12px 40px #0007; transform-origin: top center; }
.viewer-paper .doc-crest { text-align: center; font-size: 36px; }
.viewer-paper h2 { font-family: Georgia,serif; font-size: 24px; text-align: center; margin: 26px 0; line-height: 1.3; }
.viewer-paper p { font-family: Georgia,serif; font-size: 13px; line-height: 1.7; text-align: justify; }
.viewer-paper .gray-lines { display: grid; gap: 8px; margin-top: 42px; }
.viewer-paper .gray-lines i { height: 8px; background: #d6dde4; }
.viewer-paper .gray-lines i:last-child { width: 65%; }
.modal { width: min(520px, calc(100vw - 30px)); padding: 0; border: 1px solid #416383; border-radius: 12px; color: var(--text); background: #101e30; box-shadow: 0 28px 100px #000b; }
.modal::backdrop { background: rgba(4,10,17,.72); backdrop-filter: blur(3px); }
.modal form { padding: 18px; }
.modal-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.modal-title span { display: grid; gap: 4px; }
.modal-title small { color: #7895b3; font-size: 8px; letter-spacing: 1.5px; }
.modal-title strong { font-size: 16px; }
.modal-title button { border: 0; background: transparent; color: #8ea2b5; font-size: 20px; }
.modal p { color: #98a9ba; font-size: 11px; line-height: 1.6; }
.modal .consent { grid-template-columns: auto 1fr; align-items: start; gap: 9px; font-size: 10px; line-height: 1.5; margin-top: 14px; }
.modal .consent input { width: 16px; min-height: 16px; margin: 1px 0 0; }
.modal-meta { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; color: #7f92a6; font-size: 9px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.modal-actions .primary, .modal-actions .secondary { min-height: 38px; }
.form-error { min-height: 16px; color: #ff9c9c; font-size: 10px; margin-top: 7px; }
.compact-modal { width: min(430px, calc(100vw - 30px)); }
.page-object { width: 170px; height: 226px; position: absolute; background: var(--paper); color: #4b5662; border: 1px solid #d4dbe1; border-radius: 3px; box-shadow: 0 12px 30px #0005; padding: 14px; cursor: default; }
.page-object strong { display: block; font-size: 10px; margin-bottom: 8px; }
.page-object small { color: #85919d; font-size: 8px; }
.page-object .page-lines { display: grid; gap: 5px; margin-top: 24px; }
.page-object .page-lines i { height: 4px; background: #d4dbe2; }
.toast { position: fixed; z-index: 500; left: 50%; bottom: 48px; transform: translateX(-50%) translateY(16px); padding: 10px 14px; border: 1px solid #3d5c7b; border-radius: 9px; background: #102139f5; color: #ced9e5; font-size: 11px; box-shadow: var(--shadow); opacity: 0; transition: opacity 150ms ease, transform 150ms ease; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }
@media (max-width: 1100px) {
  .brand small, .brand-divider, .nav-secondary, .ghost-button { display: none; }
  .hero { width: min(440px, calc(100vw - 380px)); left: 42%; }
  .project-panel { width: 270px; }
  .viewer { left: 34px; width: calc(100vw - 340px); }
}
@media (max-width: 760px) {
  .app { grid-template-rows: 48px minmax(0,1fr) 26px; }
  .topbar { padding: 0 10px; gap: 6px; }
  .brand strong { font-size: 18px; }
  .topnav { display: none; }
  .top-actions { margin-left: auto; }
  .hero { width: calc(100vw - 34px); left: 50%; top: 41%; }
  .hero h1 { font-size: 28px; }
  .hero p { font-size: 12px; }
  .desktop-only { display: none; }
  .project-panel { top: auto; bottom: 10px; left: 10px; right: 10px; width: auto; max-height: 44vh; overflow-y: auto; transform: translateY(calc(100% - 55px)); transition: transform 220ms ease; }
  .project-panel.mobile-open { transform: translateY(0); }
  .project-panel > *:not(.panel-title) { opacity: 0; pointer-events: none; transition: opacity 160ms ease; }
  .project-panel.mobile-open > * { opacity: 1; pointer-events: auto; }
  .help-card { left: 10px; bottom: 70px; width: 205px; }
  .zoom-controls { left: 10px; top: 10px; bottom: auto; }
  .viewer { inset: 28px 8px 8px 28px; width: auto; height: auto; min-width: 0; }
  .viewer-body { grid-template-columns: 74px minmax(0,1fr); }
  .page-thumb { width: 52px; height: 72px; }
  .viewer-paper { min-height: 640px; padding: 45px 28px; }
  .viewer-paper h2 { font-size: 18px; }
  .status-note { display: none; }
  .work-hint { max-width: calc(100vw - 24px); width: max-content; }
}