/* Customer workspace: orders first, compact visual service cards. */
body{background:#f5f8f6}
.wrap{max-width:1240px!important;padding:28px 24px 48px}
.top{z-index:100;padding:12px max(20px,calc((100vw - 1192px)/2));box-shadow:0 2px 12px #16344e08}
.top nav a{font-size:13px;border-radius:30px;padding:10px 16px}
.top nav a[href="#my-orders"]{background:#173d35;color:#fff;border-color:#173d35}
#app>.nav{padding:14px;background:#fff;border:1px solid #e0e8e2;border-radius:18px;gap:8px;align-items:center;margin-bottom:26px}
#app>.nav .btn{font-size:13px;font-weight:600!important;text-decoration:none;color:#304c43;background:#f4f7f4;border:0;padding:10px 14px;border-radius:10px!important}
#app>.nav .btn:hover{background:#e5efdf}
#hello{font-size:30px;margin:24px 0 20px;color:#19392f}
#my-orders{scroll-margin-top:100px;border:1px solid #b7cfaf!important;border-left:5px solid #4e8238!important;background:linear-gradient(120deg,#f0f8eb,#fff);padding:24px;margin:0 0 32px}
#my-orders h3{margin:0 0 16px;font-size:24px}
#orders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
#orders .job{margin:0;background:#fff;border:1px solid #dce8d5!important;padding:18px;line-height:1.8;box-shadow:none!important;border-radius:14px!important}
#orders .job small{display:inline-block;padding:3px 9px;margin-top:8px;border-radius:8px;background:#f1f5ea;color:#405c2f}
[data-service-directory="customer"]{padding:0 0 24px}
[data-service-directory="customer"]>h2{font-size:28px;margin:0 0 8px}
[data-service-directory="customer"]>p{color:#63766b;margin:8px 0 18px}
[data-service-directory="customer"]>input{max-width:660px;padding:16px 20px;background:#fff;margin-bottom:20px;box-shadow:0 4px 16px #16344e06}
[data-service-directory="customer"] .serviceDirectoryGrid{grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:18px}
[data-service-directory="customer"] .serviceDirectoryCard{padding:0 0 14px;border-radius:18px;overflow:hidden;border:1px solid #e0e8e2;box-shadow:0 4px 18px #16344e06;min-width:0}
.serviceDirectoryImage{display:block;width:100%;aspect-ratio:16/10;object-fit:contain;background:#f3f6f3}
[data-service-directory="customer"] .serviceDirectoryCard h3{margin:14px 16px 12px;font-size:16px;line-height:1.45;min-height:46px}
[data-service-directory="customer"] .serviceDirectoryCard>.btn{display:inline-flex;align-items:center;min-height:34px;margin:0 16px 8px;padding:7px 10px;font-size:12px;color:#2c5a3b;text-decoration:none;background:#edf5e7;border:0;white-space:normal}
[data-service-directory="customer"] .serviceDirectoryCard>details{padding:0 16px;margin-top:8px;font-size:13px}
[data-service-directory="customer"] .serviceDirectoryCard summary{line-height:1.5}
#app>.grid{margin:12px 0 24px;grid-template-columns:repeat(4,1fr)}
#app>.card:not(#my-orders){max-width:800px;margin:24px auto}
body>p{display:none}
@media(max-width:1000px){[data-service-directory="customer"] .serviceDirectoryGrid{grid-template-columns:repeat(3,minmax(0,1fr))}#app>.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.wrap{padding:16px 14px 36px}.top nav{gap:6px}.top nav a{padding:8px 10px;font-size:12px}#hello{font-size:25px}#orders{grid-template-columns:1fr}[data-service-directory="customer"] .serviceDirectoryGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}[data-service-directory="customer"] .serviceDirectoryCard h3{font-size:14px;margin:10px 12px;min-height:60px}[data-service-directory="customer"] .serviceDirectoryCard>.btn{margin-left:12px;margin-right:12px}#my-orders{padding:18px}}