:root{--bg-color: #0f172a;--text-color: #f8fafc;--accent-color: #38bdf8;--accent-glow: rgba(56, 189, 248, .5);--card-bg: rgba(30, 41, 59, .7);--border-color: rgba(255, 255, 255, .1);--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}body{margin:0;background-color:var(--bg-color);color:var(--text-color);font-family:var(--font-family);-webkit-font-smoothing:antialiased}#root{display:flex;flex-direction:column;min-height:100vh}.app-header{padding:2rem;background:linear-gradient(135deg,#0f172ae6,#1e3a8ae6);border-bottom:1px solid var(--border-color);box-shadow:0 4px 30px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.app-title{margin:0;font-size:2rem;font-weight:700;background:linear-gradient(to right,#38bdf8,#818cf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.nav-links{margin-top:1rem;display:flex;gap:1rem}.nav-link{color:var(--text-color);text-decoration:none;padding:.5rem 1rem;border-radius:.5rem;background:var(--card-bg);border:1px solid var(--border-color);transition:all .2s ease-in-out}.nav-link:hover,.nav-link.active{background:#38bdf826;border-color:var(--accent-color);box-shadow:0 0 15px var(--accent-glow)}.main-content{padding:2rem;flex:1}.card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:1rem;padding:1.5rem;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 4px 6px #0000001a}.matrix-container{overflow-x:auto;border-radius:.5rem;border:1px solid var(--border-color);background:#0f172a66;max-height:70vh;position:relative}.matrix-table{width:100%;border-collapse:separate;border-spacing:0;text-align:left}.matrix-th{padding:1rem;background:#1e293bfa;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:sticky;top:0;z-index:10;border-bottom:2px solid var(--border-color);font-weight:600;box-shadow:0 4px 6px -1px #0000001a}.matrix-workload-header{background:#38bdf81a;padding:.75rem 1rem;font-weight:700;color:var(--accent-color);border-bottom:1px solid var(--border-color)}.matrix-family-header{background:#ffffff05;padding:.5rem 1rem .5rem 2rem;font-weight:600;color:#94a3b8;border-bottom:1px solid var(--border-color)}.matrix-tr{transition:background-color .15s ease}.matrix-tr>td{border-bottom:1px solid var(--border-color)}.matrix-tr:hover{background:#ffffff0d}.matrix-td{padding:.75rem 1rem .75rem 3rem;font-size:.9rem}.matrix-td-status{padding:.75rem 1rem}.status-badge{display:inline-flex;align-items:center;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:600;white-space:nowrap}.status-included{background:#10b98126;color:#34d399;border:1px solid rgba(52,211,153,.3)}.status-core{background:#f59e0b26;color:#fbbf24;border:1px solid rgba(251,191,36,.3)}.status-addon{background:#38bdf826;color:#38bdf8;border:1px solid rgba(56,189,248,.3)}.status-noprereq{background:#ef444426;color:#f87171;border:1px solid rgba(248,113,113,.3)}.status-notincluded{background:#94a3b81a;color:#94a3b8;border:1px solid rgba(148,163,184,.2)}.status-azure{background:#8b5cf626;color:#a78bfa;border:1px solid rgba(167,139,250,.3)}.license-select{background:#0f172acc;color:var(--text-color);border:1px solid var(--border-color);border-radius:.25rem;padding:.5rem;width:100%;font-family:var(--font-family);font-size:.9rem;font-weight:600;outline:none}.license-select:focus{border-color:var(--accent-color)}.addon-card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:.75rem;padding:1.25rem;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;align-items:flex-start}.addon-card:hover:not(.disabled){border-color:var(--accent-color);box-shadow:0 0 15px #38bdf81a;background:#ffffff0d}.addon-card.disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.8)}.addon-card.selected{border-color:var(--accent-color);background:#38bdf81a;box-shadow:inset 0 0 0 1px var(--accent-color)}.summary-workload{margin-bottom:2rem;border:1px solid var(--border-color);border-radius:.75rem;overflow:hidden}.summary-workload-title{margin:0;padding:1rem 1.5rem;background:#38bdf81a;color:var(--accent-color);font-size:1.1rem;font-weight:700;border-bottom:1px solid var(--border-color)}.summary-family{border-bottom:1px solid var(--border-color)}.summary-family:last-child{border-bottom:none}.summary-family-title{margin:0;padding:.75rem 1.5rem .75rem 2rem;background:#ffffff05;color:#94a3b8;font-size:.95rem;font-weight:600;border-bottom:1px solid rgba(255,255,255,.05)}.summary-features{padding:.5rem 0}.summary-feature-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1.5rem .75rem 3rem;transition:background-color .15s ease}.summary-feature-item:hover{background:#ffffff08}.summary-feature-name{font-size:.9rem;font-weight:500}.app-body{display:flex;flex:1;max-width:100%}.main-content{padding:2rem;flex:1;min-width:0}.sidebar{width:250px;background:#1e293b66;border-right:1px solid var(--border-color);padding:2rem 1.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);flex-shrink:0}.sidebar-section{margin-bottom:2rem}.sidebar-title{margin:0 0 1rem;font-size:1rem;color:var(--text-color)}.search-input{width:100%;padding:.5rem .75rem;background:#0f172acc;border:1px solid var(--border-color);border-radius:.5rem;color:var(--text-color);font-family:var(--font-family);box-sizing:border-box}.search-input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 1px var(--accent-color)}.workload-list{display:flex;flex-direction:column;gap:.75rem}.workload-label{display:flex;align-items:center;font-size:.9rem;color:#94a3b8;cursor:pointer}.workload-label:hover{color:var(--text-color)}.text-btn{background:none;border:none;color:var(--accent-color);cursor:pointer;padding:0;font-size:inherit}.text-btn:hover{text-decoration:underline}.tooltip-container{position:relative;display:inline-flex}.tooltip-text{visibility:hidden;background:#0f172af2;color:var(--text-color);text-align:left;padding:.75rem 1rem;border-radius:.5rem;border:1px solid var(--accent-color);box-shadow:0 4px 15px #00000080;position:absolute;z-index:100;bottom:125%;left:50%;transform:translate(-50%);opacity:0;transition:opacity .2s,visibility .2s;width:max-content;max-width:250px;font-size:.8rem;font-weight:400;white-space:normal;line-height:1.4}.tooltip-container:hover .tooltip-text{visibility:visible;opacity:1}.tooltip-text:after{content:"";position:absolute;top:100%;left:50%;margin-left:-6px;border-width:6px;border-style:solid;border-color:var(--accent-color) transparent transparent transparent}