:root{
    --bg:#f4efe8;
    --panel:#fffdf9;
    --panel-strong:#ffffff;
    --line:#e9ded0;
    --text:#1d1a17;
    --muted:#6d6358;
    --accent:#d94f2b;
    --accent-soft:#fff0e7;
    --success:#1d7a52;
    --shadow:0 24px 60px rgba(57,38,18,.08);
}
*{box-sizing:border-box}
body{
    margin:0;
    font-family:"Manrope",sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at top left,rgba(217,79,43,.14),transparent 28%),
        radial-gradient(circle at bottom right,rgba(29,122,82,.12),transparent 26%),
        linear-gradient(180deg,#fbf7f1 0%,var(--bg) 100%);
    padding-bottom:env(safe-area-inset-bottom,0px);
}
a,button,input{font:inherit}
button{cursor:pointer;border:none}
.customer-app{max-width:1400px;margin:0 auto;padding:10px}
.hero-panel,.account-card,.filter-card,.orders-panel,.detail-card,.map-card,.list-card,.empty-state{
    background:rgba(255,253,249,.92);
    border:1px solid rgba(233,222,208,.92);
    border-radius:28px;
    box-shadow:var(--shadow);
}
.hero-panel{
    display:grid;
    gap:10px;
    padding:12px;
    margin-bottom:10px;
    background:rgba(255,253,249,.96);
}
.hero-copy h1{margin:5px 0 4px;font-size:clamp(1.35rem,6vw,2.3rem);line-height:1.08;max-width:520px}
.hero-copy p{margin:0;color:var(--muted);max-width:620px;font-size:.88rem}
.hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    border-radius:999px;
    background:var(--accent-soft);
    color:var(--accent);
    font-size:.82rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.primary-link,.ghost-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:44px;
    padding:0 12px;
    border-radius:12px;
    text-decoration:none;
    font-weight:800;
}
.primary-link{background:var(--accent);color:#fff}
.ghost-link{background:#fff;color:var(--text);border:1px solid var(--line)}
.content-grid{display:grid;grid-template-columns:1fr;gap:10px}
.sidebar-panel{display:grid;gap:18px;order:2}
.details-panel{order:1}
.account-card,.filter-card,.orders-panel,.map-card,.list-card,.empty-state{padding:14px}
.account-head{display:grid;gap:6px}
.account-head small,.detail-card span,.stat-card span,.panel-head span{display:block;color:var(--muted);font-size:.84rem}
.account-head strong{display:block;font-size:1.2rem;margin-top:4px}
.account-info{margin-top:14px;color:var(--muted);line-height:1.5}
.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stat-card{
    background:rgba(255,255,255,.78);
    border:1px solid var(--line);
    border-radius:22px;
    padding:18px;
}
.stat-card strong{display:block;margin-top:8px;font-size:1.34rem}
.account-card,.stats-grid{display:none}
.filter-tabs{display:flex;gap:8px;flex-wrap:nowrap;overflow:auto;margin-bottom:16px;padding-bottom:4px;scrollbar-width:none}
.filter-tabs::-webkit-scrollbar{display:none}
.filter-tab{
    flex:0 0 auto;
    min-height:42px;
    padding:0 16px;
    border-radius:999px;
    background:#fff;
    color:var(--muted);
    border:1px solid var(--line);
    font-weight:800;
}
.filter-tab.active{background:var(--text);color:#fff;border-color:var(--text)}
.search-box{display:grid;gap:8px;color:var(--muted);font-weight:700}
.search-box input{
    min-height:50px;
    border-radius:16px;
    border:1px solid var(--line);
    padding:0 14px;
    background:#fff;
}
.orders-list,.stack-list,.timeline-list{display:grid;gap:12px}
.order-item{
    padding:16px;
    border-radius:22px;
    border:1px solid var(--line);
    background:#fff;
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.order-item:hover{transform:translateY(-2px);border-color:rgba(217,79,43,.32)}
.order-item.active{border-color:rgba(217,79,43,.45);box-shadow:0 18px 34px rgba(217,79,43,.12)}
.order-item-top,.panel-head,.detail-actions{display:flex}
.details-top,.detail-columns{display:grid}
.order-item-top,.panel-head{justify-content:space-between;gap:12px;align-items:flex-start}
.order-item-title{font-size:1rem;font-weight:800}
.order-item-meta{margin-top:8px;color:var(--muted);font-size:.9rem;line-height:1.5}
.status-pill{
    display:inline-flex;
    align-items:center;
    padding:7px 12px;
    border-radius:999px;
    font-size:.78rem;
    font-weight:800;
}
.status-open{background:#fff0e7;color:#a33d20}
.status-route{background:#ecfbf4;color:var(--success)}
.status-done{background:#eef2ff;color:#4338ca}
.details-panel{min-height:0}
.empty-state{
    min-height:320px;
    display:grid;
    place-items:center;
    text-align:center;
}
.empty-state h2{margin:0 0 10px}
.empty-state p{margin:0;color:var(--muted);max-width:560px;line-height:1.6}
.order-details{display:grid;gap:10px}
.details-top{gap:10px}
.detail-actions{gap:10px;flex-wrap:wrap}
.detail-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.detail-card{padding:14px;border-radius:18px;box-shadow:none}
.detail-card strong{display:block;margin:6px 0 6px;font-size:1rem}
.detail-card p{margin:0;color:var(--muted);line-height:1.45;font-size:.88rem}
#mapContainer{
    min-height:52vh;
    border-radius:18px;
    overflow:hidden;
    margin-top:14px;
    background:linear-gradient(135deg,#ebe4db,#fffaf4);
}
.panel-hint{margin:12px 0 0;color:var(--muted)}
.detail-columns{gap:10px;align-items:flex-start}
.stack-item,.timeline-item{
    padding:16px;
    border-radius:20px;
    border:1px solid var(--line);
    background:#fff;
}
.stack-item strong,.timeline-item strong{display:block}
.stack-item p,.timeline-item p{margin:6px 0 0;color:var(--muted);line-height:1.5}
.timeline-item small{display:block;margin-top:8px;color:var(--muted)}
.hidden{display:none!important}
@media (max-width:560px){
    .customer-app{padding:8px}
    .hero-panel{padding:12px}
    .hero-copy h1{font-size:1.35rem}
    .hero-copy p{font-size:.84rem}
    .eyebrow{padding:6px 10px;font-size:.7rem;letter-spacing:.04em}
    .sidebar-panel{gap:12px}
    .account-card,.filter-card,.orders-panel,.map-card,.list-card,.empty-state,.detail-card{padding:12px}
    .filter-card{position:sticky;top:8px;z-index:12;background:rgba(255,253,249,.98);backdrop-filter:blur(14px)}
    .orders-panel{padding-top:12px}
    .orders-panel .panel-head{margin-bottom:8px}
    .orders-list{
        display:grid;
        grid-auto-flow:column;
        grid-auto-columns:82%;
        overflow:auto;
        gap:10px;
        padding-bottom:4px;
        scroll-snap-type:x proximity;
        scrollbar-width:none;
    }
    .orders-list::-webkit-scrollbar{display:none}
    .order-item{scroll-snap-align:start;padding:14px;min-height:116px}
    .stats-grid{grid-template-columns:1fr}
    .order-item-top,.panel-head{flex-direction:column}
    .details-top{grid-template-columns:1fr}
    .detail-actions{display:grid;grid-template-columns:1fr 1fr}
    .detail-actions .primary-link,.detail-actions .ghost-link{width:100%}
    .detail-cards{gap:8px}
    .detail-card span{font-size:.72rem}
    .detail-card strong{font-size:.88rem}
    .detail-card p{display:none}
    .detail-columns{gap:12px}
    .timeline-item,.stack-item{padding:14px}
    #mapContainer{min-height:56vh;margin-top:10px}
    .panel-hint{font-size:.86rem}
}
@media (min-width:768px){
    .customer-app{padding:20px}
    .hero-actions{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
    .hero-actions .primary-link,.hero-actions .ghost-link{width:auto}
    .account-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
    .details-top{display:flex;justify-content:space-between;align-items:flex-start}
    .detail-cards{grid-template-columns:repeat(3,1fr)}
    .detail-columns{display:grid;grid-template-columns:1fr 1fr}
    .detail-card p{display:block}
    #mapContainer{min-height:440px}
    .sidebar-panel{order:1}
    .details-panel{order:2}
}
@media (min-width:1025px){
    .customer-app{padding:28px}
    .hero-panel{display:flex;justify-content:space-between;gap:24px;padding:28px 32px;margin-bottom:24px}
    .content-grid{grid-template-columns:340px minmax(0,1fr);gap:18px}
    .account-card,.filter-card,.orders-panel,.map-card,.list-card,.empty-state{padding:22px}
    .map-card{padding:24px}
    #mapContainer{min-height:520px}
}