.service-section { grid-column: 1 / -1; padding-top: 6px; }
.service-section > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.service-section header small { color: #2563eb; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.service-section h2 { margin: 2px 0 0; font-size: 16px; }
.service-section h2 span { color: #66717f; font-size: 11px; }
.service-list { display: grid; gap: 6px; }
.service-card { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 40px; padding: 6px 12px; border: 1px solid #dfe3e8; border-radius: 8px; background: #fff; }
.service-mark { display: grid; width: 26px; height: 26px; place-items: center; color: #fff; border-radius: 6px; background: #2563eb; font-size: 10px; font-weight: 800; }
.service-card.service-webdrive .service-mark{background:var(--service-webdrive)}
.service-card.service-plan .service-mark{background:var(--service-plan)}
.service-card.service-labeler .service-mark{background:var(--service-labeler)}
.service-card.service-prompti .service-mark{background:var(--service-prompti)}
.service-card.service-messenger .service-mark{background:var(--service-messenger)}
.service-card h3 { flex: 0 0 auto; overflow: hidden; margin: 0; max-width: 130px; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.service-card p { flex: 1 1 auto; overflow: hidden; margin: 0; color: #66717f; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.service-card small { flex: 0 0 auto; color: #94a3b8; font-size: 9px; white-space: nowrap; }
.service-card > a { flex-shrink: 0; padding: 6px 10px; color: #fff; border-radius: 6px; background: #2563eb; font-size: 10px; text-decoration: none; }
.service-summary { display: flex; overflow: hidden; align-items: center; gap: 8px; min-width: 0; }
.service-shortcuts { display: flex; flex: 0 0 auto; gap: 5px; margin-top: 0; }
.service-shortcuts a { display: inline-flex; height: 22px; align-items: center; gap: 4px; padding: 0 6px; color: #475569; border: 1px solid #dbe2ea; border-radius: 5px; background: #f8fafc; font-size: 9px; text-decoration: none; }
.service-shortcuts a:hover { color: #1d4ed8; border-color: #bfdbfe; background: #eff6ff; }
.service-shortcuts svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.waiting { flex-shrink: 0; padding: 5px 8px; color: #92400e; border-radius: 99px; background: #fef3c7; font-size: 9px; font-weight: 700; }
.empty-service { padding: 18px; border: 1px dashed #cbd5e1; border-radius: 8px; text-align: center; }
.portal-prompti-favorites{grid-column:1/-1;padding:12px 14px;border:1px solid #dfe3e8;border-radius:9px;background:#fff}
.portal-prompti-favorites>header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.portal-prompti-favorites>header small{color:var(--service-prompti,#16794b);font-size:8px;font-weight:800;letter-spacing:.12em}
.portal-prompti-favorites h2{margin:1px 0 0;font-size:14px}
.portal-prompti-favorites h2 span{color:#66717f;font-size:10px}
.portal-prompti-favorites>header>a{color:var(--service-prompti,#16794b);font-size:9px;font-weight:700;text-decoration:none}
.portal-prompti-favorites-list{display:flex;min-height:60px;align-items:flex-start;gap:6px;margin-top:8px;overflow-x:auto}
.portal-prompti-favorites-list>.muted{margin:18px 0;font-size:10px}
.portal-prompti-favorite{display:flex;width:64px;min-width:64px;flex-direction:column;align-items:center;gap:3px;padding:5px 3px;color:#334155;border:1px solid transparent;border-radius:6px;text-align:center;text-decoration:none}
.portal-prompti-favorite:hover{border-color:color-mix(in srgb,var(--favorite-color,#f59e0b) 42%,white);background:color-mix(in srgb,var(--favorite-color,#f59e0b) 10%,white)}
.portal-prompti-favorite svg{width:34px;height:34px;stroke-width:.8}
.portal-prompti-favorite span{width:100%;overflow:hidden;font-size:9px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px) { .service-card { grid-template-columns: 30px minmax(0,1fr); grid-template-rows: auto auto; row-gap: 4px; }.service-summary { flex-wrap: wrap; }.service-card p { flex-basis: 100%; white-space: normal; }.service-card > a,.service-card > .waiting { grid-column: 2; justify-self: start; } }