:root{--y:#F5D90A;--y2:#FFF6B8;--ink:#111;--ink2:#444;--mut:#6b6b6b;--line:#e6e6e6;--bg:#f6f6f4;--card:#fff;--red:#d92d20;--redbg:#fef1f0;--grn:#16a34a;--grnbg:#ecfdf3;--amb:#b45309;--ambbg:#fff7e6;--r:14px;--safe-b:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);padding-bottom:calc(76px + var(--safe-b))}
body.nologin{padding-bottom:0}
a{color:inherit}button,input,select,textarea{font:inherit;color:inherit}
.boot{display:grid;place-items:center;height:70vh}
#top{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line);padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 10px;display:flex;align-items:center;gap:10px}
#top:empty{display:none}
#top .brand{display:flex;align-items:center;gap:8px;text-decoration:none;min-width:0}
#top .brand img{height:30px;width:auto}
#top .brand b{font-size:15px;font-weight:800;letter-spacing:.02em;background:var(--y);padding:3px 7px;border-radius:6px;white-space:nowrap}
#top .sp{flex:1}
#top .dnav{display:none;gap:4px}
#top .dnav a{padding:8px 12px;border-radius:10px;text-decoration:none;font-weight:600;color:var(--ink2)}
#top .dnav a.on{background:var(--y)}
main{max-width:1400px;margin:0 auto;padding:14px 14px 24px}
h1{font-size:24px;margin:4px 0 12px;letter-spacing:-.01em}h2{font-size:17px;margin:20px 0 8px}h3{font-size:15px;margin:0 0 6px}
.mut{color:var(--mut)}.sm{font-size:13px}.row{display:flex;gap:8px;align-items:center}.wrap{flex-wrap:wrap}.grow{flex:1;min-width:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin:0 0 10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:0 16px;border-radius:12px;border:1px solid var(--line);background:#fff;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.98)}
.btn.pri{background:var(--y);border-color:#e3c700;color:#111}
.btn.dark{background:#111;border-color:#111;color:#fff}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.ghost{background:transparent;border-color:transparent}
.btn.sm{min-height:38px;padding:0 12px;font-size:14px;border-radius:10px}
.btn.icon{width:46px;padding:0}.btn.sm.icon{width:40px}
.btn.block{width:100%}
.btn[disabled]{opacity:.5}
.field{display:block;margin:0 0 12px}.field>span{display:block;font-size:13px;font-weight:600;color:var(--ink2);margin:0 0 5px}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=search],input[type=date],input[type=time],input[type=datetime-local],select,textarea{width:100%;min-height:48px;padding:10px 12px;border:1px solid #d4d4d4;border-radius:12px;background:#fff;font-size:16px;-webkit-appearance:none;appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,#555 50%),linear-gradient(135deg,#555 50%,transparent 50%);background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px}
textarea{min-height:84px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--y);outline-offset:1px;border-color:#c9b000}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px;background:#f0f0f0;color:#333;white-space:nowrap}
.badge.pos{background:var(--grnbg);color:var(--grn)}.badge.neg{background:var(--redbg);color:var(--red)}
.badge.stage{background:#111;color:#fff}.badge.won{background:var(--grn);color:#fff}.badge.lost{background:#777;color:#fff}
.badge.sample{background:var(--y2);color:#6b5a00}
.lbl{display:inline-flex;align-items:center;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;color:#fff;white-space:nowrap}
#tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--line);display:flex;padding:6px 6px calc(6px + var(--safe-b))}
#tabs:empty{display:none}
#tabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;font-size:11px;font-weight:600;color:#777;padding:4px 0;position:relative;min-height:50px;justify-content:center}
#tabs a svg{width:25px;height:25px}
#tabs a.on{color:#111}#tabs a.on svg{stroke:#111}
#tabs a.plus span.pl{width:50px;height:50px;border-radius:50%;background:var(--y);display:grid;place-items:center;margin-top:-18px;border:4px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.15)}
#tabs .bdg{position:absolute;top:0;left:calc(50% + 6px);background:var(--red);color:#fff;font-size:11px;font-weight:800;border-radius:999px;min-width:19px;height:19px;padding:0 5px;display:grid;place-items:center}

.login{max-width:400px;margin:0 auto;padding:40px 6px}
.login .logo{display:block;width:230px;max-width:80%;margin:10px auto 6px}
.login .app{text-align:center;font-weight:800;letter-spacing:.04em;margin:0 0 26px}
.login .app span{background:var(--y);padding:3px 9px;border-radius:7px}
.errbox{background:var(--redbg);color:var(--red);border-radius:10px;padding:10px 12px;font-size:14px;font-weight:600;margin:0 0 12px}
.hint{background:#fffbe0;border:1px solid #efd94a;border-radius:12px;padding:12px;font-size:14px;margin:0 0 12px}
.boot{display:grid;place-items:center;height:70vh}
.badge.found{background:var(--grnbg);color:var(--grn)}.badge.review{background:var(--ambbg);color:var(--amb)}.badge.pending{background:#eee;color:#555}.badge.not_found{background:var(--redbg);color:var(--red)}
.item{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center}
.item .t{font-weight:700}.item .s{font-size:13px;color:var(--mut);word-break:break-all}
table.tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:14px}
table.tbl th{background:#fafaf8;text-align:left;font-size:12px;color:var(--mut);padding:9px 10px;border-bottom:1px solid var(--line)}
table.tbl td{padding:9px 10px;border-bottom:1px solid #f0f0ee;vertical-align:top}
.tblwrap{overflow-x:auto}
.progress{height:8px;background:#eee;border-radius:99px;overflow:hidden;margin:8px 0}.progress i{display:block;height:100%;background:var(--y);transition:width .3s}
.dz{border:2px dashed #d4d4d4;border-radius:12px;padding:14px;text-align:center;color:var(--mut);font-size:14px}
@media (min-width:900px){#top .dnav{display:flex}#tabs{display:none}body{padding-bottom:0}main{padding:20px 24px}}
.grow.ptxt{flex:1 1 100%;min-width:100%}
.card .row.wrap{row-gap:10px}
@media(min-width:700px){.grow.ptxt{flex:1 1 240px;min-width:240px}}
@media(max-width:699px){.card .row.wrap>.btn{flex:1 1 140px}}


@keyframes sstrike{0%{opacity:0;transform:scaleY(.1)}30%{opacity:.62}100%{opacity:1;transform:scaleY(1)}}
@keyframes sdust{0%{opacity:0;transform:translateY(14px) scale(.6)}30%{opacity:.9}70%{opacity:.5}100%{opacity:0;transform:translate(22px,-46px) scale(1.1)}}

#tabs a{touch-action:manipulation;-webkit-tap-highlight-color:rgba(245,217,10,.35);min-height:56px}
#tabs a.plus{min-height:56px}
#tabs a:active{opacity:.6}
.boot .spin{width:34px;height:34px;border-radius:50%;border:3px solid #e6e6e6;border-top-color:var(--y);animation:bsp .7s linear infinite}
@keyframes bsp{to{transform:rotate(360deg)}}

html,body{overflow-x:clip;max-width:100%}
main{max-width:100%;overflow-x:clip}
.tblwrap{max-width:100%;-webkit-overflow-scrolling:touch}
#tabs{transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);will-change:transform;width:100%;max-width:100vw}

/* app shell: header and nav are flex siblings, only main scrolls - nav can never float (iOS Safari fixed-position glitch) */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{display:flex;flex-direction:column;height:100vh;height:100dvh;padding-bottom:0!important}
#top{position:relative;flex:0 0 auto;top:auto}
main{flex:1 1 auto;min-height:0;width:100%;max-width:1400px;margin:0 auto;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
#tabs{position:relative;flex:0 0 auto;left:auto;right:auto;bottom:auto;transform:none;will-change:auto;width:100%;max-width:none}
#toast{position:fixed}
@media (min-width:900px){body{align-items:stretch}}

.pwwrap{position:relative;display:block}.pwwrap>input{width:100%;padding-right:46px}
.pweye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:40px;height:40px;display:grid;place-items:center;border:0;background:none;color:var(--ink2,#666);cursor:pointer;border-radius:8px;padding:0}
.pweye{-webkit-tap-highlight-color:transparent;outline:0}.pweye:focus,.pweye:active{background:none}
/* phone: fixture rows become stacked cards so the status and actions are never cut off; package meta wraps on its own line */
.pkg{flex-wrap:wrap}
@media(max-width:699px){
  .tblwrap{overflow-x:visible}
  table.tbl,table.tbl tbody{display:block;width:100%;border:0}
  table.tbl{border:1px solid var(--line)}
  table.tbl thead{display:none}
  table.tbl tr{display:grid;grid-template-columns:34px minmax(0,1fr) auto 38px;grid-template-areas:"n f q d" "c c c c";gap:6px 8px;padding:10px;border-bottom:1px solid #f0f0ee;background:#fff}
  table.tbl tr.sechd{display:block;padding:0}
  table.tbl td{padding:0;border:0;min-width:0;overflow-wrap:anywhere;word-break:break-word}
  table.tbl tr:not(.sechd) td:nth-child(1){grid-area:n;font-weight:700}
  table.tbl tr:not(.sechd) td:nth-child(2){grid-area:f}
  table.tbl tr:not(.sechd) td:nth-child(3){grid-area:q;text-align:right}
  table.tbl tr:not(.sechd) td:nth-child(4){grid-area:c}
  table.tbl tr:not(.sechd) td:nth-child(5){grid-area:d}
  table.tbl tr.sechd td{display:block;padding:8px 10px}
  .pkg>.grow{flex:1 1 100%}
}

#toast{position:fixed;left:50%;top:84px;bottom:auto;transform:translate(-50%,-12px);background:#b3261e;color:#fff;padding:14px 20px;border-radius:14px;font-weight:700;font-size:16px;line-height:1.35;max-width:min(560px,92vw);text-align:center;box-shadow:0 10px 34px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:9999}
#toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto;cursor:pointer}
input.bad,textarea.bad{border-color:#b3261e!important;box-shadow:0 0 0 3px rgba(179,38,30,.25)!important}

.spwrap{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;margin-bottom:6px}.spname{flex:1 1 200px;min-width:0;margin:0;overflow-wrap:anywhere}.spwrap .btn{flex:0 0 auto}
table.tbl.spt td.spl{width:140px}
@media(max-width:699px){table.tbl.spt tr{display:block;padding:8px 10px}table.tbl.spt td{display:block;width:auto!important}table.tbl.spt td.spl{font-weight:700;margin-bottom:1px}.spwrap .btn{width:100%}}

@media(max-width:699px){#tabs{padding-left:2px;padding-right:2px}#tabs a{font-size:10px;letter-spacing:-.1px;min-width:0}#tabs a svg{width:23px;height:23px}#tabs a.plus span.pl{width:46px;height:46px}}

/* library list on phones: readable model + manufacturer columns */
@media(max-width:699px){
  table.tbl.lib tr:not(.sechd){grid-template-columns:minmax(0,1fr) auto 40px;grid-template-areas:"m m d" "f f d" "s s s" "a u u";gap:4px 10px}
  table.tbl.lib tr:not(.sechd) td{overflow-wrap:break-word;word-break:normal;hyphens:none}
  table.tbl.lib tr:not(.sechd) td:nth-child(1){grid-area:m;font-size:16px;font-weight:700}
  table.tbl.lib tr:not(.sechd) td:nth-child(2){grid-area:f;color:var(--mut);font-size:14px}
  table.tbl.lib tr:not(.sechd) td:nth-child(3){grid-area:s;text-align:left;overflow-wrap:anywhere}
  table.tbl.lib tr:not(.sechd) td:nth-child(4){grid-area:a;color:var(--mut)}
  table.tbl.lib tr:not(.sechd) td:nth-child(5){grid-area:u;text-align:right;color:var(--mut)}
  table.tbl.lib tr:not(.sechd) td:nth-child(6){grid-area:d;align-self:start;text-align:right}
}

.spin2{width:38px;height:38px;border-radius:50%;border:4px solid #e6e6e6;border-top-color:#F5D90A;animation:bsp .8s linear infinite}
.ldr{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:60px 0;color:#555;font-size:15px;font-weight:600}
.ldov{position:fixed;inset:0;background:rgba(255,255,255,.85);z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;font-weight:700;font-size:16px}
.ldov .spin2{width:48px;height:48px}

.progress i.ind{width:40%!important;animation:indm 1.1s ease-in-out infinite alternate}
@keyframes indm{from{margin-left:0}to{margin-left:60%}}