/* Palette + treatments ported from the Lovable design's styles.css (Option A). */
:root{
  --background: oklch(0.965 0.012 248);
  --ink: oklch(0.24 0.075 260);
  --muted: oklch(0.48 0.055 255);
  --muted-bg: oklch(0.925 0.018 250);
  --surface: oklch(0.99 0.004 250 / .82);
  --line: oklch(0.8 0.035 250 / .55);
  --accent: oklch(0.27 0.09 260);
  --accent-hover: oklch(0.33 0.09 254);
  --money: oklch(0.57 0.15 150);
  --money-hover: oklch(0.51 0.14 150);
  --billed: oklch(0.52 0.11 245);
  --billed-hover: oklch(0.45 0.11 245);
  --danger: oklch(0.58 0.22 28);
  --paid: oklch(0.57 0.15 150);
  --yellow: oklch(0.88 0.16 92 / .5);  --yellow-ink: oklch(0.39 0.09 85);
  --orange: oklch(0.78 0.16 58 / .32); --orange-ink: oklch(0.43 0.12 52);
  --green: oklch(0.73 0.15 150 / .25); --green-ink: oklch(0.42 0.13 150);
  --blue: oklch(0.7 0.1 245 / .28);    --blue-ink: oklch(0.4 0.1 245);
  --shadow-soft: 0 8px 22px -14px oklch(0.25 0.06 254 / .65);
  --shadow-rim: inset 0 1px 0 oklch(1 0 0 / .9), 0 12px 32px -24px oklch(0.25 0.06 254 / .7);
  --font-display: "Sora", -apple-system, sans-serif;
}
*{box-sizing:border-box; margin:0; border-color:var(--line)}
body{font-family:"Manrope",-apple-system,'Segoe UI',Arial,sans-serif; color:var(--ink); padding-bottom:96px; min-height:100vh;
  background:
    radial-gradient(45% 35% at 15% 0%, oklch(0.7 0.09 248 / .24), transparent 72%),
    radial-gradient(45% 35% at 90% 5%, oklch(0.43 0.08 254 / .18), transparent 72%),
    linear-gradient(180deg, oklch(0.98 0.008 248), var(--background));
  background-attachment:fixed}
header{background:linear-gradient(180deg, oklch(1 0 0 / .83), oklch(0.94 0.018 250 / .78)); backdrop-filter:blur(18px);
  color:var(--ink); padding:10px 16px; position:sticky; top:0; z-index:5;
  border-bottom:1px solid var(--line); box-shadow:var(--shadow-soft)}
