:root{
  --ink:#1A2332;
  --ink-soft:#2E3B52;
  --paper:#FAFAF7;
  --paper-dim:#F0EEE6;
  --slate:#6B7280;
  --line:#DAD5C8;
  --amber:#F2A900;
  --amber-dark:#B87E00;
  --green:#2E7D5B;
  --green-bg:#E4F1EB;
  --red:#C4453D;
  --red-bg:#FBEAE9;
  --radius:14px;
}
*{box-sizing:border-box;}
body{margin:0;-webkit-tap-highlight-color:transparent;}
#app{
  font-family:'Inter',sans-serif;
  background:var(--paper);
  color:var(--ink);
  min-height:100vh;
  max-width:480px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  position:relative;
}
.mono{font-family:'IBM Plex Mono',monospace;}
header{
  background:var(--ink); color:var(--paper); padding:16px 18px 14px;
  display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:20;
}
header .brand{display:flex; align-items:center; gap:9px;}
header .brand .mark{
  width:28px;height:28px;border:2px solid var(--amber);border-radius:6px;
  display:flex;align-items:center;justify-content:center; color:var(--amber);
  font-weight:700; font-size:14px; font-family:'Barlow Condensed',sans-serif; transform:rotate(-6deg);
}
header h1{font-size:21px;margin:0;font-weight:700;letter-spacing:0.03em;}
header .profile-pill{font-size:11px; color:var(--paper); opacity:0.85; text-align:right; cursor:pointer; line-height:1.3;}
header .profile-pill b{display:block; font-size:12px; opacity:1;}
main{flex:1; padding:16px 16px 90px; overflow-y:auto;}
nav.tabbar{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px;
  background:var(--paper); border-top:1px solid var(--line); display:flex; z-index:30;
}
nav.tabbar button{
  flex:1; background:none; border:none; padding:11px 0 9px; display:flex; flex-direction:column;
  align-items:center; gap:3px; color:var(--slate); font-family:'Inter',sans-serif; font-size:11px; font-weight:600; cursor:pointer;
}
nav.tabbar button.active{color:var(--ink);}
nav.tabbar button .dot{width:5px;height:5px;border-radius:50%;background:transparent;}
nav.tabbar button.active .dot{background:var(--amber);}
.fab{
  position:fixed; bottom:76px; left:50%; transform:translateX(calc(-50% + 172px)); width:52px;height:52px;border-radius:50%;
  background:var(--amber); color:var(--ink); border:none; font-size:26px; font-weight:700;
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(0,0,0,0.25); cursor:pointer; z-index:31;
}
.section-eyebrow{
  font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  font-size:13px; color:var(--slate); margin:4px 0 10px;
}
.filters{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap;}
.filters select{font-family:'Inter',sans-serif; font-size:12.5px; padding:7px 10px; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--ink);}
.ticket{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); margin-bottom:14px;
  overflow:hidden; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,0.03);
}
.ticket-head{padding:13px 14px 4px; display:flex; justify-content:space-between; align-items:flex-start; gap:8px;}
.ticket-head .job-title{font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:19px; line-height:1.1;}
.job-meta{padding:0 14px; font-size:12px; color:var(--slate); font-family:'IBM Plex Mono',monospace;}
.status-badge{
  font-size:10.5px; font-weight:700; padding:4px 9px; border-radius:20px; white-space:nowrap;
  font-family:'Inter',sans-serif; letter-spacing:0.02em; text-transform:uppercase;
}
.status-pending{background:var(--paper-dim); color:var(--slate);}
.status-in_progress{background:#FDF1D9; color:var(--amber-dark);}
.status-submitted{background:#E6EEF7; color:#2E5C8A;}
.status-approved{background:var(--green-bg); color:var(--green);}
.status-flagged{background:var(--red-bg); color:var(--red);}
.photo-pair{display:flex; padding:12px 14px 14px; gap:0; align-items:stretch;}
.photo-slot{flex:1; position:relative;}
.photo-slot img{width:100%; height:92px; object-fit:cover; border-radius:8px; display:block;}
.photo-slot .empty{
  width:100%; height:92px; border-radius:8px; border:1.5px dashed var(--line); display:flex;
  align-items:center; justify-content:center; color:var(--slate); font-size:11px; font-family:'IBM Plex Mono',monospace;
}
.photo-slot .tag{
  position:absolute; top:5px; left:5px; background:rgba(26,35,50,0.75); color:#fff; font-size:9px;
  padding:2px 6px; border-radius:5px; font-family:'IBM Plex Mono',monospace; letter-spacing:0.03em;
}
.perf{width:14px; position:relative; flex-shrink:0;}
.perf::before{content:''; position:absolute; left:50%; top:0; bottom:0; width:0; border-left:1.5px dashed var(--line);}
.stamp{
  position:absolute; top:10px; right:8px; border:2.5px solid var(--green); color:var(--green);
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:11px; letter-spacing:0.06em;
  padding:2px 7px; border-radius:5px; transform:rotate(-9deg); background:rgba(255,255,255,0.85); text-transform:uppercase;
}
.stamp.flag{border-color:var(--red); color:var(--red);}
.empty-state{text-align:center; padding:50px 20px; color:var(--slate);}
.empty-state .icon{font-size:34px; margin-bottom:10px;}
.empty-state h3{font-family:'Barlow Condensed',sans-serif; font-size:20px; color:var(--ink); margin:0 0 6px; text-transform:uppercase;}
.empty-state p{font-size:13px; margin:0 0 16px; line-height:1.5;}
.btn{
  font-family:'Inter',sans-serif; font-weight:600; font-size:14px; padding:11px 18px; border-radius:10px;
  border:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; justify-content:center;
}
.btn-primary{background:var(--ink); color:var(--paper);}
.btn-amber{background:var(--amber); color:var(--ink);}
.btn-green{background:var(--green); color:#fff;}
.btn-red{background:var(--red); color:#fff;}
.btn-ghost{background:none; color:var(--ink); border:1.5px solid var(--line);}
.btn-block{width:100%;}
.btn:disabled{opacity:0.4; cursor:not-allowed;}
.field{margin-bottom:14px;}
.field label{display:block; font-size:12px; font-weight:600; color:var(--slate); margin-bottom:5px; text-transform:uppercase; letter-spacing:0.03em;}
.field input, .field select, .field textarea{
  width:100%; padding:11px 12px; border-radius:9px; border:1px solid var(--line);
  font-family:'Inter',sans-serif; font-size:15px; background:#fff; color:var(--ink);
}
.field textarea{resize:vertical; min-height:60px;}
.onboard{min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:32px;}
.onboard .mark-big{
  width:56px;height:56px;border:3px solid var(--amber);border-radius:12px; display:flex;align-items:center;justify-content:center;
  color:var(--amber); font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:26px; transform:rotate(-6deg); margin-bottom:18px;
}
.onboard h1{font-family:'Barlow Condensed',sans-serif; font-size:34px; margin:0 0 6px; text-transform:uppercase;}
.onboard p.sub{color:var(--slate); font-size:14px; margin:0 0 24px;}
.role-pick{display:flex; gap:10px; margin-bottom:6px;}
.role-pick button{
  flex:1; padding:16px 10px; border-radius:12px; border:1.5px solid var(--line); background:#fff;
  font-family:'Inter',sans-serif; font-weight:600; font-size:14px; cursor:pointer; color:var(--slate);
}
.role-pick button.selected{border-color:var(--ink); background:var(--ink); color:#fff;}
.auth-toggle{text-align:center; font-size:13px; color:var(--slate); margin-top:16px;}
.auth-toggle a{color:var(--ink); font-weight:600; text-decoration:underline; cursor:pointer;}
.error-banner{background:var(--red-bg); color:var(--red); padding:10px 12px; border-radius:9px; font-size:13px; margin-bottom:14px;}
.invite-box{
  background:var(--paper-dim); border-radius:10px; padding:12px; text-align:center; margin-top:6px;
}
.invite-box .code{font-family:'IBM Plex Mono',monospace; font-size:22px; font-weight:600; letter-spacing:0.1em; color:var(--ink);}
.invite-box .label{font-size:11px; color:var(--slate); text-transform:uppercase; letter-spacing:0.04em;}
.overlay{position:fixed; inset:0; background:rgba(26,35,50,0.55); z-index:50; display:flex; align-items:flex-end; justify-content:center;}
.sheet{background:var(--paper); width:100%; max-width:480px; border-radius:20px 20px 0 0; max-height:92vh; overflow-y:auto; padding:20px 18px 26px;}
.sheet-close{
  position:sticky; top:0; float:right; background:var(--paper-dim); border:none; width:30px;height:30px;
  border-radius:50%; font-size:16px; cursor:pointer; color:var(--slate);
}
.capture-row{display:flex; gap:10px; margin:12px 0;}
.capture-slot{flex:1; text-align:center;}
.capture-slot label.upl{
  display:block; border:1.5px dashed var(--line); border-radius:12px; padding:0; height:150px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; position:relative; background:#fff;
}
.capture-slot label.upl img{width:100%;height:100%;object-fit:cover;}
.capture-slot .cap-label{font-size:11px; color:var(--slate); margin-top:6px; font-family:'IBM Plex Mono',monospace; text-transform:uppercase;}
.capture-slot input{display:none;}

.photo-section{margin:14px 0 6px;}
.photo-section .cap-label{font-size:11px; color:var(--slate); margin-bottom:8px; font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:0.03em;}
.photo-gallery{display:flex; flex-wrap:wrap; gap:8px;}
.photo-thumb{
  width:78px; height:78px; border-radius:9px; overflow:hidden; position:relative; cursor:pointer; flex-shrink:0;
  border:1px solid var(--line);
}
.photo-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.photo-thumb .who{
  position:absolute; bottom:0; left:0; right:0; background:rgba(26,35,50,0.7); color:#fff; font-size:8px;
  padding:2px 4px; font-family:'IBM Plex Mono',monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.photo-tile-add{
  width:78px; height:78px; border-radius:9px; border:1.5px dashed var(--line); background:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative;
}
.photo-tile-add input{display:none;}
.photo-tile-add .plus-icon{font-size:24px; color:var(--slate);}

.lightbox-overlay{
  position:fixed; inset:0; background:rgba(10,14,20,0.92); z-index:70; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:20px;
}
.lightbox-overlay img{max-width:100%; max-height:70vh; border-radius:10px; object-fit:contain;}
.lightbox-meta{color:#fff; font-size:12px; margin-top:12px; font-family:'IBM Plex Mono',monospace; text-align:center;}
.lightbox-close{
  position:absolute; top:20px; right:20px; background:rgba(255,255,255,0.15); color:#fff; border:none;
  width:36px;height:36px; border-radius:50%; font-size:18px; cursor:pointer;
}
.plus-icon{font-size:28px; color:var(--slate);}
.toast{
  position:fixed; bottom:96px; left:50%; transform:translateX(-50%); z-index:60; background:var(--ink); color:#fff;
  padding:10px 18px; border-radius:20px; font-size:13px; font-weight:500; box-shadow:0 6px 18px rgba(0,0,0,0.25);
}
.loading-screen{min-height:100vh; display:flex; align-items:center; justify-content:center; color:var(--slate); font-family:'IBM Plex Mono',monospace; font-size:13px;}
.switch-link{font-size:11px; color:var(--slate); text-decoration:underline; cursor:pointer; margin-top:2px;}