/* Прораб — мобильный интерфейс. Тема по умолчанию тёмная («графит + янтарь»), светлая — для работы на солнце. Переключается атрибутом data-theme на : dark | light | auto(системная). */ :root, :root[data-theme="dark"]{ --bg:#0d1117; --bg2:#0a0e14; --card:#161c25; --card2:#1e2732; --line:#28313e; --ink:#e8eef7; --muted:#8b98ad; --dim:#5d6a7e; --brand:#ff9a1f; --brand2:#ffbb52; --brand-ink:#1c1204; --brand-soft:rgba(255,154,31,.14); --ok:#2fbf6b; --ok-soft:rgba(47,191,107,.15); --fail:#f5455f; --fail-soft:rgba(245,69,95,.15); --warn:#f5a524; --warn-soft:rgba(245,165,36,.15); --blue:#4b8dfd; --blue-soft:rgba(75,141,253,.15); --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.35); --r:18px; --safe:env(safe-area-inset-bottom,0px); color-scheme:dark; } :root[data-theme="light"]{ --bg:#f4f6fa; --bg2:#eceff5; --card:#fff; --card2:#f7f9fc; --line:#e3e8ef; --ink:#0e1626; --muted:#657085; --dim:#95a0b3; --brand:#f08c00; --brand2:#ffab2e; --brand-ink:#2a1a00; --brand-soft:rgba(240,140,0,.12); --ok:#12a150; --ok-soft:rgba(18,161,80,.12); --fail:#e11d48; --fail-soft:rgba(225,29,72,.10); --warn:#c77700; --warn-soft:rgba(199,119,0,.12); --blue:#2563eb; --blue-soft:rgba(37,99,235,.10); --shadow:0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.06); color-scheme:light; } @media (prefers-color-scheme: light){ :root[data-theme="auto"]{ --bg:#f4f6fa; --bg2:#eceff5; --card:#fff; --card2:#f7f9fc; --line:#e3e8ef; --ink:#0e1626; --muted:#657085; --dim:#95a0b3; --brand:#f08c00; --brand2:#ffab2e; --brand-ink:#2a1a00; --brand-soft:rgba(240,140,0,.12); --ok:#12a150; --ok-soft:rgba(18,161,80,.12); --fail:#e11d48; --fail-soft:rgba(225,29,72,.10); --warn:#c77700; --warn-soft:rgba(199,119,0,.12); --blue:#2563eb; --blue-soft:rgba(37,99,235,.10); --shadow:0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.06); color-scheme:light; } } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;padding:0;background:var(--bg);color:var(--ink); font:16px/1.45 -apple-system,"SF Pro Text","Segoe UI",Roboto,Arial,sans-serif; overscroll-behavior-y:contain;-webkit-font-smoothing:antialiased} body{padding-bottom:calc(96px + var(--safe))} button,input,select,textarea{font:inherit;color:inherit} a{color:var(--brand);text-decoration:none} .hide{display:none !important} /* ---------- шапка ---------- */ .topbar{position:sticky;top:0;z-index:40;background:var(--bg); backdrop-filter:saturate(140%) blur(12px); display:flex;align-items:center;gap:8px;padding:12px 16px 10px;min-height:58px} .topbar h1{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0;flex:1;line-height:1.15} .topbar h1 small{display:block;font-weight:500;font-size:12.5px;color:var(--muted); letter-spacing:0;margin-top:2px} .iconbtn{background:var(--card);border:1px solid var(--line);color:var(--ink); width:40px;height:40px;display:grid;place-items:center;font-size:19px;border-radius:13px; cursor:pointer;flex:0 0 auto;padding:0} .iconbtn:active{background:var(--card2)} .wrap{padding:4px 16px 16px;max-width:760px;margin:0 auto} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--shadow);padding:16px;margin-bottom:12px} .card.tight{padding:12px} h2{font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim); font-weight:700;margin:20px 4px 9px} .muted{color:var(--muted)} .small{font-size:13px} .row{display:flex;gap:10px;align-items:center} .between{display:flex;justify-content:space-between;align-items:center;gap:10px} .grow{flex:1;min-width:0} .ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ---------- кнопки ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0; border-radius:14px;padding:13px 16px;font-weight:650;cursor:pointer; background:var(--card2);color:var(--ink);min-height:50px;border:1px solid var(--line)} .btn.primary{background:linear-gradient(180deg,var(--brand2),var(--brand)); color:var(--brand-ink);border-color:transparent;font-weight:750; box-shadow:0 6px 18px var(--brand-soft)} .btn.blue{background:var(--blue);color:#fff;border-color:transparent} .btn.danger{background:var(--fail);color:#fff;border-color:transparent} .btn.ghost{background:transparent} .btn.block{display:flex;width:100%} .btn:disabled{opacity:.45} .btn.sm{min-height:40px;padding:9px 13px;font-size:13.5px;border-radius:12px;font-weight:600} .cta{min-height:60px;font-size:17px;border-radius:16px} /* ---------- поля ---------- */ label.f{display:block;margin-bottom:12px} label.f span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px;font-weight:600} input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{ width:100%;padding:13px;border:1px solid var(--line);border-radius:13px;background:var(--bg2); min-height:50px} textarea{min-height:80px;resize:vertical} input::placeholder,textarea::placeholder{color:var(--dim)} input:focus,textarea:focus,select:focus{outline:none;border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)} .row > input,.row > select{flex:1 1 0;min-width:0;width:auto} .row > select.fix{flex:0 0 auto;width:auto;min-width:132px} /* ---------- бейджи ---------- */ .badge{display:inline-block;padding:4px 10px;border-radius:9px;font-size:11.5px;font-weight:700; background:var(--card2);color:var(--muted);white-space:nowrap;letter-spacing:.02em} .b-ok{background:var(--ok-soft);color:var(--ok)} .b-fail{background:var(--fail-soft);color:var(--fail)} .b-warn{background:var(--warn-soft);color:var(--warn)} .b-blue{background:var(--blue-soft);color:var(--blue)} .b-crit{background:var(--fail);color:#fff} /* ---------- списки ---------- */ .list{background:var(--card);border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden} .item{display:flex;gap:12px;padding:14px 16px;align-items:center;cursor:pointer; border-bottom:1px solid var(--line)} .item:last-child{border-bottom:0} .item:active{background:var(--card2)} .item .t{font-weight:650;line-height:1.28;letter-spacing:-.01em; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .item .s{font-size:12.5px;color:var(--muted);margin-top:3px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .chev{color:var(--dim);font-size:20px} .ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:20px; background:var(--card2);flex:0 0 auto} /* ---------- дашборд ---------- */ .hero{background:linear-gradient(135deg,var(--brand),var(--brand2)); border-radius:20px;padding:18px;color:var(--brand-ink);margin-bottom:14px; box-shadow:0 10px 30px var(--brand-soft)} .hero .h{font-size:13px;font-weight:700;opacity:.72;text-transform:uppercase;letter-spacing:.07em} .hero .big{font-size:26px;font-weight:850;letter-spacing:-.03em;margin:4px 0 12px;line-height:1.15} .hero button{width:100%;border:0;border-radius:14px;background:rgba(28,18,4,.9);color:#fff; padding:15px;font-size:16px;font-weight:700;cursor:pointer} .tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px; box-shadow:var(--shadow);position:relative;overflow:hidden} .tile .ic{position:absolute;right:10px;top:10px;width:32px;height:32px;font-size:15px; border-radius:10px;opacity:.9} .tile .n{font-size:30px;font-weight:850;line-height:1;letter-spacing:-.03em} .tile .l{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.3} .tile.alert .n{color:var(--fail)} .tile.good .n{color:var(--ok)} .bar{height:7px;border-radius:99px;background:var(--bg2);overflow:hidden;margin-top:9px} .bar>i{display:block;height:100%;border-radius:99px; background:linear-gradient(90deg,var(--ok),#7bd99f);transition:width .3s} /* ---------- чек-лист ---------- */ .progress{position:sticky;top:var(--topH,58px);z-index:30;background:var(--bg); padding:6px 16px 12px;font-size:12.5px;color:var(--muted)} .progress .bar{margin-top:7px} .q{padding:16px;border-bottom:1px solid var(--line)} .q:last-child{border-bottom:0} .q.crit-fail{background:var(--fail-soft)} .q .qt{font-weight:650;line-height:1.32;margin-bottom:3px;letter-spacing:-.01em} .q .qn{font-size:12px;color:var(--dim);margin-bottom:10px;line-height:1.35} .q.unfilled{box-shadow:inset 3px 0 0 var(--brand)} .tri{display:grid;grid-template-columns:1fr 1fr .8fr;gap:8px;margin-top:10px} .tri button{border:1px solid var(--line);background:var(--bg2);border-radius:14px;padding:12px 4px; font-weight:700;font-size:14px;cursor:pointer;min-height:54px;color:var(--muted)} .tri button[data-on="ok"]{background:var(--ok);border-color:var(--ok);color:#fff; box-shadow:0 4px 14px var(--ok-soft)} .tri button[data-on="fail"]{background:var(--fail);border-color:var(--fail);color:#fff; box-shadow:0 4px 14px var(--fail-soft)} .tri button[data-on="na"]{background:var(--dim);border-color:var(--dim);color:#fff} .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .chips button{border:1px solid var(--line);background:var(--card);border-radius:99px; padding:9px 15px;cursor:pointer;min-height:42px;color:var(--muted);font-weight:600;font-size:14px} .chips button.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)} .meas{display:flex;gap:9px;align-items:center;margin-top:10px} .meas input{flex:1;min-width:0;font-size:18px;font-weight:700} .meas .unit{color:var(--muted);font-size:14px;min-width:32px} .tol{display:flex;align-items:center;gap:10px;margin-top:7px;font-size:12px;color:var(--dim)} .tol span{flex:1} .thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .thumbs figure{margin:0;position:relative} .thumbs img{width:76px;height:76px;object-fit:cover;border-radius:13px;border:1px solid var(--line)} .thumbs .x{position:absolute;top:-6px;right:-6px;background:var(--fail);color:#fff;border:0; width:23px;height:23px;border-radius:50%;font-size:13px;cursor:pointer;line-height:1} .qactions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap} /* ---------- нижняя панель ---------- */ .tabbar{position:fixed;bottom:0;left:0;right:0;background:var(--card); border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr); padding-bottom:var(--safe);z-index:50;backdrop-filter:blur(12px)} .tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 2px 9px; font-size:10.5px;color:var(--dim);font-weight:600} .tabbar a.on{color:var(--brand)} .tabbar a i{font-style:normal;font-size:20px;line-height:1} .footbar{position:fixed;left:0;right:0;bottom:0;padding:12px 16px calc(12px + var(--safe)); background:var(--card);border-top:1px solid var(--line);z-index:55;display:flex;gap:10px} /* ---------- модалка ---------- */ .sheet{position:fixed;inset:0;background:rgba(3,6,12,.7);z-index:80;display:flex; align-items:flex-end;justify-content:center;backdrop-filter:blur(3px)} .sheet>div{background:var(--card);width:100%;max-width:760px;border-radius:22px 22px 0 0; padding:18px 16px calc(18px + var(--safe));max-height:92vh;overflow:auto; border-top:1px solid var(--line)} .sheet h3{margin:0 0 14px;font-size:19px;font-weight:800;letter-spacing:-.02em} canvas.sign{width:100%;height:170px;border:1px dashed var(--line);border-radius:14px; background:#fff;touch-action:none} /* ---------- сегменты (выбор темы и т.п.) ---------- */ .seg{display:grid;grid-auto-flow:column;gap:4px;background:var(--bg2);padding:4px; border-radius:14px;border:1px solid var(--line)} .seg button{border:0;background:transparent;color:var(--muted);padding:10px 6px; border-radius:11px;font-weight:650;font-size:13.5px;cursor:pointer} .seg button.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow)} /* ---------- прочее ---------- */ .toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(92px + var(--safe)); background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:14px;z-index:99; font-size:14px;font-weight:600;box-shadow:var(--shadow);max-width:90%} .offline{background:linear-gradient(90deg,var(--brand),var(--brand2));color:var(--brand-ink); text-align:center;font-size:12.5px;padding:7px;font-weight:700} .empty{text-align:center;color:var(--muted);padding:44px 20px} .empty .e{font-size:46px;display:block;margin-bottom:10px;opacity:.7} .login{max-width:400px;margin:7vh auto;padding:20px} .logo{text-align:center;margin-bottom:24px} .logo .m{font-size:56px} .logo h1{margin:8px 0 2px;font-size:28px;font-weight:850;letter-spacing:-.03em} .demo{font-size:12.5px;color:var(--muted);text-align:center;margin-top:18px;line-height:1.8} .sec-h{padding:10px 16px 8px;font-weight:700;font-size:12px;text-transform:uppercase; letter-spacing:.08em;color:var(--dim);background:var(--bg); position:sticky;top:calc(var(--topH,58px) + var(--progH,0px));z-index:20} .spin{width:24px;height:24px;border:3px solid var(--line);border-top-color:var(--brand); border-radius:50%;animation:sp .7s linear infinite;margin:36px auto} @keyframes sp{to{transform:rotate(360deg)}}