@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,300;0,6..12,400;0,6..12,600;0,6..12,700;1,6..12,400&display=swap');:root{--um-blue: #00274C;--um-maize: #FFCB05;--um-error: #c62828;--um-error-bg: #fdecea;--um-warning-bg: #fef3cd;--um-warning-border: #e6a817;--um-warning-text: #7d4e00;--um-input-bg: #e0e0e0;--um-border: #b0c4de;--um-secondary-text: #555555;--um-font-primary: 'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--um-font-body: 'Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--um-surface: #ffffff;--um-surface-subtle: #f7fafd;--um-surface-selected: #e8f0f8;--um-surface-code: #f5f8fc;--um-border-subtle: #dde8f5;--um-border-strong: #80a8d4;--um-contrast-10: rgba(0,39,76,0.06);--um-focus-ring: var(--um-maize);--um-content-width: 800px;--um-reading-width: 780px;--um-radius-s: 4px;--um-radius-m: 8px;--um-radius-l: 14px;--um-gap-s: 0.5rem;--um-gap-m: 1rem;--um-gap-l: 1.5rem;--sail-muted: color-mix(in srgb,var(--um-blue) 56%,white 44%);--sail-card-border: color-mix(in srgb,var(--um-blue) 18%,white 82%);--sail-card-shadow: 0 18px 34px -26px color-mix(in srgb,var(--um-blue) 62%,transparent 38%);--sail-card-bg: linear-gradient(180deg,color-mix(in srgb,white 94%,var(--um-blue) 6%) 0%,white 100%);--sail-toolbar-bg: color-mix(in srgb,white 84%,var(--um-maize) 16%);--sail-hero-bg: linear-gradient(135deg,color-mix(in srgb,var(--um-blue) 10%,white 90%) 0%,color-mix(in srgb,var(--um-maize) 16%,white 84%) 48%,white 100%)}body{font-family: var(--um-font-body)}html{--aura-accent-color-light: var(--um-maize);--aura-accent-color-dark: var(--um-maize);--aura-background-color-light: #ffffff;--aura-app-background: #ffffff}vaadin-button[theme~="primary"]::part(label){color: var(--um-blue);font-weight: 600}vaadin-text-field::part(input-field),vaadin-password-field::part(input-field),vaadin-text-area::part(input-field),vaadin-email-field::part(input-field),vaadin-number-field::part(input-field){background-color: var(--um-input-bg)}h1,h2,h3,h4,h5,h6{font-family: var(--um-font-primary);color: var(--um-blue)}vaadin-app-layout h1{font-size: 1.6rem;font-weight: 700;margin: 0 0 0.75rem 0}vaadin-app-layout h2{font-size: 1.35rem;font-weight: 600;margin: 0 0 0.5rem 0}a,vaadin-router-link a{color: var(--um-blue);text-decoration-color: var(--um-maize)}:focus-visible{outline: 2px solid var(--um-focus-ring);outline-offset: 2px}vaadin-button{border-radius: var(--um-radius-s);font-family: var(--um-font-body)}vaadin-button:not([theme~="primary"]):not([theme~="error"]):not([theme~="success"])::part(label){color: var(--um-blue)}vaadin-grid::part(header-cell){font-family: var(--um-font-primary);font-weight: 600;color: var(--um-secondary-text);background: var(--um-surface-subtle)}vaadin-grid::part(body-cell){border-bottom-color: var(--um-border-subtle)}vaadin-dialog-overlay::part(header){color: var(--um-blue);font-family: var(--um-font-primary)}.sail-page{width: 100%;max-width: var(--um-content-width);margin: 0 auto;box-sizing: border-box}.sail-page--wide{max-width: none}.sail-page--reading{max-width: var(--um-reading-width)}.sail-page-header{display: flex;align-items: flex-start;justify-content: space-between;gap: var(--um-gap-m);flex-wrap: wrap;width: 100%;box-sizing: border-box;margin-bottom: var(--um-gap-l);padding: 1.1rem 1.25rem;border-radius: 18px;border: 1px solid var(--sail-card-border);background: var(--sail-hero-bg);box-shadow: var(--sail-card-shadow)}.sail-page-header-text{display: flex;flex-direction: column;gap: 0.25rem}.sail-page-title{font-family: var(--um-font-primary);font-size: clamp(1.35rem,2vw,1.8rem);font-weight: 700;letter-spacing: 0.01em;color: var(--um-blue);margin: 0}.sail-page-subtitle{font-size: 0.95rem;color: var(--sail-muted);margin: 0;max-width: 72ch;line-height: 1.5}.sail-section{width: 100%;border: 1px solid var(--sail-card-border);border-radius: var(--um-radius-l);background: var(--sail-card-bg);box-shadow: var(--sail-card-shadow);padding: 1.1rem 1.25rem;box-sizing: border-box}.sail-section--subtle{background: var(--um-surface-subtle);box-shadow: none}.sail-section-title{font-family: var(--um-font-primary);font-size: 1.08rem;font-weight: 650;letter-spacing: 0.01em;color: var(--um-blue);margin: 0 0 0.7rem 0}.sail-fact-row{margin: 0 0 0.35rem 0}.sail-fact-row .sail-fact-label{font-weight: 600;color: var(--um-secondary-text)}.sail-toolbar{display: flex;flex-wrap: wrap;gap: 0.8rem;align-items: flex-end;width: 100%;box-sizing: border-box;padding: 0.85rem 1rem;border-radius: var(--um-radius-l);border: 1px solid var(--sail-card-border);background: var(--sail-toolbar-bg)}.sail-action-row{display: flex;flex-wrap: wrap;gap: var(--um-gap-s);align-items: center;justify-content: flex-end;margin-top: var(--um-gap-m)}.sail-section vaadin-grid{border-radius: var(--um-radius-m);overflow: hidden}.sail-section vaadin-grid::part(header-cell){background: color-mix(in srgb,var(--um-blue) 8%,white 92%);color: var(--um-blue);font-size: 0.8rem;font-weight: 650;letter-spacing: 0.03em;text-transform: uppercase}.sail-code-inline{font-family: monospace;background: var(--um-contrast-10);padding: 4px 8px;border-radius: var(--um-radius-s)}.sail-code-block{max-width: var(--um-reading-width);background-color: var(--um-surface-code);border-left: 4px solid var(--um-blue);border-radius: var(--um-radius-s);padding: 12px 16px 16px 16px;box-sizing: border-box}.sail-comment-card{border: 1px solid var(--um-border);border-radius: var(--um-radius-m);padding: 0.75rem 1rem;margin-bottom: var(--um-gap-s)}.sail-comment-meta{font-size: 0.875rem;color: var(--um-secondary-text)}.sail-comment-body{white-space: pre-wrap;margin: 0.25rem 0 0 0}.um-wordmark{height: 40px;width: auto;flex-shrink: 0;padding-top: 12px;padding-bottom: 12px}.um-wordmark-link{display: inline-flex;align-items: center;flex-shrink: 0;text-decoration: none;cursor: pointer}.um-sail-mark{height: 34px;width: 34px;flex-shrink: 0}.centered-content{margin: 0 auto;max-width: 250px}.phi-inline-warning{font-size: 0.75rem;color: var(--um-error);display: block;margin-top: -8px;margin-bottom: 8px}vaadin-app-layout{--vaadin-app-layout-drawer-width: 200px}vaadin-app-layout::part(navbar){background-color: var(--um-blue);border-bottom: 3px solid var(--um-maize);padding: 0 0.5rem;gap: 0.75rem}vaadin-drawer-toggle{color: var(--um-maize);--vaadin-button-background: transparent;--vaadin-button-border-color: transparent}vaadin-list-box vaadin-item[selected]{background-color: var(--um-blue);color: #ffffff;border-radius: 4px}vaadin-accordion-panel{border: 1px solid #b0c4de;border-radius: 6px;margin-bottom: 0.5rem}vaadin-accordion-heading{background-color: #dde8f5;border-radius: 6px;color: var(--um-blue)}vaadin-accordion-heading::part(summary-content){font-weight: 600;color: var(--um-blue)}vaadin-accordion-heading::part(toggle){color: var(--um-blue) !important;opacity: 1 !important}vaadin-accordion-panel::part(content){padding: 1rem;background-color: #f5f8fc}.category-label{position: relative;cursor: default}.category-label[data-tooltip]::after{content: attr(data-tooltip);position: absolute;z-index: 9999;left: calc(100% + 10px);top: 50%;transform: translateY(-50%);background: var(--um-blue);color: #ffffff;font-size: 0.75rem;line-height: 1.4;padding: 0.4rem 0.6rem;border-radius: 4px;max-width: 260px;width: max-content;white-space: normal;pointer-events: none;opacity: 0;transition: opacity 0.15s ease 0s}.category-label[data-tooltip]:hover::after{opacity: 1;transition-delay: 0.2s}vaadin-side-nav-item::part(item){color: var(--um-blue);font-family: var(--um-font-body);font-size: 1rem;font-weight: 500}vaadin-side-nav-item[active]::part(item){border-inline-start: 4px solid var(--um-maize);background-color: #e0e7f0;font-weight: 700}a.logout-btn{display: block;margin: 0.5rem 0.75rem;padding: 0.5rem 1rem;border: 1px solid var(--um-blue);border-radius: var(--um-radius-s);color: var(--um-blue);font-family: var(--um-font-body);font-size: 1rem;font-weight: 500;text-align: center;text-decoration: none;background: transparent}a.logout-btn:hover{background: color-mix(in srgb,var(--um-blue) 8%,white 92%)}vaadin-button.logout-btn{width: calc(100% - 1.5rem);margin: 0.5rem 0.75rem}.about-view{padding: 2rem;max-width: 720px}.about-heading{font-family: var(--um-font-primary);color: var(--um-blue);margin-top: 0}.about-section{margin-top: 1.5rem}.about-section h2{font-family: var(--um-font-primary);color: var(--um-blue)}.about-workflow-list{margin-top: 0.5rem;padding-left: 1.5rem}.phi-warning-banner{display: block;width: 100%;padding: 0.75rem 1rem;margin-bottom: 1rem;background-color: var(--um-warning-bg);border: 2px solid var(--um-warning-border);border-radius: 4px;font-weight: 700;font-family: var(--um-font-primary,sans-serif);color: var(--um-warning-text);box-sizing: border-box}.rating-star{color: var(--um-maize);font-size: 1rem;line-height: 1}.rating-label{color: var(--um-secondary-text);font-size: 0.85rem;margin-inline-start: 0.25rem}:root{--monitoring-login-accent: color-mix(in srgb,var(--um-blue) 82%,#2f7ddf 18%);--monitoring-user-accent: color-mix(in srgb,#1f7a4a 78%,#57b67a 22%);--monitoring-practice-accent: color-mix(in srgb,#ad6a00 80%,var(--um-maize) 20%);--monitoring-review-accent: color-mix(in srgb,#a3391e 82%,#ef7e5a 18%);--monitoring-surface: color-mix(in srgb,white 84%,var(--um-maize) 16%);--monitoring-border: color-mix(in srgb,var(--um-blue) 18%,white 82%);--monitoring-muted: color-mix(in srgb,var(--um-blue) 56%,white 44%);--monitoring-shadow: 0 18px 34px -26px color-mix(in srgb,var(--um-blue) 62%,transparent 38%)}.admin-monitoring-view{gap: 1rem;padding: 1rem 0.25rem 2rem}.monitoring-hero{gap: 0.25rem;padding: 1.1rem 1.25rem;border-radius: 18px;border: 1px solid var(--monitoring-border);background: linear-gradient(135deg,color-mix(in srgb,var(--um-blue) 10%,white 90%) 0%,color-mix(in srgb,var(--um-maize) 16%,white 84%) 48%,white 100%);box-shadow: var(--monitoring-shadow)}.monitoring-title{margin: 0;color: var(--um-blue);font-family: var(--um-font-primary);font-size: clamp(1.35rem,2vw,1.8rem);font-weight: 700;letter-spacing: 0.01em}.monitoring-subtitle{margin: 0;color: var(--monitoring-muted);font-size: 0.94rem;max-width: 72ch}.monitoring-section{gap: 0.7rem}.monitoring-section-title{margin: 0;color: var(--um-blue);font-family: var(--um-font-primary);font-size: 1.08rem;font-weight: 650;letter-spacing: 0.01em}.monitoring-toolbar{gap: 0.8rem;flex-wrap: wrap;padding: 0.85rem 1rem;border-radius: 14px;border: 1px solid var(--monitoring-border);background: var(--monitoring-surface)}.monitoring-filter{min-width: 230px}.monitoring-card{border: 1px solid var(--monitoring-border);border-radius: 14px;background: linear-gradient(180deg,color-mix(in srgb,white 94%,var(--um-blue) 6%) 0%,white 100%);box-shadow: var(--monitoring-shadow)}.monitoring-card-title{color: var(--um-blue);font-family: var(--um-font-primary);font-weight: 620}.monitoring-card-controls{flex-wrap: wrap;gap: 0.55rem}.monitoring-top-x-field{min-width: 130px}.monitoring-top-x-field::part(label){font-size: 0.73rem;text-transform: uppercase;letter-spacing: 0.07em;color: var(--monitoring-muted)}.monitoring-grid{border-radius: 10px;overflow: hidden}.monitoring-grid::part(header-cell){background: color-mix(in srgb,var(--um-blue) 8%,white 92%);color: var(--um-blue);font-size: 0.8rem;font-weight: 650;letter-spacing: 0.03em;text-transform: uppercase}.monitoring-grid::part(body-cell){border-bottom-color: color-mix(in srgb,var(--um-blue) 10%,white 90%)}.monitoring-legend{margin: 0;padding: 0.55rem 0.75rem;border-inline-start: 3px solid color-mix(in srgb,var(--um-maize) 70%,var(--um-blue) 30%);border-radius: 8px;background: color-mix(in srgb,var(--um-maize) 15%,white 85%);color: var(--monitoring-muted);font-size: 0.84rem}.monitoring-kpi-grid{align-items: stretch}.monitoring-kpi-card{--monitoring-accent: var(--monitoring-login-accent);gap: 0.45rem;transition: transform 220ms ease,box-shadow 220ms ease}.monitoring-kpi-card:hover{transform: translateY(-2px);box-shadow: 0 20px 32px -22px color-mix(in srgb,var(--um-blue) 70%,transparent 30%)}.monitoring-kpi-accent{height: 6px;border-radius: 999px;margin-bottom: 0.25rem;background: var(--monitoring-accent)}.monitoring-kpi-eyebrow{color: var(--monitoring-muted);font-size: 0.7rem;letter-spacing: 0.09em;font-weight: 650}.monitoring-kpi-current{color: var(--um-blue);font-family: var(--um-font-primary);font-size: 2rem;font-weight: 760;line-height: 1}.monitoring-kpi-delta{width: fit-content;border-radius: 999px;padding: 0.26rem 0.6rem;font-size: 0.76rem;font-weight: 700}.monitoring-kpi-delta.is-up{color: #14683f;background: color-mix(in srgb,#3bb273 18%,white 82%)}.monitoring-kpi-delta.is-down{color: #8f2d18;background: color-mix(in srgb,#d4573f 19%,white 81%)}.monitoring-kpi-prev,.monitoring-kpi-subtitle{margin: 0;color: var(--monitoring-muted);font-size: 0.82rem}.monitoring-sparkline{display: flex;align-items: flex-end;gap: 4px;height: 52px;padding-top: 2px;--monitoring-accent: var(--monitoring-login-accent)}.monitoring-sparkline-bar{min-width: 4px;flex: 1 1 0;border-radius: 999px;background: linear-gradient(180deg,var(--monitoring-accent) 0%,color-mix(in srgb,var(--monitoring-accent) 30%,white 70%) 100%)}.monitoring-pattern-summary{margin: 0;color: var(--monitoring-muted);font-size: 0.9rem;font-weight: 600}.monitoring-chart-card{gap: 0.55rem}.monitoring-chart-title{color: var(--um-blue);font-family: var(--um-font-primary);font-weight: 620}.monitoring-bar-chart{padding: 0.45rem 0.2rem 0}.monitoring-bar-column{justify-content: flex-end;gap: 0.3rem}.monitoring-bar-count{color: var(--monitoring-muted);font-size: 0.77rem;font-weight: 700}.monitoring-bar{min-height: 10px;border-radius: 10px 10px 5px 5px;background: linear-gradient(180deg,color-mix(in srgb,var(--um-blue) 72%,#59a2ec 28%) 0%,var(--um-blue) 100%)}.monitoring-bar-label{margin-top: 0.1rem;color: var(--monitoring-muted);font-size: 0.75rem;line-height: 1.15;text-align: center;word-break: break-word}@media (max-width: 1024px){.monitoring-kpi-card{width: calc(50% - 10px) !important;min-width: 220px !important}}@media (max-width: 700px){.admin-monitoring-view{padding: 0.5rem 0 1.4rem}.monitoring-hero{padding: 0.95rem 0.9rem}.monitoring-toolbar{padding: 0.8rem}.monitoring-filter,.monitoring-top-x-field,.monitoring-card-controls vaadin-button,.monitoring-card-controls vaadin-integer-field{width: 100%;max-width: none}.monitoring-kpi-card{width: 100% !important;min-width: 0 !important}}.practice-catalog-view{height: 100%;display: flex;flex-direction: column}.catalog-header{padding: 1rem 1.25rem 0.75rem;background: transparent}.catalog-filter-row{margin-top: 0.75rem}.catalog-page-title{font-family: var(--um-font-primary);font-size: 1.35rem;font-weight: 600;color: var(--um-blue);margin: 0 0 0.75rem 0}.catalog-header vaadin-multi-select-combo-box,.catalog-header vaadin-text-field,.catalog-header vaadin-select{--vaadin-input-field-height: 2.25rem;min-width: 120px}@media (max-width: 640px){.catalog-filter-row{flex-wrap: wrap !important;gap: 0.5rem}.catalog-filter-row>*{flex: 1 1 calc(50% - 0.5rem) !important;min-width: unset !important;max-width: unset !important;width: auto !important}.catalog-filter-row vaadin-button{flex: 0 0 auto !important}}.catalog-content{flex: 1;padding: 0.75rem 1.25rem 1rem;overflow: hidden}.practice-catalog-view vaadin-grid::part(header-cell){font-family: var(--um-font-primary);font-size: 0.78rem;font-weight: 600;text-transform: uppercase;letter-spacing: 0.04em;color: var(--um-secondary-text);background: #f7fafd;border-bottom: 2px solid #dde8f5}.practice-catalog-view vaadin-grid::part(row){border-bottom: 1px solid #eef2f7}.practice-catalog-view vaadin-grid::part(cell){padding-top: 0.5rem;padding-bottom: 0.5rem}.catalog-type-badge{display: inline-block;font-size: 0.72rem;font-weight: 600;padding: 0.2em 0.6em;border-radius: 4px;white-space: nowrap;background: #e8eef5;color: var(--um-blue)}.catalog-type-badge--mcp-server{background: #fef3cd;color: #7d4e00}.catalog-type-badge--skill{background: #e3f0e8;color: #1a5c2a}.catalog-type-badge--prompt{background: #e8eef5;color: var(--um-blue)}.catalog-type-badge--agent-instructions{background: #eee8f5;color: #3a1a5c}.catalog-type-badge--framework{background: #fde8e3;color: #5c1a1a}.found-in-reviews-badge{font-size: 0.72rem;color: var(--um-secondary-text);font-style: italic}.mcp-view{width: 100%;max-width: 900px;margin: 0 auto}.mcp-section{margin-bottom: var(--um-gap-m)}.mcp-info-banner{width: 100%;box-sizing: border-box;padding: 0.75rem 1rem;margin-bottom: var(--um-gap-m);border-radius: var(--um-radius-m);background: var(--um-surface-subtle);border-inline-start: 4px solid var(--um-maize);color: var(--um-secondary-text)}.mcp-info-banner p{margin: 0}.mcp-code-block{width: 100%;box-sizing: border-box;background-color: var(--um-surface-code);border-left: 4px solid var(--um-blue);border-radius: var(--um-radius-s);padding: 12px 16px;margin: 0.5rem 0;font-family: monospace;font-size: 0.85rem;line-height: 1.5;white-space: pre-wrap;word-break: break-word;overflow-x: auto}.mcp-resource-entry{margin-bottom: 0.75rem}.mcp-resource-entry .mcp-code-inline{display: inline-block;width: auto;border-left: none;padding: 4px 8px;background: var(--um-contrast-10)}.mcp-steps-list{margin: 0.5rem 0 0 0;padding-left: 1.5rem;line-height: 1.6}.landing-view{width: 100%;max-width: 1100px;margin: 0 auto;padding: 0 1.5rem 2.5rem;box-sizing: border-box}.landing-hero{width: 100%;padding: 2.5rem 1rem 2rem;text-align: center;display: flex;flex-direction: column;align-items: center;gap: 0.85rem}.landing-hero-logo{width: clamp(100px,16vw,180px);height: auto;margin: 0}.landing-hero-tagline{font-size: 1.2rem;color: var(--um-secondary-text);max-width: 560px;margin: 0;line-height: 1.6}.landing-hero-cta{margin-top: 0.5rem;text-decoration: none}.landing-hero-cta vaadin-button{--vaadin-button-background: var(--um-maize);--vaadin-button-hover-background: color-mix(in srgb,var(--um-maize) 85%,black 15%);--vaadin-button-border-color: var(--um-maize)}.landing-hero-cta vaadin-button::part(label){color: var(--um-blue);font-weight: 700}.landing-section-heading{font-family: var(--um-font-primary);font-size: 1.5rem;font-weight: 600;color: var(--um-blue);margin: 0 0 1.25rem 0;text-align: center}.landing-features{padding: 1.75rem 0;border-top: 1px solid #e8eef5}.landing-features-grid{display: grid;grid-template-columns: repeat(3,1fr);gap: 1.25rem}@media (max-width: 768px){.landing-features-grid{grid-template-columns: 1fr}}.landing-feature-card{background: #f7fafd;border: 1px solid #dde8f5;border-radius: 10px;padding: 1.1rem 1.25rem;display: flex;flex-direction: column;gap: 0.35rem;transition: box-shadow 0.15s ease,transform 0.15s ease}.landing-feature-card:hover{box-shadow: 0 4px 16px rgba(0,39,76,0.1);transform: translateY(-2px)}.landing-feature-icon{font-size: 1.75rem;line-height: 1}.landing-feature-title{font-family: var(--um-font-primary);font-size: 1rem;font-weight: 600;color: var(--um-blue);margin: 0}.landing-feature-body{font-size: 0.9rem;color: var(--um-secondary-text);line-height: 1.55;margin: 0}.landing-how-it-works{padding: 1.75rem 0 0;border-top: 1px solid #e8eef5}.landing-steps{display: flex;gap: 2rem;justify-content: center}@media (max-width: 768px){.landing-steps{flex-direction: column;align-items: flex-start}}.landing-step{display: flex;gap: 1rem;align-items: flex-start;flex: 1;max-width: 300px}.landing-step-number{flex-shrink: 0;width: 2.25rem;height: 2.25rem;border-radius: 50%;background: var(--um-blue);color: var(--um-maize);font-family: var(--um-font-primary);font-weight: 700;font-size: 1rem;display: flex;align-items: center;justify-content: center;margin-top: 0.15rem}.landing-step-content{display: flex;flex-direction: column;gap: 0.35rem}.landing-step-title{font-family: var(--um-font-primary);font-size: 1rem;font-weight: 600;color: var(--um-blue);margin: 0}.landing-step-body{font-size: 0.9rem;color: var(--um-secondary-text);line-height: 1.55;margin: 0}