.hwrap{max-width:1080px; margin:0 auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
header h1{font-family:var(--font-display); font-size:18px; font-weight:800; letter-spacing:.2px; display:flex; align-items:center; gap:10px; flex:1 1 auto; white-space:nowrap}
.logo{display:grid; place-items:center; width:40px; height:40px; border-radius:12px;
  background:var(--accent); color:#fff; font-family:var(--font-display); font-size:12px; font-weight:800; letter-spacing:.5px; box-shadow:var(--shadow-rim)}
.gear{background:var(--surface); border:1px solid var(--line); color:var(--ink); font-size:17px; border-radius:12px; padding:8px 13px; cursor:pointer; box-shadow:var(--shadow-rim)}
nav{display:flex; gap:4px; background:oklch(1 0 0 / .68); border-radius:12px; padding:4px; box-shadow:var(--shadow-rim)}
nav button{border:0; background:transparent; color:var(--muted); font-size:14px; font-weight:600; padding:10px 16px; cursor:pointer; border-radius:9px; white-space:nowrap}
nav button.on{color:#fff; background:var(--accent)}
nav button .badge{background:oklch(0 0 0 / .07); border-radius:10px; padding:1px 7px; font-size:12px; margin-left:4px}
nav button.on .badge{background:oklch(1 0 0 / .18); color:#fff}
@media (max-width:700px){
  nav{flex-basis:100%; order:4}
  nav button{flex:1; padding:9px 6px}
}
main{max-width:1000px; margin:0 auto; padding:18px 14px}
h2{font-size:12px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); margin:20px 2px 8px; font-weight:800}
.card{background:var(--surface); backdrop-filter:blur(18px); border:1px solid var(--line); border-radius:16px; padding:17px 18px; margin-bottom:12px; box-shadow:var(--shadow-rim);
  animation:rise .35s cubic-bezier(.32,.72,0,1) both}
@keyframes rise{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){ .card{animation:none} }
.jobrow{display:flex; align-items:center; gap:14px}
.jobmain{flex:1; min-width:0}
.lot{font-family:var(--font-display); font-weight:800; font-size:18px; letter-spacing:.1px}
.lot .chip{margin-left:8px; vertical-align:3px}
.chip{display:inline-flex; min-height:1.6em; align-items:center; font-size:11.5px; font-weight:800; border-radius:999px; padding:3px 11px; white-space:nowrap; font-family:"Manrope",sans-serif}
.chip.inwork{background:var(--yellow); color:var(--yellow-ink)}
.chip.waiting{background:var(--orange); color:var(--orange-ink)}
.chip.ready{background:var(--green); color:var(--green-ink)}
.chip.billed{background:var(--blue); color:var(--blue-ink)}
.chip.paid{background:var(--paid); color:#fff}
.vend{color:var(--muted); font-size:13.5px; margin-top:3px; font-weight:600}
.vend b{color:var(--ink)}
.desc{color:var(--muted); font-size:12.5px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.money{text-align:right; white-space:nowrap}
.money .comm{font-family:var(--font-display); font-weight:800; font-size:23px; letter-spacing:-.2px}
.money .labor{color:var(--muted); font-size:12.5px; font-weight:600; margin-top:3px}
.act{margin-top:12px; display:flex; gap:8px; flex-wrap:wrap}
button.b, a.b{border:0; border-radius:11px; font-size:14px; font-weight:600; padding:11px 17px; cursor:pointer; text-decoration:none; display:inline-block; min-height:2.75rem}
.b.primary{background:var(--billed); color:#fff; box-shadow:var(--shadow-soft)}
.b.primary:hover{background:var(--billed-hover)}
.b.navy{background:var(--accent); color:#fff; box-shadow:var(--shadow-soft)}
.b.go{background:var(--money); color:#fff; box-shadow:var(--shadow-soft)}
.b.go:hover{background:var(--money-hover)}
.b.ghost{background:var(--surface); color:var(--ink); border:1px solid var(--line); box-shadow:inset 0 1px 0 oklch(1 0 0 / .8)}
.b.danger{background:var(--danger); color:#fff}
.b.big{width:100%; padding:14px; font-size:15.5px; border-radius:13px; text-align:center}
.fab{position:fixed; right:18px; bottom:18px; background:var(--accent); color:#fff; border:0; border-radius:14px; padding:16px 24px; font-size:15.5px; font-weight:800; font-family:var(--font-display); box-shadow:0 10px 28px -10px oklch(0.25 0.06 254 / .8); cursor:pointer; z-index:6}
.totbar{background:oklch(0.82 0.11 150 / .22); border:1px solid oklch(0.57 0.15 150 / .3); color:oklch(0.4 0.13 150); border-radius:14px; padding:15px 18px; font-size:15px; font-weight:800; margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.empty{color:var(--muted); font-size:13.5px; padding:10px 4px}
.ginv{font-family:var(--font-display); font-weight:800; font-size:17px}
.notice{border-radius:12px; padding:11px 14px; font-size:13.5px; margin-bottom:10px; font-weight:700}
.notice.ok{background:var(--green); color:var(--green-ink)}
.notice.warn{background:var(--yellow); color:var(--yellow-ink)}
.ov{position:fixed; inset:0; background:oklch(0.2 0.07 260 / .35); display:none; align-items:flex-end; justify-content:center; z-index:10; padding-top:2rem}
.ov.show{display:flex}
.sheet{background:linear-gradient(180deg, oklch(1 0 0 / .93), oklch(0.94 0.018 250 / .9)); backdrop-filter:blur(18px);
  width:min(100%, 48rem); max-height:calc(100vh - 2rem); overflow-y:auto; border:1px solid var(--line); border-bottom:0;
  border-radius:20px 20px 0 0; padding:24px 20px 30px; box-shadow:0 -18px 50px -28px oklch(0.2 0.07 260 / .7); position:relative}
.sheet h3{font-family:var(--font-display); font-size:18px; font-weight:800; margin-bottom:14px; padding-right:44px}
.handle{width:48px; height:5px; border-radius:99px; background:var(--line); margin:-8px auto 16px}
.sheetx{position:absolute; top:18px; right:18px; width:38px; height:38px; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--muted); font-size:20px; cursor:pointer; line-height:1}
.stonehead span{font-size:10.5px; font-weight:800; letter-spacing:.6px; color:var(--muted); text-transform:uppercase}
.stonehead{margin-bottom:4px}
.f{margin-bottom:13px}
.f label{display:block; font-size:12.5px; color:var(--muted); font-weight:800; margin-bottom:5px}
.f input,.f select,.f textarea{width:100%; min-height:3rem; border:1px solid var(--line); border-radius:11px; padding:12px 13px; font-size:16px; font-family:inherit; background:var(--surface); color:var(--ink)}
.f input:focus,.f select:focus,.f textarea:focus{outline:none; border-color:oklch(0.53 0.1 250)}
.f input[type=file]{border-style:dashed; padding:11px; font-size:14px; min-height:0}
.seg{display:flex; background:oklch(1 0 0 / .68); border-radius:12px; margin-bottom:13px; padding:4px; gap:4px; box-shadow:var(--shadow-rim)}
.seg button{flex:1; border:0; min-height:2.75rem; padding:10px; background:transparent; font-size:14.5px; font-weight:600; cursor:pointer; color:var(--muted); border-radius:9px}
.seg button.on{background:var(--accent); color:#fff}
.stoneline{display:flex; gap:8px; margin-bottom:8px; align-items:center}
.stoneline input{border:1px solid var(--line); border-radius:10px; padding:11px 11px; font-size:15px; min-height:3rem; background:var(--surface)}
.ntot{background:oklch(0.82 0.11 150 / .22); border:1px solid oklch(0.57 0.15 150 / .3); color:oklch(0.4 0.13 150); border-radius:13px; padding:14px 16px; font-size:16px; font-weight:800; display:flex; justify-content:space-between; margin-bottom:13px; align-items:center}
.ntot span:last-child{font-family:var(--font-display); font-size:19px}
.link{text-decoration:underline; cursor:pointer}
.spin{display:inline-block; width:14px; height:14px; border:2px solid oklch(1 0 0 / .4); border-top-color:#fff; border-radius:50%; animation:sp .7s linear infinite; vertical-align:-2px; margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}
/* merged pill group (like the top nav) for view switches */
.pillgroup{display:inline-flex; gap:4px; background:oklch(1 0 0 / .68); border-radius:12px; padding:4px; box-shadow:var(--shadow-rim)}
.pillgroup button{border:0; background:transparent; color:var(--muted); font-size:14px; font-weight:600; padding:9px 16px; cursor:pointer; border-radius:9px; white-space:nowrap; min-height:2.6rem}
.pillgroup button.on{background:var(--accent); color:#fff}
/* one-line toolbar: search + pills + action */
.toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px}
.searchin{flex:1 1 240px; min-width:200px; min-height:3rem; border:1px solid var(--line); border-radius:12px;
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748f' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") no-repeat 13px center / 17px;
  padding:0 13px 0 40px; font-size:15.5px; font-family:inherit; color:var(--ink)}
.searchin:focus{outline:none; border-color:oklch(0.53 0.1 250)}
/* + New job placement: inline toolbar button on wide screens, floating button on phones */
@media (min-width:701px){ .fab{display:none} }
@media (max-width:700px){ button.b.newjob-inline{display:none} }
/* login */
.loginbox{max-width:390px; margin:14vh auto; background:var(--surface); backdrop-filter:blur(18px); border:1px solid var(--line); border-radius:20px; padding:32px 28px; box-shadow:var(--shadow-rim)}
.loginbox h1{font-family:var(--font-display); font-size:20px; font-weight:800; margin-bottom:4px; display:flex; align-items:center; gap:10px}
.loginbox p{color:var(--muted); font-size:13px; margin-bottom:18px; font-weight:600}