.services-workspace[hidden], .service-editor[hidden] { display: none !important; }
.services-workspace { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 18px; align-items: start; }
.services-catalog, .service-editor { padding: 22px; border: 1px solid var(--border-soft); border-radius: 16px; background: var(--surface); }
.services-summary { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.services-summary span, .service-editor-heading span { color: var(--pink); font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; }
.services-summary h2, .service-editor-heading h2 { margin: 5px 0; font-size: 19px; }
.services-summary p { color: var(--text-muted); font-size: 12px; }
.services-summary button, .service-editor-actions button { padding: 10px 15px; border: 0; border-radius: 9px; background: var(--brand-gradient); color: white; font-weight: 700; cursor: pointer; }
.services-summary button:disabled { opacity: .45; cursor: not-allowed; }
.services-list { display: grid; gap: 10px; }
.service-item { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 15px; border: 1px solid var(--border-soft); border-radius: 11px; background: rgba(255,255,255,.02); color: var(--text-primary); text-align: left; cursor: pointer; }
.service-item:hover { border-color: rgba(236,38,149,.42); background: rgba(236,38,149,.045); }
.service-item-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.service-item-heading strong { font-size: 14px; }
.service-item-heading small { padding: 4px 7px; border-radius: 99px; font-size: 9px; text-transform: uppercase; }
.service-item-heading small.active { color: #a9f0d9; background: rgba(55,201,155,.12); }
.service-item-heading small.inactive { color: var(--text-muted); background: rgba(255,255,255,.06); }
.service-item-description { color: var(--text-muted); font-size: 12px; line-height: 1.45; }
.service-item-meta { color: var(--text-faint); font-size: 11px; }
.services-list-empty { padding: 35px; color: var(--text-muted); text-align: center; border: 1px dashed var(--border-soft); border-radius: 11px; }
.service-editor { position: sticky; top: 18px; display: grid; gap: 14px; }
.service-editor-heading { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border-soft); }
.service-editor-heading button { width: 32px; height: 32px; border: 1px solid var(--border-soft); border-radius: 8px; background: transparent; color: var(--text-muted); font-size: 22px; cursor: pointer; }
.service-editor label { display: grid; gap: 6px; color: var(--text-muted); font-size: 11px; font-weight: 600; }
.service-editor label small { color: var(--text-faint); font-size: 10px; font-weight: 400; line-height: 1.4; }
.service-editor input, .service-editor select, .service-editor textarea { width: 100%; padding: 10px 11px; border: 1px solid var(--border-soft); border-radius: 8px; outline: none; background: var(--surface-raised); color: var(--text-primary); font: inherit; resize: vertical; }
.service-editor input:focus, .service-editor select:focus, .service-editor textarea:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(236,38,149,.1); }
.service-fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.service-editor .service-active { display: flex; grid-template-columns: none; align-items: center; gap: 9px; }
.service-active input { width: 17px; height: 17px; accent-color: var(--pink); }
.service-editor-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }
.service-editor-actions .archive { margin-right: auto; border: 1px solid rgba(240,86,112,.38); background: rgba(240,86,112,.08); color: #ffb5c1; }
.service-editor-actions button:disabled { opacity: .55; cursor: wait; }
@media (max-width: 900px) { .services-workspace { grid-template-columns: 1fr; } .service-editor { position: static; } }
@media (max-width: 520px) { .services-summary { align-items: stretch; flex-direction: column; } .service-fields-row { grid-template-columns: 1fr; } }