/* =========================================================================
   Pigee Courier — Client Portal (pastel orange theme)
   ========================================================================= */
:root{
  --cl-orange:#E8814A; --cl-orange-d:#D06A33; --cl-orange-50:#FDF2EA;
  --cl-peach:#FBE3D2; --cl-cream:#FFF9F4; --cl-ink:#3A2A20; --cl-body:#6B5848;
  --cl-muted:#9A8676; --cl-line:#F0DECF; --cl-card:#fff;
  --cl-radius:18px; --cl-radius-sm:12px;
  --cl-shadow:0 18px 50px -24px rgba(160,90,40,.35);
  --cl-font:'Inter',-apple-system,Segoe UI,Roboto,sans-serif;
  --cl-serif:'Newsreader',Georgia,serif;
  --cl-ok:#2f9e6a; --cl-okbg:#e7f6ee; --cl-warn:#c47a25; --cl-warnbg:#fdf1e2;
}
*{box-sizing:border-box;margin:0;padding:0}
.cl-body{font-family:var(--cl-font);color:var(--cl-ink);background:var(--cl-cream);min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:var(--cl-orange-d)}
.cl-splash{min-height:60vh;display:grid;place-items:center}
.cl-spinner{width:34px;height:34px;border:3px solid var(--cl-peach);border-top-color:var(--cl-orange);border-radius:50%;animation:cl-spin .8s linear infinite}
@keyframes cl-spin{to{transform:rotate(360deg)}}

