/* AstraNL clean UI - single shared stylesheet for the injection-free surface. Light + dark, driven by CSS variables. Theme is chosen by data-theme on (set by ui/astra.js before paint, so there is no flash and no re-render). No framework, no hydration, no runtime widgets - deliberately. */ :root, [data-theme="dark"]{ --bg:#0b0f16; --card:#141b26; --card2:#0e1521; --line:#212b3a; --line2:#2a3547; --tx:#e9edf3; --tx2:#8b93a7; --tx3:#525b6d; --green:#4ade80; --greenA:#1f9d55; --greenB:#16a34a; --blue:#3884ff; --blueB:#2563eb; --red:#f87171; --shadow:0 6px 20px rgba(0,0,0,.42); } [data-theme="light"]{ --bg:#f4f6fa; --card:#ffffff; --card2:#f0f3f8; --line:#e2e7f0; --line2:#d4dbe7; --tx:#111826; --tx2:#5c6679; --tx3:#8a94a6; --green:#15803d; --greenA:#1f9d55; --greenB:#16a34a; --blue:#2563eb; --blueB:#1d4ed8; --red:#dc2626; --shadow:0 6px 20px rgba(20,30,55,.10); } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;padding:0;min-height:100%} body{ background:var(--bg);color:var(--tx); font-family:-apple-system,BlinkMacSystemFont,Inter,Segoe UI,Roboto,sans-serif; max-width:560px;margin:0 auto;padding:20px 16px 40px; transition:background .18s ease,color .18s ease; } /* ---- header ---- */ .top{display:flex;align-items:center;gap:11px;margin-bottom:24px} .mark{width:40px;height:40px;flex:0 0 40px;border-radius:12px; background:linear-gradient(135deg,var(--greenA),var(--greenB)); display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff} .bname{font-size:17px;font-weight:800;letter-spacing:-.2px;flex:1;min-width:0} .bname span{color:var(--green)} .bname small{display:block;font-weight:500;color:var(--tx2);font-size:12px} .back{width:38px;height:38px;flex:0 0 38px;border-radius:11px;background:var(--card); border:1px solid var(--line);display:flex;align-items:center;justify-content:center; font-size:19px;text-decoration:none;color:var(--tx2)} /* theme toggle */ .themebtn{width:38px;height:38px;flex:0 0 38px;border-radius:11px;background:var(--card); border:1px solid var(--line);color:var(--tx2);font-size:17px;cursor:pointer; display:flex;align-items:center;justify-content:center;padding:0} .themebtn:active{transform:scale(.94)} /* ---- shared bits ---- */ .step{font-size:13px;color:var(--tx2);margin:0 0 12px;display:flex;align-items:center;gap:7px} .dot{width:8px;height:8px;border-radius:50%;background:var(--greenA)} .dot.blue{background:var(--blue)} .btn{width:100%;border:0;border-radius:16px;padding:16px;font-weight:800;font-size:16px; cursor:pointer;color:#fff;background:linear-gradient(135deg,var(--greenA),var(--greenB)); box-shadow:0 6px 18px rgba(31,157,85,.30);font-family:inherit} .btn.blue{background:linear-gradient(135deg,var(--blue),var(--blueB)); box-shadow:0 6px 18px rgba(56,132,255,.28)} .btn:active{transform:scale(.99)} .btn[disabled]{opacity:.55} input,textarea{width:100%;padding:15px;border-radius:16px;border:1px solid var(--line2); background:var(--card2);color:var(--tx);font-size:16px;outline:none;font-family:inherit} input:focus,textarea:focus{border-color:var(--greenA)} textarea{min-height:104px;resize:vertical} .lbl{font-size:13px;color:var(--tx2);margin:16px 0 8px} .msg{margin-top:12px;font-size:14px;text-align:center} .bad{color:var(--red)} .ok{color:var(--green)} .foot{margin-top:28px;text-align:center;color:var(--tx3);font-size:11px;line-height:1.7} /* ---- big choice cards (start) ---- */ .choices{display:flex;flex-direction:column;gap:16px} .c{display:flex;align-items:center;gap:18px;text-decoration:none;color:inherit; background:var(--card);border:1px solid var(--line);border-radius:24px;padding:24px 22px; box-shadow:var(--shadow);transition:transform .1s} .c:active{transform:scale(.985)} .c .ic{width:76px;height:76px;flex:0 0 76px;border-radius:22px;background:var(--card2); border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:39px} .c .tx{flex:1;min-width:0} .c .t1{font-size:19px;font-weight:800;line-height:1.2} .c .t2{font-size:14px;color:var(--tx2);margin-top:5px} .c .go{font-size:26px;color:var(--green);flex:0 0 auto} /* ---- category tiles (klus) ---- */ .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .cat{background:var(--card);border:2px solid var(--line);border-radius:20px;padding:16px 8px; text-align:center;cursor:pointer;transition:border-color .12s,transform .1s} .cat:active{transform:scale(.96)} .cat.on{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 10%,var(--card))} .cat .e{font-size:32px;line-height:1} .cat .n{font-size:12px;color:var(--tx2);margin-top:7px} /* ---- job cards (werk) ---- */ .jobs{display:flex;flex-direction:column;gap:14px} .job{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px; display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow)} .jobtop{display:flex;align-items:center;gap:14px} .jico{width:62px;height:62px;flex:0 0 62px;border-radius:18px;display:flex;align-items:center; justify-content:center;font-size:31px;background:var(--card2);border:1px solid var(--line)} .jmeta{flex:1;min-width:0} .price{font-size:30px;font-weight:900;color:var(--green);line-height:1.05} .place{display:flex;align-items:center;gap:5px;color:var(--tx2);font-size:14px;margin-top:3px} .jtitle{font-size:14px;color:var(--tx2);line-height:1.4; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .done{background:color-mix(in srgb,var(--greenA) 14%,var(--card)); border:1px solid color-mix(in srgb,var(--greenA) 50%,var(--card)); border-radius:14px;padding:16px;text-align:center;color:var(--green);font-weight:800;font-size:16px} .hero{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:28px 20px; text-align:center;box-shadow:var(--shadow)} .hero .ico{font-size:56px;line-height:1;margin-bottom:12px} .hero h1{font-size:21px;margin:0 0 6px;font-weight:800} .hero p{margin:0 0 18px;color:var(--tx2);font-size:14px} .field{display:flex;gap:8px} .field .btn{width:auto;padding:15px 20px} .empty{text-align:center;color:var(--tx2);padding:46px 10px} .empty .ico{font-size:52px;display:block;margin-bottom:12px;opacity:.55} .skel{height:104px;border-radius:20px;background:var(--card);border:1px solid var(--line); animation:p 1.3s ease-in-out infinite} @keyframes p{0%,100%{opacity:.55}50%{opacity:.85}} .trust{display:flex;justify-content:center;gap:22px;margin-top:28px;color:var(--tx2);font-size:12px} /* ---- navigation bar (built by ui/astra.js into [data-nav]) ---- */ .nav{display:flex;align-items:center;gap:10px;margin-bottom:22px} .navbtn{width:38px;height:38px;flex:0 0 38px;border-radius:11px;background:var(--card); border:1px solid var(--line);color:var(--tx2);font-size:17px;cursor:pointer; display:flex;align-items:center;justify-content:center;padding:0;text-decoration:none; font-family:inherit} .navbtn:active{transform:scale(.94)} /* ---- language sheet ---- */ .sheetback{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999; display:flex;align-items:flex-end;justify-content:center} .sheet{width:100%;max-width:560px;background:var(--card);border:1px solid var(--line); border-radius:24px 24px 0 0;padding:12px;max-height:76vh;overflow:auto} .langrow{width:100%;display:flex;align-items:center;gap:14px;background:transparent; border:0;border-radius:14px;padding:15px;color:var(--tx);font-size:16px;font-weight:600; cursor:pointer;text-align:left;font-family:inherit} .langrow:active{background:var(--card2)} .langrow span:first-child{font-size:24px} /* ---- section list rows (news / tenders / robots) ---- */ .rows{display:flex;flex-direction:column;gap:12px} .row{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line); border-radius:18px;padding:16px;text-decoration:none;color:inherit;box-shadow:var(--shadow)} .row:active{transform:scale(.99)} .row .ric{width:52px;height:52px;flex:0 0 52px;border-radius:15px;background:var(--card2); border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:25px} .row .rtx{flex:1;min-width:0} .row .r1{font-size:15px;font-weight:700;line-height:1.3; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .row .r2{font-size:12px;color:var(--tx2);margin-top:4px; display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} .row .rgo{color:var(--green);font-size:20px;flex:0 0 auto} /* ---- price tiles (market) ---- */ .prices{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .ptile{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px; box-shadow:var(--shadow)} .ptile .pe{font-size:27px;line-height:1} .ptile .pv{font-size:23px;font-weight:900;margin-top:8px} .ptile .pn{font-size:12px;color:var(--tx2);margin-top:3px} /* ---- sort chips ---- */ .sortbar{display:flex;gap:8px;margin-bottom:14px;overflow-x:auto;padding-bottom:2px} .chip{background:var(--card);border:1px solid var(--line);color:var(--tx2);border-radius:20px; padding:9px 15px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;font-family:inherit} .chip.on{border-color:var(--greenA);color:var(--green); background:color-mix(in srgb,var(--greenA) 12%,var(--card))} /* ---- share / follow ---- */ .share{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap} .sharebtn{flex:1;min-width:130px;display:flex;align-items:center;justify-content:center;gap:8px; background:var(--card);border:1px solid var(--line);color:var(--tx2);border-radius:14px; padding:13px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit} .sharebtn:active{transform:scale(.98)} .share .msg{width:100%}