:root{
    --svc-bg:#f4f8f6;
    --svc-card:#ffffff;
    --svc-card-soft:#f8fbfa;
    --svc-text:#10231c;
    --svc-muted:#62756d;
    --svc-line:#dbe7e2;
    --svc-green:#079669;
    --svc-green-strong:#057451;
    --svc-green-soft:#e9f9f3;
    --svc-danger:#b42318;
    --svc-danger-soft:#fff0ef;
    --svc-warn:#fff8e5;
    --svc-shadow:0 18px 55px rgba(18,53,41,.10);
}

@media(prefers-color-scheme:dark){
    :root{
        --svc-bg:#07110e;
        --svc-card:#0d1b17;
        --svc-card-soft:#101f1a;
        --svc-text:#f1faf6;
        --svc-muted:#9eb4aa;
        --svc-line:#203a31;
        --svc-green-soft:#0c2a20;
        --svc-danger-soft:#321413;
        --svc-warn:#2b2410;
        --svc-shadow:0 18px 55px rgba(0,0,0,.24);
    }
}

[hidden]{display:none!important}

.svc-shell{
    width:min(1060px,100%);
    margin:0 auto;
    padding:22px 12px 76px;
    color:var(--svc-text);
}
.svc-card{
    background:var(--svc-card);
    border:1px solid var(--svc-line);
    border-radius:24px;
    padding:clamp(16px,3vw,30px);
    box-shadow:var(--svc-shadow);
}
.svc-card--hero{overflow:hidden}
.svc-head{display:flex;gap:14px;align-items:center;margin-bottom:20px}
.svc-head--between{justify-content:space-between;align-items:center;gap:18px}
.svc-head__group{display:flex;gap:14px;align-items:center;min-width:0}
.svc-head__icon{
    flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;
    border-radius:17px;background:var(--svc-green-soft);font-size:27px;
}
.svc-head h1,.svc-card h1,.svc-card h2,.svc-card h3{margin:.12em 0;color:var(--svc-text)}
.svc-head p,.svc-card p{color:var(--svc-muted)}
.svc-kicker{
    display:block;font-size:11px;text-transform:uppercase;letter-spacing:.11em;
    font-weight:950;color:var(--svc-green);margin-bottom:3px;
}
.svc-progress{
    display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0 24px;
}
.svc-progress span{
    padding:9px 8px;border:1px solid var(--svc-line);border-radius:999px;
    font-size:12px;font-weight:800;text-align:center;color:var(--svc-muted);background:var(--svc-card-soft);
}
.svc-progress span.is-active{color:var(--svc-green-strong);border-color:rgba(7,150,105,.35);background:var(--svc-green-soft)}

.svc-form{display:grid;gap:18px}
.svc-form-section{
    border:1px solid var(--svc-line);border-radius:20px;padding:clamp(15px,2.5vw,23px);
    background:linear-gradient(180deg,var(--svc-card-soft),var(--svc-card));
}
.svc-form-section__head{display:flex;gap:12px;align-items:flex-start;margin-bottom:17px}
.svc-form-section__head>span{
    flex:0 0 auto;min-width:34px;height:34px;padding:0 8px;border-radius:11px;
    display:grid;place-items:center;background:var(--svc-green-soft);color:var(--svc-green-strong);font-weight:950;
}
.svc-form-section__head h2{font-size:clamp(1.02rem,2.4vw,1.25rem);margin:0 0 4px}
.svc-form-section__head p{margin:0;font-size:13px;line-height:1.45}
.svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.svc-field{display:grid;gap:7px;font-weight:800;min-width:0}
.svc-field--wide{grid-column:1/-1}
.svc-field>span{font-size:14px}
.svc-field em{font-style:normal;font-size:11px;color:var(--svc-muted);font-weight:650}
.svc-field small{font-size:12px;line-height:1.45;color:var(--svc-muted);font-weight:600}
.svc-form input,.svc-form select,.svc-form textarea,.svc-field input,.svc-field select,.svc-field textarea{
    width:100%;min-width:0;padding:13px 14px;border:1px solid var(--svc-line);border-radius:13px;
    background:var(--svc-card);color:var(--svc-text);font:inherit;outline:none;transition:border-color .18s,box-shadow .18s;
}
.svc-form input:focus,.svc-form select:focus,.svc-form textarea:focus,.svc-field input:focus,.svc-field select:focus,.svc-field textarea:focus{
    border-color:var(--svc-green);box-shadow:0 0 0 3px rgba(7,150,105,.12);
}
.svc-form textarea,.svc-field textarea{resize:vertical}
.svc-pricing-help{
    margin:10px 0 14px;padding:12px 14px;border-left:4px solid var(--svc-green);
    border-radius:12px;background:var(--svc-green-soft);font-size:13px;line-height:1.5;color:var(--svc-text);
}
.svc-input-suffix{display:flex;align-items:stretch}
.svc-input-suffix input{border-radius:13px 0 0 13px!important}
.svc-input-suffix b{
    display:flex;align-items:center;padding:0 12px;border:1px solid var(--svc-line);border-left:0;
    border-radius:0 13px 13px 0;background:var(--svc-card-soft);font-size:12px;color:var(--svc-muted);
}
.svc-choice-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.svc-choice-cards label{
    display:flex;gap:10px;align-items:flex-start;padding:13px;border:1px solid var(--svc-line);
    border-radius:14px;background:var(--svc-card);cursor:pointer;
}
.svc-choice-cards input{width:auto!important;margin-top:3px;accent-color:var(--svc-green)}
.svc-choice-cards span{display:grid;gap:3px}
.svc-choice-cards strong{font-size:13px}.svc-choice-cards small{color:var(--svc-muted);font-size:11px;line-height:1.35}

