:root{--primary: #0f62fe;--on-primary: #ffffff;--ink: #161616;--ink-muted: #525252;--ink-subtle: #8c8c8c;--canvas: #ffffff;--surface-1: #f4f4f4;--surface-2: #e0e0e0;--inverse-canvas: #161616;--inverse-surface-1: #262626;--inverse-ink: #ffffff;--inverse-ink-muted: #c6c6c6;--hairline: #e0e0e0;--hairline-strong: #161616;--blue-60: #0043ce;--blue-80: #002d9c;--blue-hover: #0050e6;--semantic-success: #24a148;--semantic-warning: #f1c21b;--semantic-error: #da1e28;--semantic-info: #0f62fe;--bg-base: #ffffff;--bg-surface: #ffffff;--bg-mid: #f4f4f4;--bg-card: #ffffff;--bg-card-alt: #f4f4f4;--bg-card-hover: #f9f9f9;--spotify-green: #0f62fe;--spotify-green-hover: #0050e6;--spotify-green-active: #002d9c;--spotify-green-border: #0f62fe;--ibm-blue: #0f62fe;--text-base: #161616;--text-silver: #525252;--text-near-white: #161616;--text-light: #161616;--text-negative: #da1e28;--text-warning: #b28600;--text-announcement: #0f62fe;--border-gray: #e0e0e0;--border-light: #d0d0d0;--border-subtle: #e0e0e0;--separator: #e0e0e0;--shadow-heavy: 0 4px 16px rgba(0, 0, 0, .1);--shadow-medium: 0 1px 4px rgba(0, 0, 0, .06);--shadow-inset-input: none;--shadow-inset-input-focus: none;--font-family-ui: "IBM Plex Sans", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-family-mono: "IBM Plex Mono", monospace;--radius-none: 0px;--radius-xs: 2px;--radius-sm: 4px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--canvas);color:var(--ink);font-family:var(--font-family-ui);font-size:14px;line-height:1.5;letter-spacing:.16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;overflow-x:hidden}a{color:var(--primary);text-decoration:none;transition:color .15s ease}a:hover{color:var(--blue-hover);text-decoration:underline}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--surface-1)}::-webkit-scrollbar-thumb{background:#c6c6c6;border-radius:0}::-webkit-scrollbar-thumb:hover{background:#8c8c8c}h1,h2,h3,h4,h5,h6{color:var(--ink);font-family:var(--font-family-ui);font-weight:300;letter-spacing:-.01em}h1{font-size:36px;font-weight:300;line-height:1.2}h2{font-size:26px;font-weight:300;line-height:1.25}h3{font-size:20px;font-weight:400;line-height:1.35}.text-silver{color:var(--ink-muted)}.text-green{color:var(--primary)}.text-negative{color:var(--semantic-error)}.text-warning{color:var(--text-warning)}.text-info{color:var(--primary)}.font-mono{font-family:var(--font-family-mono);letter-spacing:0px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:0;padding:11px 16px;font-family:var(--font-family-ui);font-size:14px;font-weight:400;letter-spacing:.16px;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease;border:1px solid transparent;outline:none;white-space:nowrap;-webkit-user-select:none;user-select:none;text-decoration:none}.btn:active{transform:none}.btn-primary{background-color:var(--primary);color:var(--on-primary);border-color:var(--primary)}.btn-primary:hover{background-color:var(--blue-hover);border-color:var(--blue-hover);color:var(--on-primary)}.btn-primary:active{background-color:var(--blue-80);border-color:var(--blue-80)}.btn-primary:disabled{background-color:var(--surface-2);border-color:var(--surface-2);color:var(--ink-subtle);cursor:not-allowed}.btn-secondary{background-color:var(--ink);color:var(--inverse-ink);border-color:var(--ink)}.btn-secondary:hover{background-color:var(--inverse-surface-1);border-color:var(--inverse-surface-1)}.btn-secondary:disabled{background-color:var(--surface-2);border-color:var(--surface-2);color:var(--ink-subtle);cursor:not-allowed}.btn-outlined{background-color:var(--canvas);color:var(--primary);border:1px solid var(--primary)}.btn-outlined:hover{background-color:#0f62fe14;color:var(--blue-60);border-color:var(--blue-60)}.btn-ghost{background-color:transparent;color:var(--primary);border:1px solid transparent}.btn-ghost:hover{background-color:var(--surface-1);color:var(--blue-hover)}.btn-sm{padding:7px 12px;font-size:12px;letter-spacing:.16px}.btn-lg{padding:14px 24px;font-size:15px;letter-spacing:.16px}.btn-circle{border-radius:0;width:36px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center}.card{background-color:var(--canvas);border-radius:0;padding:24px;border:1px solid var(--hairline);box-shadow:none;transition:background-color .15s ease,border-color .15s ease}.card:hover{background-color:var(--surface-1)}.card-elevated{background-color:var(--surface-1);border:1px solid var(--hairline);box-shadow:none}.input-field{width:100%;background-color:var(--surface-1);color:var(--ink);border-radius:0;padding:11px 16px;font-family:var(--font-family-ui);font-size:14px;letter-spacing:.16px;border:1px solid transparent;border-bottom:1px solid #8c8c8c;outline:none;transition:border-color .15s ease,background-color .15s ease}.input-field:focus{background-color:var(--surface-1);border-bottom:2px solid var(--primary);outline:none}.input-field::placeholder{color:var(--ink-subtle)}.input-field:disabled{background-color:var(--surface-2);color:var(--ink-subtle);border-bottom:1px solid var(--surface-2);cursor:not-allowed}select.input-field{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23525252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:42px}[dir=rtl] select.input-field{background-position:left 16px center;padding-right:16px;padding-left:42px}.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:0;font-size:12px;font-weight:500;letter-spacing:.16px}.badge-green{background-color:#defbe6;color:#198038;border:1px solid #a7f0ba}.badge-blue{background-color:#edf5ff;color:#0f62fe;border:1px solid #d0e2ff}.badge-yellow{background-color:#fef7d8;color:#8a6d00;border:1px solid #fddc69}.badge-red{background-color:#fff1f1;color:#da1e28;border:1px solid #ffd7d9}.badge-gray{background-color:var(--surface-1);color:var(--ink-muted);border:1px solid var(--hairline)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#161616a6;display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px;animation:fadeIn .15s ease-out}.modal-container{background-color:var(--canvas);border:1px solid var(--hairline);border-radius:0;width:100%;max-width:620px;max-height:90vh;overflow-y:auto;box-shadow:0 8px 32px #00000029;animation:slideUp .2s cubic-bezier(.16,1,.3,1);position:relative}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.grid-container{display:grid;gap:24px}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}@media(max-width:900px){.grid-cols-3,.grid-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.grid-cols-2,.grid-cols-3,.grid-cols-4{grid-template-columns:1fr}}[dir=rtl]{font-family:IBM Plex Sans Arabic,IBM Plex Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;letter-spacing:0px!important}[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] h4,[dir=rtl] h5,[dir=rtl] h6{font-family:IBM Plex Sans Arabic,IBM Plex Sans,sans-serif;letter-spacing:0px!important}pre,code,kbd,samp,.font-mono,textarea.font-mono,.code-block,.code-snippet,.code-snippet-container,.json-viewer,.json-editor,.json-response-container,.api-endpoint,.api-endpoint-banner,.api-path,[dir=ltr],[dir=rtl] pre,[dir=rtl] code,[dir=rtl] kbd,[dir=rtl] samp,[dir=rtl] .font-mono,[dir=rtl] textarea.font-mono,[dir=rtl] .code-block,[dir=rtl] .code-snippet,[dir=rtl] .code-snippet-container,[dir=rtl] .json-viewer,[dir=rtl] .json-editor,[dir=rtl] .json-response-container,[dir=rtl] .api-endpoint,[dir=rtl] .api-endpoint-banner,[dir=rtl] .api-path{direction:ltr!important;text-align:left!important;unicode-bidi:isolate!important}.dropdown-menu{position:absolute;top:calc(100% + 4px);z-index:150;min-width:220px;background-color:var(--canvas);border:1px solid var(--hairline);border-radius:0;box-shadow:0 4px 16px #0000001f;padding:4px;animation:fadeIn .15s ease}[dir=rtl] .dropdown-menu{left:0;right:auto}[dir=ltr] .dropdown-menu{right:0;left:auto}.dropdown-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;border-radius:0;border:none;background:transparent;color:var(--ink);font-size:13px;font-weight:400;cursor:pointer;transition:background-color .15s ease;text-align:inherit}.dropdown-item:hover{background-color:var(--surface-1);color:var(--ink)}.dropdown-item.text-danger:hover{background-color:#fff1f1;color:var(--semantic-error)}
