:root{
  --ink:#1C2B33; --ink-soft:#4B5D66; --paper:#EEF2F1; --card:#FFFFFF; --line:#D8E0DE;
  --teal:#0F6E56; --teal-soft:#DCEDE6; --amber:#BA7517; --amber-soft:#F7E9D3;
  --red:#A32D2D; --red-soft:#F5DCDC;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Inter',sans-serif; background:var(--paper); color:var(--ink); min-height:100vh;
  display:flex; flex-direction:column; align-items:center; padding:32px 16px 64px;}
h1,h2,h3{font-family:'Space Grotesk',sans-serif; font-weight:600;}
.mono{font-family:'IBM Plex Mono',monospace;}
.topbar{width:100%; max-width:1000px; display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;}
.brand{display:flex; align-items:center; gap:10px;}
.brand-mark{width:34px; height:34px; border-radius:8px; background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk'; font-weight:700; font-size:15px;}
.brand-name{font-family:'Space Grotesk'; font-weight:600; font-size:17px; letter-spacing:-0.01em;}
.link-btn{font-size:13px; color:var(--ink-soft); text-decoration:none; border:1px solid var(--line); padding:8px 14px; border-radius:9px; background:#fff;}

.phone{width:390px; max-width:100%; background:var(--card); border-radius:28px; border:1px solid var(--line);
  box-shadow:0 20px 50px -25px rgba(28,43,51,0.35); overflow:hidden; min-height:720px; display:flex; flex-direction:column;}
.phone-notch{height:26px; display:flex; justify-content:center; align-items:flex-end; padding-bottom:4px;}
.phone-notch::after{content:''; width:90px; height:6px; background:var(--line); border-radius:4px;}
.screen{flex:1; display:flex; flex-direction:column; padding:20px 20px 24px;}
.hidden{display:none !important;}

.field-label{font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); margin-bottom:6px; display:block;}
input, select, textarea{width:100%; font-family:'Inter'; font-size:15px; color:var(--ink); padding:11px 12px;
  border:1px solid var(--line); border-radius:9px; background:#FBFCFC;}
input:focus, select:focus, textarea:focus{outline:2px solid var(--teal); outline-offset:1px;}
.btn{font-family:'Inter'; font-weight:600; font-size:14px; padding:13px 18px; border-radius:10px; border:none;
  cursor:pointer; width:100%; display:flex; align-items:center; justify-content:center; gap:8px;}
.btn-primary{background:var(--teal); color:#fff;}
.btn-primary:disabled{background:#A9C6BE; cursor:not-allowed;}
.btn-ghost{background:transparent; color:var(--ink-soft); border:1px solid var(--line);}
.btn-danger{background:var(--red); color:#fff;}
.btn-row{display:flex; gap:10px; margin-top:14px;}

.waybill{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 14px 14px 16px;
  margin-bottom:10px; cursor:pointer; border-left:3px solid var(--teal); display:flex; flex-direction:column; gap:4px;}
.waybill.status-inproduction{border-left-color:var(--amber);}
.waybill-top{display:flex; justify-content:space-between; align-items:baseline;}
.order-no{font-size:13px; font-weight:600; letter-spacing:0.02em;}
.client-name{font-size:14px; font-weight:600; color:var(--ink);}
.waybill-sub{font-size:12px; color:var(--ink-soft);}
.status-pill{font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; padding:3px 8px; border-radius:20px;}
.status-pill.delivered{background:var(--teal-soft); color:var(--teal);}
.status-pill.inproduction{background:var(--amber-soft); color:var(--amber);}
.status-pill.cancelled{background:var(--paper); color:var(--ink-soft);}

.screen-header{display:flex; align-items:center; gap:10px; margin-bottom:18px;}
.back-btn{width:32px; height:32px; border-radius:8px; border:1px solid var(--line); background:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;}
.screen-title{font-size:16px;}
.screen-title small{display:block; font-size:12px; font-weight:400; color:var(--ink-soft); font-family:'Inter';}

.detail-card{background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:14px;}
.detail-row{display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px dashed var(--line); font-size:13px;}
.detail-row:last-child{border-bottom:none;}
.detail-row span:first-child{color:var(--ink-soft);}
.detail-row span:last-child{font-weight:500; text-align:right; max-width:60%;}

canvas.sigpad{width:100%; height:130px; border:1px dashed var(--line); border-radius:9px; background:#FBFCFC; touch-action:none;}
.sig-hint{font-size:11px; color:var(--ink-soft); margin-top:6px;}
.list-scroll{overflow-y:auto; flex:1; margin:0 -4px; padding:0 4px;}
.empty-state{text-align:center; color:var(--ink-soft); font-size:13px; padding:40px 10px;}

.tabbar{display:flex; border-top:1px solid var(--line); background:#fff;}
.tabbar button{flex:1; background:none; border:none; padding:12px 0 10px; font-family:'Inter'; font-size:11px;
  color:var(--ink-soft); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px;}
.tabbar button.active{color:var(--teal); font-weight:600;}
.tab-dot{width:6px; height:6px; border-radius:50%; background:currentColor; opacity:0.15;}
.tabbar button.active .tab-dot{opacity:1;}

.pin-dots{display:flex; gap:10px; justify-content:center; margin:18px 0 6px;}
.pin-dot{width:14px; height:14px; border-radius:50%; border:1.5px solid var(--line);}
.pin-dot.filled{background:var(--ink); border-color:var(--ink);}
.keypad{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:14px;}
.keypad button{padding:16px 0; border-radius:12px; border:1px solid var(--line); background:#fff;
  font-family:'Space Grotesk'; font-size:18px; font-weight:600; cursor:pointer; color:var(--ink);}
.keypad button:active{background:var(--paper);}

.person-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px;}
.person-tile{padding:14px 10px; border:1px solid var(--line); border-radius:11px; background:#fff; cursor:pointer;
  font-size:13px; font-weight:600; text-align:center;}
.person-tile:hover{border-color:var(--teal);}

.camera-box{height:220px; border-radius:12px; background:#0F1B20; display:flex; flex-direction:column;
  align-items:center; justify-content:center; color:#fff; gap:10px; position:relative; overflow:hidden;}
.camera-box img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.camera-icon{font-size:28px;}

.combo{position:relative;}
.combo input#pickupDoctorSearch{margin-bottom:16px;}
.combo-list{
  position:absolute; top:calc(100% - 12px); left:0; right:0; z-index:20;
  background:#fff; border:1px solid var(--line); border-radius:9px; box-shadow:0 12px 24px -12px rgba(28,43,51,0.35);
  max-height:220px; overflow-y:auto;
}
.combo-item{padding:10px 12px; font-size:13px; cursor:pointer; border-bottom:1px solid var(--line);}
.combo-item:last-child{border-bottom:none;}
.combo-item:hover, .combo-item.active{background:var(--paper);}
.combo-item mark{background:var(--amber-soft); color:var(--amber); border-radius:3px; padding:0 1px;}
.combo-empty{padding:12px; font-size:13px; color:var(--ink-soft); text-align:center;}

.admin-wrap{width:100%; max-width:1000px; display:flex; flex-direction:column; gap:20px;}
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.stat-card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px;}
.stat-num{font-family:'Space Grotesk'; font-size:26px; font-weight:700;}
.stat-label{font-size:12px; color:var(--ink-soft); margin-top:2px;}
table{width:100%; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden; border:1px solid var(--line);}
th, td{text-align:left; padding:11px 14px; font-size:13px; border-bottom:1px solid var(--line);}
th{color:var(--ink-soft); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:0.04em; background:#F6F8F7;}
tr:last-child td{border-bottom:none;}
tr.clickrow{cursor:pointer;}
tr.clickrow:hover{background:#FAFBFA;}
.bar-track{background:var(--paper); border-radius:6px; height:8px; width:120px; overflow:hidden;}
.bar-fill{background:var(--teal); height:100%;}
.panel-title{display:flex; justify-content:space-between; align-items:center;}
.drill{padding:16px; background:#fff; border:1px solid var(--line); border-radius:12px; font-size:13px;}
.proof-thumb{border:1px dashed var(--line); border-radius:8px; overflow:hidden;}

.login-card{width:340px; max-width:100%; background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px; margin-top:60px;}
.error-text{color:var(--red); font-size:13px; margin-top:8px;}
.import-drop{border:1.5px dashed var(--line); border-radius:12px; padding:24px; text-align:center; color:var(--ink-soft); font-size:13px;}

.stats-strip{display:flex; gap:8px; margin-bottom:14px;}
.stats-strip .stat-chip{flex:1; background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 8px; text-align:center;}
.stats-strip .stat-chip .num{font-family:'Space Grotesk'; font-size:18px; font-weight:700;}
.stats-strip .stat-chip .lbl{font-size:10px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; margin-top:1px;}

.team-person{background:#fff; border:1px solid var(--line); border-radius:12px; margin-bottom:10px; overflow:hidden;}
.team-person-head{padding:12px 14px; display:flex; justify-content:space-between; align-items:center; cursor:pointer;}
.team-person-name{font-size:14px; font-weight:600;}
.team-person-counts{font-size:12px; color:var(--ink-soft);}
.team-person-counts .pending-badge{color:var(--amber); font-weight:600;}
.team-person-body{border-top:1px solid var(--line); padding:8px 10px;}
.team-person-body .waybill{margin:6px 0;}
.team-empty-note{font-size:12px; color:var(--ink-soft); padding:0 4px 4px;}

.role-badge{font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; padding:2px 8px; border-radius:20px; background:var(--teal-soft); color:var(--teal);}
.role-badge.manager{background:var(--amber-soft); color:var(--amber);}
.role-badge.frontdesk{background:var(--pink-soft,#F5DCEA); color:#993556;}

.manual-badge{font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.03em; padding:2px 7px; border-radius:14px; background:var(--amber-soft); color:var(--amber); display:inline-block;}
.totals-link{display:block; text-align:center; margin-top:16px; font-size:13px; color:var(--teal); text-decoration:none; font-weight:600;}
.reassign-row{display:flex; align-items:center; gap:8px; margin-top:4px;}
.reassign-row select{font-size:12px; padding:5px 6px; flex:1;}

.status-pill.scheduled{background:var(--amber-soft); color:var(--amber);}
.doctor-card{background:#fff; border:1px solid var(--line); border-left:3px solid var(--amber); border-radius:12px; padding:13px 14px; margin-bottom:10px; cursor:pointer;}
.doctor-card.all-done{border-left-color:var(--teal);}
.doctor-card-top{display:flex; justify-content:space-between; align-items:center; gap:8px;}
.doctor-card .client-name{margin:0;}
.doctor-count{font-family:'Space Grotesk'; font-size:13px; font-weight:700; background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:3px 11px; white-space:nowrap;}
.doctor-card .waybill-sub{margin-top:3px;}

.order-check-row{display:flex; align-items:flex-start; gap:11px; background:#fff; border:1px solid var(--line); border-radius:11px; padding:12px; margin-bottom:8px;}
.order-check-row.checked{border-color:var(--teal); background:var(--teal-soft);}
.order-check-row.done{opacity:0.9;}
.order-check-row input[type=checkbox]{width:19px; height:19px; margin-top:2px; accent-color:var(--teal); flex-shrink:0;}
.order-check-body{flex:1; min-width:0;}
.order-check-body .order-no{font-size:11.5px;}
.order-check-body .ocr-patient{font-size:13px; font-weight:600; margin-top:1px;}
.order-check-body .ocr-product{font-size:12px; color:var(--ink-soft); margin-top:1px;}
.order-check-body .ocr-proofline{font-size:11.5px; color:var(--teal); margin-top:3px; font-weight:600;}
.mark-all-row{display:flex; justify-content:space-between; align-items:center; margin-top:4px;}
.mark-all-row a{font-size:12.5px; color:var(--teal); text-decoration:none; font-weight:600;}