.svc-primary,.svc-secondary,.svc-danger,.svc-row-actions a,.svc-row-actions button{
    display:inline-flex;justify-content:center;align-items:center;min-height:42px;padding:10px 15px;
    border-radius:12px;text-decoration:none;font-weight:850;border:1px solid transparent;cursor:pointer;font:inherit;
}
.svc-primary{background:var(--svc-green);color:#fff;border:0}
.svc-primary:hover{background:var(--svc-green-strong)}
.svc-primary--large{min-height:50px;width:100%;font-size:15px}
.svc-secondary,.svc-row-actions a,.svc-row-actions button{background:var(--svc-card);color:var(--svc-text);border-color:var(--svc-line)}
.svc-danger{background:transparent;color:var(--svc-danger);border-color:#f2b8b5}
.svc-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.svc-alert,.svc-note,.svc-bypass,.svc-status{
    padding:13px 15px;border-radius:13px;margin:13px 0;border:1px solid var(--svc-line);background:var(--svc-card-soft);
}
.svc-alert.error{background:var(--svc-danger-soft);color:#b42318;border-color:#f4c5c2}
.svc-alert.success{background:var(--svc-green-soft);color:var(--svc-green-strong);border-color:rgba(7,150,105,.25)}
.svc-alert a{color:inherit;font-weight:850}

.svc-photo-section{margin-top:20px}
.svc-photo-uploader{display:grid;gap:12px}
.svc-photo-drop{
    display:grid!important;place-items:center;text-align:center;gap:6px;min-height:150px;padding:22px;
    border:2px dashed rgba(7,150,105,.45);border-radius:17px;background:var(--svc-green-soft);cursor:pointer;
}
.svc-photo-drop>span{font-size:30px}.svc-photo-drop strong{font-size:15px}.svc-photo-drop small{color:var(--svc-muted);font-weight:600}
.svc-photo-drop.is-complete{opacity:.65;cursor:default}
.svc-images{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.svc-images--slots,.svc-images--manage{display:grid;grid-template-columns:repeat(2,minmax(0,180px));gap:12px}
.svc-images img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:15px;border:1px solid var(--svc-line);background:var(--svc-card-soft)}
.svc-image-card{display:grid;gap:7px}.svc-image-card form,.svc-image-card button{width:100%}
.svc-upload-status{font-size:13px;font-weight:750;color:var(--svc-muted);min-height:20px}
.svc-upload-status.success{color:var(--svc-green-strong)}

.svc-capacity-card{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 24px}
.svc-capacity-card>div{padding:14px;border:1px solid var(--svc-line);border-radius:15px;background:var(--svc-card-soft)}
.svc-capacity-card strong,.svc-capacity-card span{display:block}.svc-capacity-card strong{font-size:1.3rem;color:var(--svc-green)}
.svc-capacity-card span{font-size:11px;color:var(--svc-muted);margin-top:3px}
.svc-list{display:grid;gap:12px;margin-top:18px}
.svc-row{
    display:grid;grid-template-columns:82px minmax(0,1fr) auto;gap:14px;align-items:center;
    border:1px solid var(--svc-line);border-radius:17px;padding:12px;background:var(--svc-card-soft);
}
.svc-row img{width:82px;height:82px;object-fit:cover;border-radius:14px}
.svc-row__body{min-width:0}.svc-row__topline{display:flex;gap:8px;align-items:flex-start;justify-content:space-between}
.svc-row h3,.svc-row p{margin:0 0 4px}.svc-row h3{font-size:15px;overflow-wrap:anywhere}
.svc-row p{font-size:13px}.svc-row small{font-size:11px;color:var(--svc-muted)}
.svc-pill{font-size:10px;padding:4px 7px;border-radius:999px;border:1px solid var(--svc-line);color:var(--svc-muted);white-space:nowrap}
.svc-pill.is-live{color:var(--svc-green-strong);background:var(--svc-green-soft);border-color:rgba(7,150,105,.22)}
.svc-row-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.svc-row-actions__primary{border-color:rgba(7,150,105,.3)!important;color:var(--svc-green-strong)!important;background:var(--svc-green-soft)!important}
.svc-empty{padding:28px;text-align:center;color:var(--svc-muted)}
.svc-empty--action{display:grid;justify-items:center;gap:10px;border:1px dashed var(--svc-line);border-radius:18px;background:var(--svc-card-soft)}
.svc-empty--action strong{color:var(--svc-text);font-size:16px}.svc-empty--action p{max-width:560px;margin:0}.svc-empty__icon{font-size:36px}

/* Existing Service view/support selectors retained. */
.svc-gallery{display:flex;overflow:auto;gap:10px;scroll-snap-type:x mandatory}
.svc-gallery img{width:min(100%,620px);aspect-ratio:1/1;object-fit:cover;border-radius:18px;scroll-snap-align:start}
.svc-service-title{display:flex;justify-content:space-between;gap:15px;margin:20px 0}
.svc-price{font-size:1.35rem!important;font-weight:900;color:var(--svc-green)!important}
.svc-desc{line-height:1.8}
.svc-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}
.svc-facts>div{padding:13px;border:1px solid var(--svc-line);border-radius:12px}
.svc-facts strong,.svc-facts span{display:block}.svc-facts span{margin-top:5px;color:var(--svc-muted)}
.svc-status{display:flex;justify-content:space-between;gap:12px;border:1px solid var(--svc-line)}
.svc-timeline{display:grid;gap:9px}.svc-timeline>div{border-left:3px solid var(--svc-green);padding:7px 12px}
.svc-timeline span{display:block;font-size:12px;color:var(--svc-muted)}

@media(max-width:760px){
    .svc-shell{padding:12px 8px 70px}.svc-card{border-radius:18px;padding:14px}
    .svc-grid,.svc-choice-cards,.svc-facts{grid-template-columns:1fr}
    .svc-progress{grid-template-columns:repeat(2,1fr)}
    .svc-head--between{align-items:stretch;flex-direction:column}.svc-head--between>.svc-primary{width:100%}
    .svc-capacity-card{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.svc-capacity-card>div{padding:10px 7px;text-align:center}
    .svc-row{grid-template-columns:68px minmax(0,1fr);gap:10px}.svc-row img{width:68px;height:68px}
    .svc-row-actions{grid-column:1/-1;justify-content:stretch}.svc-row-actions a,.svc-row-actions button{flex:1 1 auto}
    .svc-actions>*{flex:1 1 100%}
}

@media(max-width:420px){
    .svc-progress{display:none}.svc-form-section{padding:13px;border-radius:16px}
    .svc-images--slots,.svc-images--manage{grid-template-columns:repeat(2,minmax(0,1fr))}
    .svc-capacity-card span{font-size:10px}.svc-capacity-card strong{font-size:1.1rem}
}


/* Clear seller/buyer explanations */
.svc-field small{display:block;margin-top:6px;color:var(--svc-muted);font-size:12px;line-height:1.45;font-weight:600}
.svc-view-explain{margin:8px 0 16px!important;padding:11px 13px;border:1px solid var(--svc-line);border-radius:12px;background:var(--svc-green-soft);font-size:13px;line-height:1.55}
.svc-view-explain strong{color:var(--svc-text)}

.svc-duration-input{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,.55fr);gap:10px;align-items:center}
.svc-duration-input input,.svc-duration-input select{width:100%}
.svc-view-hint{margin-top:-6px!important;font-size:12px!important;color:var(--svc-muted)!important;line-height:1.45}
@media(max-width:520px){.svc-duration-input{grid-template-columns:minmax(0,1fr) 118px;gap:8px}}


/* v14 — polished dropdowns and human-friendly duration stepper */
.svc-field select,
.svc-form select{
    appearance:none;
    -webkit-appearance:none;
    cursor:pointer;
    padding-right:44px!important;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--svc-green) 50%),
        linear-gradient(135deg, var(--svc-green) 50%, transparent 50%),
        linear-gradient(to right, var(--svc-line), var(--svc-line));
    background-position:
        calc(100% - 20px) calc(50% - 2px),
        calc(100% - 14px) calc(50% - 2px),
        calc(100% - 38px) 50%;
    background-size:6px 6px,6px 6px,1px 58%;
    background-repeat:no-repeat;
    box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.svc-field select:hover,
.svc-form select:hover{
    border-color:rgba(7,150,105,.55);
    background-color:var(--svc-card-soft);
}
.svc-field select:focus,
.svc-form select:focus{
    background-color:var(--svc-card);
}
.svc-field select option,
.svc-form select option{
    background:var(--svc-card);
    color:var(--svc-text);
    padding:10px;
}

.svc-duration-input{
    display:grid;
    grid-template-columns:minmax(150px,1fr) minmax(125px,.65fr);
    gap:10px;
    align-items:stretch;
}
.svc-number-stepper{
    display:grid;
    grid-template-columns:minmax(0,1fr) 42px;
    min-height:48px;
    border:1px solid var(--svc-line);
    border-radius:13px;
    overflow:hidden;
    background:var(--svc-card);
    transition:border-color .18s,box-shadow .18s;
}
.svc-number-stepper:focus-within{
    border-color:var(--svc-green);
    box-shadow:0 0 0 3px rgba(7,150,105,.12);
}
.svc-number-stepper input[type="number"]{
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    min-width:0;
    height:100%;
    padding:12px 13px;
    font-weight:800;
}
.svc-stepper-buttons{
    display:grid;
    grid-template-rows:1fr 1fr;
    border-left:1px solid var(--svc-line);
    background:var(--svc-card-soft);
}
.svc-stepper-btn{
    appearance:none;
    border:0;
    background:transparent;
    color:var(--svc-green-strong);
    font-size:11px;
    line-height:1;
    cursor:pointer;
    display:grid;
    place-items:center;
    padding:0;
    min-height:23px;
}
.svc-stepper-btn:first-child{border-bottom:1px solid var(--svc-line)}
.svc-stepper-btn:hover,
.svc-stepper-btn:focus-visible{background:var(--svc-green-soft);outline:none}
.svc-duration-input>select{min-height:48px;font-weight:800}

@media(max-width:520px){
    .svc-duration-input{grid-template-columns:minmax(0,1fr) 120px;gap:8px}
    .svc-number-stepper{grid-template-columns:minmax(0,1fr) 38px}
}

/* v15 — true in-page dropdowns for mobile/WebView (no native picker popup) */
.svc-custom-select{
    position:relative;
    width:100%;
}
.svc-custom-select>select{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    opacity:0!important;
    pointer-events:none!important;
    z-index:-1!important;
}
.svc-select-trigger{
    width:100%;
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:11px 13px;
    border:1px solid var(--svc-line);
    border-radius:13px;
    background:var(--svc-card);
    color:var(--svc-text);
    font:inherit;
    font-weight:750;
    text-align:left;
    cursor:pointer;
    box-shadow:0 1px 2px rgba(15,23,42,.04);
    transition:border-color .18s,box-shadow .18s,background .18s;
}
.svc-select-trigger:hover{border-color:rgba(7,150,105,.55);background:var(--svc-card-soft)}
.svc-select-trigger:focus-visible,
.svc-custom-select.is-open .svc-select-trigger{
    outline:none;
    border-color:var(--svc-green);
    box-shadow:0 0 0 3px rgba(7,150,105,.12);
}
.svc-select-trigger__text{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.svc-select-trigger__arrow{
    flex:0 0 24px;
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    border-left:1px solid var(--svc-line);
    padding-left:10px;
    color:var(--svc-green-strong);
    font-size:12px;
    transition:transform .18s ease;
}
.svc-custom-select.is-open .svc-select-trigger__arrow{transform:rotate(180deg)}
.svc-select-menu{
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 6px);
    z-index:1200;
    display:none;
    max-height:min(300px,48vh);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:6px;
    border:1px solid var(--svc-line);
    border-radius:14px;
    background:var(--svc-card);
    box-shadow:0 18px 42px rgba(15,23,42,.18),0 3px 10px rgba(15,23,42,.08);
    -webkit-overflow-scrolling:touch;
}
.svc-custom-select.is-open .svc-select-menu{display:block;animation:svcDropdownIn .14s ease-out}
@keyframes svcDropdownIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
.svc-select-option{
    width:100%;
    display:flex;
    align-items:center;
    min-height:44px;
    padding:10px 11px;
    margin:0;
    border:0;
    border-radius:10px;
    background:transparent;
    color:var(--svc-text);
    font:inherit;
    font-size:14px;
    font-weight:700;
    line-height:1.35;
    text-align:left;
    cursor:pointer;
}
.svc-select-option:hover,
.svc-select-option:focus-visible{outline:none;background:var(--svc-green-soft);color:var(--svc-green-strong)}
.svc-select-option.is-selected{background:var(--svc-green-soft);color:var(--svc-green-strong);font-weight:850}
.svc-select-option:disabled{opacity:.45;cursor:not-allowed}
.svc-select-menu::-webkit-scrollbar{width:5px}
.svc-select-menu::-webkit-scrollbar-thumb{background:var(--svc-line);border-radius:999px}
.svc-duration-input>.svc-custom-select{min-width:0}

@media(max-width:520px){
    .svc-select-menu{max-height:42vh}
    .svc-select-option{min-height:46px;padding:11px 10px}
    .svc-select-trigger{min-height:48px;padding:10px 11px}
}


/* v16 — mobile-safe wrapping for long dropdown choices */
.svc-form,
.svc-form-section,
.svc-grid,
.svc-field,
.svc-custom-select,
.svc-select-trigger,
.svc-select-menu,
.svc-select-option{
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
}
.svc-select-trigger{
    overflow:hidden;
}
.svc-select-trigger__text{
    display:block;
    flex:1 1 auto;
    min-width:0;
    overflow:visible;
    text-overflow:clip;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
    line-height:1.35;
}
.svc-select-option{
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
}
.svc-select-menu{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}
.svc-select-trigger__arrow{
    flex:0 0 24px;
}
@media(max-width:520px){
    .svc-select-trigger{align-items:flex-start;}
    .svc-select-trigger__arrow{margin-top:1px;}
}


/* v17 — Service image cropper, aligned with Product photo preparation */
.svc-crop-modal{
  position:fixed;inset:0;z-index:2147482500;
  display:none;align-items:center;justify-content:center;
  padding:12px;background:rgba(2,6,23,.82);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
}
.svc-crop-modal.is-open{display:flex}
.svc-crop-dialog{
  width:min(620px,100%);max-height:94dvh;overflow:auto;
  border:1px solid var(--svc-line);border-radius:22px;
  background:var(--svc-card);color:var(--svc-text);
  box-shadow:0 28px 90px rgba(0,0,0,.38);
}
.svc-crop-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:15px 16px 10px}
.svc-crop-head h2{margin:1px 0 0;font-size:1.15rem}
.svc-crop-close{
  flex:0 0 38px;width:38px;height:38px;border:1px solid var(--svc-line);
  border-radius:12px;background:var(--svc-card-soft);color:var(--svc-text);
  font-size:24px;line-height:1;cursor:pointer;
}
.svc-crop-stage{height:min(56vh,480px);margin:0 12px;border-radius:15px;overflow:hidden;background:#020617}
.svc-crop-stage img{display:block;max-width:100%}
.svc-crop-help{padding:0 16px!important;margin:12px 0 8px!important;font-size:12px!important;line-height:1.5}
.svc-crop-tools{display:flex;gap:8px;flex-wrap:wrap;padding:0 14px 12px}
.svc-crop-tools button{
  min-height:40px;padding:8px 12px;border:1px solid var(--svc-line);
  border-radius:11px;background:var(--svc-card-soft);color:var(--svc-text);font:inherit;font-weight:800;cursor:pointer;
}
.svc-crop-tools #svcCropWhole{flex:1 1 150px}
.svc-crop-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 14px 16px}
.svc-crop-actions>*{margin:0!important}
@media(max-width:520px){
  .svc-crop-dialog{border-radius:18px}
  .svc-crop-stage{height:min(52vh,420px)}
  .svc-crop-actions{grid-template-columns:1fr 1fr}
}