:root{
  --ink:#14213D; --ink-deep:#0C1730; --paper:#F2F0EA; --card:#FFFFFF;
  --amber:#FFB100; --amber-bright:#FFC63A; --amber-dark:#8A5A00; --amber-tint:#FFF3D6;
  --teal:#3A6B6B; --teal-light:#E4EEED;
  --green:#2E7D32; --green-tint:#E5F2E6;
  --line:#D8D5CC; --muted:#4A4A44;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--paper);font-family:system-ui,sans-serif;color:var(--ink);font-size:16px;}
.app{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;}

/* Topbar */
.topbar{
  background:linear-gradient(180deg,var(--ink) 0%,var(--ink-deep) 100%);
  color:#fff;padding:20px;
  border-bottom:3px solid var(--amber);
  box-shadow:0 2px 10px rgba(20,33,61,0.25);
}
.brand{font-weight:800;font-size:22px;letter-spacing:1.5px;}
.status-line{margin-top:6px;font-size:15px;color:#D9DEEC;display:flex;align-items:center;gap:8px;}
.status-line::before{
  content:'';width:8px;height:8px;border-radius:50%;background:#5C6B8A;flex:none;
}
.status-line.busy::before{background:var(--amber);animation:pulse-dot 1s ease-in-out infinite;}
@keyframes pulse-dot{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:0.4;transform:scale(1.4);}
}

.screen{flex:1;padding:20px;padding-bottom:110px;}

/* Buttons */
.primary-btn{
  width:100%;min-height:56px;padding:16px;border:none;border-radius:12px;
  background:linear-gradient(180deg,var(--amber-bright),var(--amber));
  color:var(--amber-dark);
  font-weight:700;font-size:17px;cursor:pointer;
  box-shadow:0 3px 8px rgba(255,177,0,0.35),inset 0 1px 0 rgba(255,255,255,0.4);
  transition:transform 0.1s ease,box-shadow 0.15s ease,filter 0.15s ease;
}
.primary-btn:not(:disabled):hover{filter:brightness(1.03);}
.primary-btn:not(:disabled):active{transform:translateY(2px);box-shadow:0 1px 3px rgba(255,177,0,0.3);}
.primary-btn:disabled{opacity:0.65;}

.scan-btn{min-height:68px;font-size:19px;letter-spacing:0.3px;border-radius:16px;}
.scan-btn.scanning{animation:pulse-glow 1.2s ease-in-out infinite;}
@keyframes pulse-glow{
  0%,100%{box-shadow:0 3px 8px rgba(255,177,0,0.35);}
  50%{box-shadow:0 3px 22px rgba(255,177,0,0.75);}
}

.outline-btn{
  min-height:52px;padding:14px;border:2px solid var(--teal);border-radius:12px;
  background:var(--teal-light);color:var(--teal);
  font-weight:600;font-size:16px;cursor:pointer;
  transition:transform 0.1s ease,background 0.15s ease;
}
.outline-btn:active{transform:translateY(2px);background:#D3E3E1;}

.add-btn.added{
  background:var(--green-tint);color:var(--green);
  box-shadow:none;
}

/* Cards */
.card-list{margin-top:20px;display:flex;flex-direction:column;gap:14px;}
.card{
  background:var(--card);border-radius:14px;padding:16px;
  box-shadow:0 2px 6px rgba(20,33,61,0.08),0 8px 20px rgba(20,33,61,0.06);
}
.card-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.card-icon{
  flex:none;width:48px;height:48px;border-radius:50%;
  background:var(--amber-tint);
  display:flex;align-items:center;justify-content:center;font-size:24px;
}
.card-body{min-width:0;}
.card-name{font-weight:700;font-size:19px;margin:0 0 4px;overflow-wrap:break-word;}
.card-meta{font-size:15px;color:var(--muted);margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

.chip{
  display:inline-block;padding:3px 10px;border-radius:999px;
  font-size:13px;font-weight:700;white-space:nowrap;
}
.chip-distance{background:var(--amber-tint);color:var(--amber-dark);}
.chip-route{background:var(--teal-light);color:var(--teal);}
.chip-contacted{background:var(--amber-tint);color:var(--amber-dark);}
.chip-customer{background:var(--green-tint);color:var(--green);}
.chip-neutral{background:#ECEAE3;color:var(--muted);}

.btn-row{display:flex;gap:10px;}
.btn-row .outline-btn,.btn-row .primary-btn{flex:1;min-height:52px;padding:12px;font-size:16px;}

/* Login */
.login-form{display:flex;flex-direction:column;gap:8px;margin-top:20px;}
.login-form label{font-size:16px;font-weight:600;}
.login-form input{font-size:17px;padding:12px;border:1px solid var(--line);border-radius:8px;margin-bottom:8px;background:var(--card);}
.login-form input:focus{outline:2px solid var(--amber);border-color:var(--amber);}

/* Messages */
.error-box{background:#FDECEA;border-left:4px solid #B3261E;padding:14px;border-radius:8px;margin-top:16px;font-size:16px;}
.empty-msg{text-align:center;color:var(--muted);font-size:16px;margin-top:48px;line-height:1.5;}
.empty-icon{display:block;font-size:44px;margin-bottom:12px;}

/* Tabbar */
.tabbar{
  display:flex;position:fixed;bottom:0;left:0;right:0;
  background:var(--card);max-width:480px;margin:0 auto;
  border-top:1px solid var(--line);
  box-shadow:0 -4px 14px rgba(20,33,61,0.10);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));
}
.tab{
  flex:1;padding:8px;border:none;background:none;cursor:pointer;min-height:56px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:14px;font-weight:600;color:var(--muted);
  border-radius:12px;transition:background 0.15s ease,color 0.15s ease;
}
.tab-icon{font-size:20px;line-height:1;}
.tab.active{color:var(--ink);background:var(--amber-tint);}

/* Range picker */
.range-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.range-label{
  font-weight:800;font-size:13px;letter-spacing:1px;
  color:var(--muted);text-transform:uppercase;flex:none;
}
.range-chips{display:flex;gap:8px;flex:1;}
.range-chip{
  flex:1;min-height:44px;padding:8px 4px;border-radius:10px;
  border:2px solid var(--line);background:var(--card);color:var(--muted);
  font-weight:700;font-size:15px;cursor:pointer;
  transition:background 0.15s ease,border-color 0.15s ease,color 0.15s ease;
}
.range-chip.selected{
  border-color:var(--amber);background:var(--amber-tint);color:var(--amber-dark);
}
.range-chip:active{transform:translateY(1px);}