/* ── Auth screens ── */
.cl-auth{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(900px 500px at 85% -10%,rgba(232,129,74,.22),transparent 55%),radial-gradient(900px 600px at 0% 110%,rgba(251,227,210,.6),transparent 55%),var(--cl-cream)}
.cl-auth-card{background:#fff;border-radius:var(--cl-radius);box-shadow:var(--cl-shadow);max-width:430px;width:100%;padding:38px 34px}
.cl-logo{font-weight:800;font-size:20px;color:var(--cl-orange-d);display:flex;align-items:center;gap:8px;margin-bottom:18px}
.cl-logo img{height:30px;width:30px;border-radius:7px}
.cl-h{font-weight:800;font-size:26px;letter-spacing:-.02em;margin-bottom:6px}
.cl-h em{font-family:var(--cl-serif);font-style:italic;font-weight:500;color:var(--cl-orange)}
.cl-sub{color:var(--cl-muted);font-size:14px;margin-bottom:22px;line-height:1.5}
.cl-field{margin-bottom:14px}
.cl-field label{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
.cl-input,.cl-select,textarea.cl-input{width:100%;border:1px solid var(--cl-line);border-radius:10px;padding:12px 14px;font-size:15px;font-family:inherit;background:#fff;color:var(--cl-ink)}
.cl-input:focus,.cl-select:focus,textarea.cl-input:focus{outline:none;border-color:var(--cl-orange);box-shadow:0 0 0 3px rgba(232,129,74,.15)}
.cl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:11px;font-weight:700;font-size:15px;padding:13px 22px;cursor:pointer;font-family:inherit;transition:transform .12s,box-shadow .2s,background .2s}
.cl-btn-primary{background:linear-gradient(135deg,var(--cl-orange),var(--cl-orange-d));color:#fff;box-shadow:0 10px 26px -10px rgba(208,106,51,.7)}
.cl-btn-primary:hover{transform:translateY(-1px)}
.cl-btn-primary:disabled{opacity:.6;cursor:default;transform:none}
.cl-btn-ghost{background:var(--cl-orange-50);color:var(--cl-orange-d);border:1px solid var(--cl-line)}
.cl-btn-ghost:hover{background:var(--cl-peach)}
.cl-btn-block{width:100%}
.cl-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--cl-muted);font-size:13px}
.cl-or::before,.cl-or::after{content:"";flex:1;height:1px;background:var(--cl-line)}
.cl-gbtn{display:flex;justify-content:center;margin-bottom:6px}
.cl-switch{text-align:center;font-size:14px;margin-top:16px;color:var(--cl-muted)}
.cl-switch a{color:var(--cl-orange-d);font-weight:600;cursor:pointer;text-decoration:none}
.cl-msg{font-size:14px;padding:11px 14px;border-radius:10px;margin-bottom:14px;display:none}
.cl-msg.err{display:block;background:#fdecec;color:#b3261e}
.cl-msg.ok{display:block;background:var(--cl-okbg);color:var(--cl-ok)}

/* ── App shell ── */
.cl-shell{min-height:100vh;display:flex;flex-direction:column}
.cl-top{background:#fff;border-bottom:1px solid var(--cl-line);position:sticky;top:0;z-index:30;padding-top:env(safe-area-inset-top)}
.cl-top-row{display:flex;align-items:center;gap:14px;padding:0 22px;height:62px;max-width:1100px;margin:0 auto;width:100%}
.cl-top h1{font-size:19px;font-weight:800;letter-spacing:-.01em}
.cl-top .cl-spacer{flex:1}
.cl-tabs{display:flex;gap:4px;padding:0 22px;max-width:1100px;margin:0 auto;width:100%;overflow-x:auto}
.cl-tab{background:none;border:none;padding:13px 14px;font-family:inherit;font-size:14px;font-weight:600;color:var(--cl-muted);cursor:pointer;border-bottom:2.5px solid transparent;white-space:nowrap}
.cl-tab.active{color:var(--cl-orange-d);border-bottom-color:var(--cl-orange)}
.cl-main{flex:1;max-width:1100px;margin:0 auto;width:100%;padding:24px 22px 60px}
.cl-card{background:var(--cl-card);border:1px solid var(--cl-line);border-radius:var(--cl-radius);box-shadow:var(--cl-shadow);padding:24px;margin-bottom:18px}
.cl-card h2{font-size:18px;font-weight:800;margin-bottom:4px}
.cl-card .cl-card-sub{color:var(--cl-muted);font-size:13px;margin-bottom:16px}
.cl-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.cl-row{grid-template-columns:1fr}.cl-tabs{padding:0 12px}.cl-main{padding:18px 14px 50px}}
.cl-pill{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:100px;background:var(--cl-orange-50);color:var(--cl-orange-d)}
.cl-pill-ok{background:var(--cl-okbg);color:var(--cl-ok)}
.cl-pill-warn{background:var(--cl-warnbg);color:var(--cl-warn)}
.cl-table{width:100%;border-collapse:collapse;font-size:14px}
.cl-table th{text-align:left;color:var(--cl-muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid var(--cl-line)}
.cl-table td{padding:11px 10px;border-bottom:1px solid var(--cl-line)}
.cl-empty{text-align:center;color:var(--cl-muted);padding:32px 16px;font-size:14px}
.cl-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--cl-orange-d);color:#fff;padding:12px 20px;border-radius:11px;font-weight:600;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.2);z-index:2000}

/* Cost summary box */
.cl-cost{background:var(--cl-orange-50);border:1px solid var(--cl-peach);border-radius:var(--cl-radius-sm);padding:18px;margin:16px 0}
.cl-cost-row{display:flex;justify-content:space-between;font-size:14px;padding:4px 0;color:var(--cl-body)}
.cl-cost-row.total{border-top:1px solid var(--cl-peach);margin-top:8px;padding-top:10px;font-weight:800;font-size:18px;color:var(--cl-ink)}

/* AI suggestion card */
.cl-ai{background:linear-gradient(135deg,#fff,var(--cl-orange-50));border:1px solid var(--cl-peach);border-radius:var(--cl-radius-sm);padding:18px;margin:14px 0}
.cl-ai-h{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;margin-bottom:8px}
.cl-ai-big{font-size:30px;font-weight:800;color:var(--cl-orange-d);letter-spacing:-.02em}
.cl-checkline{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--cl-body);margin:7px 0;line-height:1.45}
.cl-checkline svg{flex:none;margin-top:2px}
.cl-api-card{display:flex;gap:14px;align-items:center;border:1px solid var(--cl-line);border-radius:var(--cl-radius-sm);padding:16px;margin-bottom:12px}
.cl-api-card .cl-api-ic{width:42px;height:42px;border-radius:10px;background:var(--cl-orange-50);display:grid;place-items:center;font-size:20px;flex:none}
.cl-foot{text-align:center;color:var(--cl-muted);font-size:12px;padding:20px}
.cl-foot a{color:var(--cl-orange-d);font-weight:600;text-decoration:none}
.cl-dz{border:2px dashed var(--cl-peach);border-radius:var(--cl-radius-sm);padding:28px;text-align:center;color:var(--cl-muted);cursor:pointer;transition:border-color .2s,background .2s}
.cl-dz:hover{border-color:var(--cl-orange);background:var(--cl-orange-50)}

/* ── v1.15 client portal additions ── */
.cl-info-banner{background:var(--cl-orange-50);border:1px solid var(--cl-peach);border-radius:var(--cl-radius-sm);padding:13px 16px;font-size:14px;color:#7a5a44;margin-bottom:16px;line-height:1.5}
.cl-map-box{background:var(--cl-cream);border:1px solid var(--cl-line);border-radius:var(--cl-radius-sm);padding:18px;margin:14px 0}
.cl-batch{border:1px solid var(--cl-line);border-radius:var(--cl-radius-sm);padding:16px;margin-bottom:12px;background:#fff}
.cl-batch-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.cl-batch-meta{font-size:13px;color:#9A8676;margin-top:4px}
.cl-prog{height:8px;background:var(--cl-peach);border-radius:100px;margin-top:12px;overflow:hidden}
.cl-prog-bar{height:100%;background:linear-gradient(90deg,var(--cl-orange),var(--cl-orange-d));border-radius:100px;transition:width .4s}
.cl-terms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px;padding-top:14px;border-top:1px solid var(--cl-line)}
@media(max-width:560px){.cl-terms-grid{grid-template-columns:1fr}}
.cl-tlabel{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#9A8676;font-weight:700}
.cl-tval{font-size:15px;font-weight:600;margin-top:3px;display:flex;align-items:center;flex-wrap:wrap}
.cl-pending{background:#fff6ef;border:1px solid var(--cl-peach);border-radius:var(--cl-radius-sm);padding:13px 15px;margin-top:14px;font-size:14px;color:#7a5a44}
.cl-ins-card .cl-checkline{margin:9px 0}
.cl-linkx{background:none;border:none;color:#c0392b;font-size:16px;cursor:pointer;padding:4px 8px}
/* modal */
.cl-modal-scrim{position:fixed;inset:0;background:rgba(40,24,12,.5);display:grid;place-items:center;z-index:1000;padding:20px}
.cl-modal{background:#fff;border-radius:var(--cl-radius);max-width:760px;width:100%;max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--cl-shadow)}
.cl-modal-h{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--cl-line)}
.cl-modal-h h3{font-size:18px;font-weight:800}
.cl-x{background:none;border:none;font-size:24px;cursor:pointer;color:var(--cl-muted);line-height:1}
.cl-modal-b{padding:18px 22px;overflow:auto}
.cl-modal-f{display:flex;align-items:center;gap:10px;padding:16px 22px;border-top:1px solid var(--cl-line)}
.cl-modal-b .cl-input{padding:8px 10px;font-size:14px}

/* ── v1.16 integrations / analytics / recurring ── */
.cl-int-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0;padding-bottom:10px;border-bottom:1px solid var(--cl-line)}
.cl-int-row b{font-size:13px}
.cl-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;background:#fbf4ee;border:1px solid var(--cl-line);border-radius:7px;padding:5px 9px;color:#7a5a44;word-break:break-all}
.cl-code-block{display:inline-block;max-width:100%}
.cl-int-block{margin-top:16px}
.cl-int-h{font-weight:800;font-size:14px;margin-bottom:5px}
.cl-int-p{font-size:13px;color:#6B5848;line-height:1.5;margin-bottom:7px}
.cl-int-note{font-size:12px;color:#9A8676;margin-top:6px}
.cl-int-details{margin-top:8px}
.cl-int-details summary{cursor:pointer;font-size:13px;color:var(--cl-orange-d);font-weight:600}
.cl-pre{background:#2b2018;color:#f3e6da;border-radius:9px;padding:14px;font-size:12px;overflow:auto;margin-top:8px;font-family:ui-monospace,Menlo,Consolas,monospace}
.cl-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:680px){.cl-stat-grid{grid-template-columns:repeat(2,1fr)}}
.cl-stat{background:var(--cl-orange-50);border:1px solid var(--cl-peach);border-radius:var(--cl-radius-sm);padding:14px}
.cl-stat-v{font-size:24px;font-weight:800;color:var(--cl-ink);letter-spacing:-.02em}
.cl-stat-l{font-size:12px;color:#9A8676;margin-top:2px}
.cl-spark{display:flex;align-items:flex-end;gap:6px;height:72px;padding:8px;background:var(--cl-cream);border-radius:var(--cl-radius-sm)}
.cl-spark-col{flex:1;display:flex;align-items:flex-end;justify-content:center}
.cl-spark-bar{width:60%;background:linear-gradient(180deg,var(--cl-orange),var(--cl-orange-d));border-radius:4px 4px 0 0;min-height:4px}
.cl-days{display:flex;gap:6px;flex-wrap:wrap}
.cl-day{display:flex;align-items:center;gap:4px;font-size:13px;background:var(--cl-orange-50);border:1px solid var(--cl-line);border-radius:8px;padding:6px 10px;cursor:pointer}

.cl-terms{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--cl-body);margin:4px 0 14px;line-height:1.45}
.cl-terms input{margin-top:2px;flex:none}

/* One-click store connect rows */
.cl-conn-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--cl-line)}
.cl-conn-ic{width:34px;height:34px;border-radius:8px;color:#fff;font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;flex:none}
.cl-pill{display:inline-block;font-size:12px;padding:3px 9px;border-radius:6px;background:var(--cl-orange-50);color:#7a5a44}
.cl-pill-ok{background:#E1F5EE;color:#0F6E56}

/* Support */
.cl-trow{cursor:pointer}
.cl-trow:hover{background:var(--cl-orange-50)}
.cl-err{color:#b3261e;font-size:13px;margin-top:8px}
.cl-thread{display:flex;flex-direction:column;gap:10px;max-height:50vh;overflow:auto;margin-bottom:12px}
.cl-msg-who{font-size:11px;color:#9A8676;margin-bottom:4px}
.cl-msg-body{font-size:14px;white-space:pre-wrap;color:#3a2e25}
.cl-msg-staff{background:#eaf1fc}

/* Rates */
.cl-rate-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--cl-line,#eee);flex-wrap:wrap}
.cl-rate-row .muted{color:#9A8676}
.cl-rate-actions{display:flex;gap:6px;flex-wrap:wrap}