:root{--color-brand-primary:#0078d4;--color-brand-secondary:#106ebe;--color-brand-hover:#005a9e;--color-brand-pressed:#004578;--color-neutral-bg-1:#fff;--color-neutral-bg-2:#f5f5f5;--color-neutral-bg-3:#f0f0f0;--color-neutral-bg-4:#e0e0e0;--color-neutral-fg-1:#242424;--color-neutral-fg-2:#424242;--color-neutral-fg-3:#616161;--color-neutral-fg-4:#757575;--color-neutral-stroke:#d1d1d1;--color-neutral-stroke-accessible:#8a8a8a;--color-success:#107c10;--color-success-bg:#dff6dd;--color-warning:#f7630c;--color-warning-bg:#fff4ce;--color-error:#d13438;--color-error-bg:#fde7e9;--spacing-xs:4px;--spacing-s:8px;--spacing-m:12px;--spacing-l:16px;--spacing-xl:20px;--spacing-xxl:24px;--spacing-xxxl:32px;--radius-s:4px;--radius-m:8px;--radius-l:12px;--shadow-2:0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.14);--shadow-4:0 0 2px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.14);--shadow-8:0 0 2px rgba(0,0,0,.12),0 8px 16px rgba(0,0,0,.14);--shadow-16:0 0 2px rgba(0,0,0,.12),0 16px 32px rgba(0,0,0,.14);--font-family-base:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;--font-size-100:10px;--font-size-200:12px;--font-size-300:14px;--font-size-400:16px;--font-size-500:20px;--font-size-600:24px;--font-size-700:28px;--font-size-800:32px;--font-weight-regular:400;--font-weight-semibold:600;--font-weight-bold:700}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family-base);background:var(--color-neutral-bg-2);min-height:100vh;padding:var(--spacing-xl);color:var(--color-neutral-fg-1);font-size:var(--font-size-300);line-height:1.5}.container{max-width:1400px;margin:0 auto}header{background:var(--color-neutral-bg-1);padding:var(--spacing-xxxl);border-radius:var(--radius-l);box-shadow:var(--shadow-4);margin-bottom:var(--spacing-xxl);position:relative;border:1px solid var(--color-neutral-stroke)}h1{color:var(--color-neutral-fg-1);font-size:var(--font-size-800);font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-s)}.subtitle{color:var(--color-neutral-fg-3);font-size:var(--font-size-300)}.main-content{display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--spacing-xxl);gap:var(--spacing-xxl);margin-bottom:var(--spacing-xxl)}@media (max-width:968px){.main-content{grid-template-columns:1fr}}.card{background:var(--color-neutral-bg-1);padding:var(--spacing-xxl);border-radius:var(--radius-l);box-shadow:var(--shadow-2);border:1px solid var(--color-neutral-stroke);transition:box-shadow .2s cubic-bezier(.4,0,.2,1)}.card:hover{box-shadow:var(--shadow-4)}.card.collapsed{padding:var(--spacing-l)}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-l);border-bottom:1px solid var(--color-neutral-stroke);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.card.collapsed .card-header{margin-bottom:0;padding-bottom:0;border-bottom:none}.card-title{display:flex;align-items:center;gap:10px}.collapse-icon{font-size:20px;transition:transform .3s}.collapsed .collapse-icon{transform:rotate(-90deg)}.card-content{display:block}.card.collapsed .card-content{display:none}.card-summary{display:none;margin-top:15px}.card.collapsed .card-summary{display:block}.summary-item{display:flex;align-items:center;gap:var(--spacing-s);padding:var(--spacing-s) var(--spacing-m);background:var(--color-neutral-bg-2);border-radius:var(--radius-s);margin-bottom:var(--spacing-s);font-size:var(--font-size-200);border:1px solid var(--color-neutral-stroke)}.summary-label{font-weight:var(--font-weight-semibold);color:var(--color-neutral-fg-2);min-width:100px}.summary-value{font-family:Consolas,Monaco,Courier New,monospace;word-break:break-all}.card h2,.summary-value{color:var(--color-neutral-fg-1)}.card h2{font-size:var(--font-size-600);font-weight:var(--font-weight-semibold);margin:0}.form-group{margin-bottom:var(--spacing-xl)}label{display:block;color:var(--color-neutral-fg-2);font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-s);font-size:var(--font-size-300)}input[type=password],input[type=text],input[type=url],select,textarea{width:100%;padding:var(--spacing-s) var(--spacing-m);border:1px solid var(--color-neutral-stroke);border-radius:var(--radius-s);font-size:var(--font-size-300);font-family:var(--font-family-base);background:var(--color-neutral-bg-1);color:var(--color-neutral-fg-1);transition:all .15s cubic-bezier(.4,0,.2,1)}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--color-brand-primary);border-width:2px;padding:calc(var(--spacing-s) - 1px) calc(var(--spacing-m) - 1px)}button{background:var(--color-brand-primary);color:#fff;padding:var(--spacing-s) var(--spacing-l);border:none;border-radius:var(--radius-s);font-size:var(--font-size-300);font-weight:var(--font-weight-semibold);font-family:var(--font-family-base);cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);width:100%;margin-top:var(--spacing-s);min-height:32px}button:hover{background:var(--color-brand-hover)}button:active{background:var(--color-brand-pressed);transform:scale(.98)}button:disabled{background:var(--color-neutral-bg-4);color:var(--color-neutral-fg-4);cursor:not-allowed}.btn-secondary{background:var(--color-success)}.btn-secondary:hover{background:#0e6b0e}.btn-danger{background:var(--color-error)}.btn-danger:hover{background:#b02a2e}.success{background:var(--color-success-bg);color:var(--color-success);border-left:4px solid var(--color-success)}.error,.success{padding:var(--spacing-m);border-radius:var(--radius-s);margin-top:var(--spacing-s)}.error{background:var(--color-error-bg);color:var(--color-error);border-left:4px solid var(--color-error)}.info{background:#e6f2ff;color:#003d7a;padding:var(--spacing-m);border-radius:var(--radius-s);margin-top:var(--spacing-s);border-left:4px solid var(--color-brand-primary)}.full-width{grid-column:1/-1}.hidden{display:none!important}.version{position:absolute;top:var(--spacing-l);right:var(--spacing-xxxl);background:var(--color-brand-primary);color:#fff;padding:var(--spacing-s) var(--spacing-m);border-radius:16px;font-size:var(--font-size-200);font-weight:var(--font-weight-semibold);cursor:pointer;border:none}.step{background:var(--color-neutral-bg-2);padding:var(--spacing-xl);border-radius:var(--radius-s);margin-bottom:var(--spacing-xl);border-left:4px solid var(--color-brand-primary)}.step-number{background:#667eea;color:#fff;width:28px;height:28px;min-width:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;margin-right:10px}.code-block{background:#1e1e1e;color:#4ec9b0;padding:var(--spacing-m);border-radius:var(--radius-s);font-family:Consolas,Monaco,Courier New,monospace;font-size:var(--font-size-200);overflow-x:auto;margin-top:var(--spacing-s);max-height:300px;overflow-y:auto}.favorite-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));grid-gap:var(--spacing-s);gap:var(--spacing-s)}.favorite-tile{background:var(--color-brand-primary);color:#fff;padding:var(--spacing-l);border-radius:var(--radius-s);cursor:pointer;transition:all .15s ease;border:1px solid transparent}.favorite-tile:hover{background:var(--color-brand-hover);transform:translateY(-2px)}.saved-config-item{display:flex;justify-content:space-between;align-items:flex-start;padding:var(--spacing-m);background:var(--color-neutral-bg-1);border-radius:var(--radius-s);border:1px solid var(--color-neutral-stroke);margin-bottom:var(--spacing-s)}.btn-small{padding:var(--spacing-xs) var(--spacing-m);font-size:var(--font-size-200);width:auto;margin:0 4px 0 0}.add-group-btn{background:#667eea;color:#fff;padding:10px 16px;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;width:100%;margin-bottom:15px}.add-group-btn:hover{background:#5568d3}.top-nav{position:relative;background:var(--color-neutral-bg-1);border-bottom:1px solid var(--color-neutral-stroke);padding:var(--spacing-m) var(--spacing-xl);margin:calc(-1 * var(--spacing-xl)) calc(-1 * var(--spacing-xl)) var(--spacing-xxl)}.top-nav-container{justify-content:space-between;max-width:1400px;margin:0 auto;height:48px}.nav-left,.top-nav-container{display:flex;align-items:center}.nav-left{position:relative}.nav-right{display:flex;align-items:center;gap:var(--spacing-m)}.tenant-selector-label{margin-right:8px;font-size:var(--font-size-300);color:var(--color-neutral-fg-2);font-weight:var(--font-weight-semibold)}.tenant-dropdown{padding:6px 12px;border-radius:var(--radius-s);font-size:var(--font-size-300);min-width:250px}.gear-button,.tenant-dropdown{border:1px solid var(--color-neutral-stroke)}.gear-button{padding:8px 12px;border-radius:var(--radius-s);background:var(--color-neutral-bg-1);cursor:pointer;font-size:16px;width:auto;margin:0}.gear-button:hover{background:var(--color-neutral-bg-2)}.hamburger{background:transparent;border:1px solid var(--color-neutral-stroke);border-radius:var(--radius-s);height:36px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;padding:0;transition:all .15s cubic-bezier(.4,0,.2,1);margin:0;width:36px}.hamburger:hover{background:var(--color-neutral-bg-2);border-color:var(--color-neutral-stroke-accessible)}.hamburger-line{width:20px;height:2px;background:var(--color-neutral-fg-2);border-radius:2px;transition:all .15s cubic-bezier(.4,0,.2,1)}.hamburger.active .hamburger-line:first-child{transform:translateY(6px) rotate(45deg)}.hamburger.active .hamburger-line:nth-child(2){opacity:0}.hamburger.active .hamburger-line:nth-child(3){transform:translateY(-6px) rotate(-45deg)}.nav-dropdown{position:absolute;top:56px;left:var(--spacing-xl);background:var(--color-neutral-bg-1);border:1px solid var(--color-neutral-stroke);border-radius:var(--radius-m);box-shadow:var(--shadow-8);min-width:220px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000}.nav-dropdown.open{opacity:1;visibility:visible;transform:translateY(0)}.nav-dropdown-item{display:flex;align-items:center;gap:var(--spacing-s);padding:var(--spacing-m) var(--spacing-l);color:var(--color-neutral-fg-1);text-decoration:none;font-size:var(--font-size-300);cursor:pointer;border-bottom:1px solid var(--color-neutral-stroke);transition:background .15s ease}.nav-dropdown-item:last-child{border-bottom:none}.nav-dropdown-item:hover{background:var(--color-neutral-bg-2)}.nav-dropdown-item:first-child{border-radius:var(--radius-m) var(--radius-m) 0 0}.nav-dropdown-item:last-child{border-radius:0 0 var(--radius-m) var(--radius-m)}.api-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);z-index:10000;display:flex;align-items:center;justify-content:center;padding:var(--spacing-xl)}.api-modal-content{background:var(--color-neutral-bg-1);border-radius:var(--radius-l);max-width:900px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-16);border:1px solid var(--color-neutral-stroke)}.api-modal-header{padding:var(--spacing-xl) var(--spacing-xxxl);border-bottom:1px solid var(--color-neutral-stroke);display:flex;justify-content:space-between;align-items:center;background:var(--color-neutral-bg-2)}.api-modal-close{background:transparent;border:1px solid var(--color-neutral-stroke);border-radius:50%;width:32px;height:32px;cursor:pointer;font-size:18px;padding:0}.scope-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}.scope-btn{padding:4px 10px;font-size:12px;border-radius:4px;border:1px solid var(--color-neutral-stroke);background:var(--color-neutral-bg-1);cursor:pointer;width:auto;margin:0}.scope-btn.active{background:var(--color-brand-primary);color:#fff;border-color:var(--color-brand-primary)}.view-api-btn{padding:6px 12px;font-size:12px;border:1px solid var(--color-neutral-stroke);border-radius:var(--radius-s);background:var(--color-neutral-bg-1);cursor:pointer;width:auto;margin:0}.view-api-btn:hover{background:var(--color-neutral-bg-2)}.loading{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid #667eea;border-top-color:transparent;animation:spin .6s linear infinite;margin-right:6px;vertical-align:middle}@keyframes spin{to{transform:rotate(1turn)}}