/* Pure v3.0.0 — Copyright 2013 Yahoo! — BSD License — github.com/pure-css/pure */
/*! Pure v3.0.0 | Copyright 2013 Yahoo! | BSD License | github.com/pure-css/pure */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html{font-family:sans-serif}.hidden,[hidden]{display:none!important}.pure-img{max-width:100%;height:auto;display:block}.pure-g{display:flex;flex-flow:row wrap;align-content:flex-start}.pure-u{display:inline-block;vertical-align:top}.pure-u-1,.pure-u-1-1,.pure-u-1-12,.pure-u-1-2,.pure-u-1-24,.pure-u-1-3,.pure-u-1-4,.pure-u-1-5,.pure-u-1-6,.pure-u-1-8,.pure-u-10-24,.pure-u-11-12,.pure-u-11-24,.pure-u-12-24,.pure-u-13-24,.pure-u-14-24,.pure-u-15-24,.pure-u-16-24,.pure-u-17-24,.pure-u-18-24,.pure-u-19-24,.pure-u-2-24,.pure-u-2-3,.pure-u-2-5,.pure-u-20-24,.pure-u-21-24,.pure-u-22-24,.pure-u-23-24,.pure-u-24-24,.pure-u-3-24,.pure-u-3-4,.pure-u-3-5,.pure-u-3-8,.pure-u-4-24,.pure-u-4-5,.pure-u-5-12,.pure-u-5-24,.pure-u-5-5,.pure-u-5-6,.pure-u-5-8,.pure-u-6-24,.pure-u-7-12,.pure-u-7-24,.pure-u-7-8,.pure-u-8-24,.pure-u-9-24{display:inline-block;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-u-1-24{width:4.1667%}.pure-u-1-12,.pure-u-2-24{width:8.3333%}.pure-u-1-8,.pure-u-3-24{width:12.5%}.pure-u-1-6,.pure-u-4-24{width:16.6667%}.pure-u-1-5{width:20%}.pure-u-5-24{width:20.8333%}.pure-u-1-4,.pure-u-6-24{width:25%}.pure-u-7-24{width:29.1667%}.pure-u-1-3,.pure-u-8-24{width:33.3333%}.pure-u-3-8,.pure-u-9-24{width:37.5%}.pure-u-2-5{width:40%}.pure-u-10-24,.pure-u-5-12{width:41.6667%}.pure-u-11-24{width:45.8333%}.pure-u-1-2,.pure-u-12-24{width:50%}.pure-u-13-24{width:54.1667%}.pure-u-14-24,.pure-u-7-12{width:58.3333%}.pure-u-3-5{width:60%}.pure-u-15-24,.pure-u-5-8{width:62.5%}.pure-u-16-24,.pure-u-2-3{width:66.6667%}.pure-u-17-24{width:70.8333%}.pure-u-18-24,.pure-u-3-4{width:75%}.pure-u-19-24{width:79.1667%}.pure-u-4-5{width:80%}.pure-u-20-24,.pure-u-5-6{width:83.3333%}.pure-u-21-24,.pure-u-7-8{width:87.5%}.pure-u-11-12,.pure-u-22-24{width:91.6667%}.pure-u-23-24{width:95.8333%}.pure-u-1,.pure-u-1-1,.pure-u-24-24,.pure-u-5-5{width:100%}.pure-button{display:inline-block;line-height:normal;white-space:nowrap;vertical-align:middle;text-align:center;cursor:pointer;-webkit-user-drag:none;-webkit-user-select:none;user-select:none;box-sizing:border-box}.pure-button::-moz-focus-inner{padding:0;border:0}.pure-button-group{letter-spacing:-.31em;text-rendering:optimizespeed}.opera-only :-o-prefocus,.pure-button-group{word-spacing:-0.43em}.pure-button-group .pure-button{letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-button{font-family:inherit;font-size:100%;padding:.5em 1em;color:rgba(0,0,0,.8);border:none transparent;background-color:#e6e6e6;text-decoration:none;border-radius:2px}.pure-button-hover,.pure-button:focus,.pure-button:hover{background-image:linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1))}.pure-button:focus{outline:0}.pure-button-active,.pure-button:active{box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 0 6px rgba(0,0,0,.2) inset;border-color:#000}.pure-button-disabled,.pure-button-disabled:active,.pure-button-disabled:focus,.pure-button-disabled:hover,.pure-button[disabled]{border:none;background-image:none;opacity:.4;cursor:not-allowed;box-shadow:none;pointer-events:none}.pure-button-hidden{display:none}.pure-button-primary,.pure-button-selected,a.pure-button-primary,a.pure-button-selected{background-color:#0078e7;color:#fff}.pure-button-group .pure-button{margin:0;border-radius:0;border-right:1px solid rgba(0,0,0,.2)}.pure-button-group .pure-button:first-child{border-top-left-radius:2px;border-bottom-left-radius:2px}.pure-button-group .pure-button:last-child{border-top-right-radius:2px;border-bottom-right-radius:2px;border-right:none}.pure-menu{box-sizing:border-box}.pure-menu-fixed{position:fixed;left:0;top:0;z-index:3}.pure-menu-item,.pure-menu-list{position:relative}.pure-menu-list{list-style:none;margin:0;padding:0}.pure-menu-item{padding:0;margin:0;height:100%}.pure-menu-heading,.pure-menu-link{display:block;text-decoration:none;white-space:nowrap}.pure-menu-horizontal{width:100%;white-space:nowrap}.pure-menu-horizontal .pure-menu-list{display:inline-block}.pure-menu-horizontal .pure-menu-heading,.pure-menu-horizontal .pure-menu-item,.pure-menu-horizontal .pure-menu-separator{display:inline-block;vertical-align:middle}.pure-menu-item .pure-menu-item{display:block}.pure-menu-children{display:none;position:absolute;left:100%;top:0;margin:0;padding:0;z-index:3}.pure-menu-heading,.pure-menu-link{padding:.5em 1em}.pure-menu-disabled{opacity:.5}
.pure-g{margin:0}

/* ==== Design tokens (ported from the source design system) ==== */
:root {
  --color-primary-400: #9D7FE3;
  --color-primary-500: #7F56D9;
  --color-primary-600: #6841B8;
  --color-secondary-500: #FFFFFF;
  --color-tertiary-400: #2D3342;
  --color-tertiary-500: #1F232F;
  --color-accent-400: #BEFF5E;
  --color-accent-500: #ABEC46;
  --color-accent-600: #98D83E;

  --color-bg-base: #0C111D;
  --color-bg-elevated: #141927;
  --color-bg-surface: #1F232F;
  --color-bg-card: #1E2533;
  --color-bg-hover: #252D3F;
  --color-bg-input: #1F232F;

  --color-text-primary: #FFFFFF;
  --color-text-secondary: #B8BDC9;
  --color-text-tertiary: #8A8F9B;
  --color-text-placeholder: #6A6F7B;
  --color-text-disabled: #4A4F5B;

  --color-border-default: #4F5561;
  --color-border-hover: #6A6F7B;
  --color-border-subtle: #3A3F4B;

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem;

  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px;
  --font-medium: 500; --font-semibold: 600;
  --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem;
  --leading-normal: 1.5;

  --ds-brand-gradient: linear-gradient(100deg, #7F56D9 57.87%, #F0FF48 89.47%, #A9FE4A 100%);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--color-bg-base);
  color: var(--color-text-secondary);
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(127,86,217,.35); }

/* ==== Component styles (ported from the source design system) ==== */
[data-disabled="true"], [data-disabled="true"] * { cursor: not-allowed !important; opacity: .7 !important; user-select: none !important; pointer-events: none !important; }

/* ---- Buttons ---- */
.btn-base { display: inline-flex; align-items: center; justify-content: center; font-weight: 500; transition: all .2s; outline: none; cursor: pointer; gap: 8px; }
.btn-base:focus { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 3px var(--color-primary-500); }
.btn-base:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn-sm { padding: .375rem .75rem; font-size: .875rem; line-height: 1.25rem; border-radius: .375rem; }
.btn-md { padding: .5rem 1rem; font-size: 1rem; line-height: 1.5rem; border-radius: .5rem; }
.btn-lg { padding: .75rem 1.5rem; font-size: 1.125rem; line-height: 1.75rem; border-radius: .75rem; }
.btn-primary { background-color: var(--color-primary-500); color: var(--color-text-primary); border: none; }
.btn-primary:hover { background-color: var(--color-primary-600); }
.btn-secondary { color: var(--color-tertiary-500); background: linear-gradient(#fff,#fff) padding-box, var(--ds-brand-gradient) border-box; border: 2px solid transparent; border-radius: 10px; }
.btn-secondary:hover { background: linear-gradient(#f5f5f5,#f5f5f5) padding-box, var(--ds-brand-gradient) border-box; }
.btn-tertiary { background-color: var(--color-tertiary-500); color: var(--color-secondary-500); border: 2px solid #4E4E4E; }
.btn-tertiary:hover { background-color: var(--color-tertiary-400); }
.btn-outline { color: var(--color-secondary-500); background-color: transparent; border: 2px solid #FFFFFF; }
.btn-outline:hover { background-color: rgba(255,255,255,.1); }
.btn-ghost { color: var(--color-primary-500); background-color: transparent; border: none; }
.btn-ghost:hover { background-color: rgba(127,86,217,.1); }
.btn-danger { background-color: #dc2626; color: #fff; border: none; }
.btn-danger:hover { background-color: #b91c1c; }
.btn-icon-only { aspect-ratio: 1; padding: .5rem; }
.btn-icon-only.btn-sm { padding: .375rem; }
.btn-icon-only.btn-lg { padding: .75rem; }
.btn-base img { width: 20px; height: 20px; border-radius: 4px; flex-shrink: 0; object-fit: cover; }
.btn-base svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.btn-sm svg { width: 1rem; height: 1rem; }
.btn-lg svg { width: 1.5rem; height: 1.5rem; }

/* ---- Cards ---- */
.card-base { background-color: var(--color-bg-card); border-radius: .5rem; overflow: hidden; border: 1px solid var(--color-border-default); display: flex; flex-direction: column; transition: all .2s ease-in-out; }
.card-base[data-clickable="true"] { cursor: pointer; }
.card-hover { cursor: pointer; }
.card-hover:hover, .card-base[data-clickable="true"]:hover { border-color: var(--color-primary-500); transform: translateY(-2px); }
.card-thumbnail { width: 100%; aspect-ratio: 16/9; background-color: var(--color-bg-hover); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.card-thumbnail-placeholder { display: flex; flex-direction: column; align-items: center; color: var(--color-text-placeholder); }
.card-thumbnail-placeholder svg { width: 40px; height: 40px; }
.card-content { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.card-header-main { flex: 1; min-width: 0; }
.card-title { font-size: var(--text-base); font-weight: var(--font-medium); color: var(--color-text-primary); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .15s ease-in-out; }
.card-hover:hover .card-title { color: var(--color-primary-500); }
.card-meta { font-size: var(--text-sm); color: var(--color-text-secondary); margin: var(--space-1) 0 0 0; }
.card-more-btn { padding: var(--space-1); background: transparent; border: none; border-radius: var(--radius-sm); color: var(--color-text-secondary); cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.card-more-btn:hover { background-color: var(--color-bg-hover); color: var(--color-primary-500); }
.card-more-btn svg { width: 18px; height: 18px; }
.card-base.card-layout-vertical { flex-direction: column; }
.card-base.card-layout-horizontal { flex-direction: row !important; width: 100%; }
.card-image-wrapper { background-color: var(--color-bg-card); }
.card-image { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.card-title-image-button .card-title { font-size: var(--text-lg); font-weight: var(--font-semibold); margin-bottom: var(--space-2); white-space: normal; }
.card-title-image-button .card-description { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.5; margin: var(--space-2) 0; }
.card-actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.card-history { display: flex; background-color: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: var(--space-3); cursor: pointer; transition: all .2s ease; overflow: hidden; min-height: 80px; }
.card-history-bar { width: 10px; flex-shrink: 0; }
.card-history-content { flex: 1; padding: var(--space-4); }
.card-history:hover { background-color: var(--color-bg-hover); border-color: var(--color-border-hover); }
.card-history[data-active="true"] { border-color: var(--color-primary-500); background-color: var(--color-bg-hover); }
.card-history-message { font-size: .875rem; color: var(--color-text-primary); line-height: 1.5; margin-bottom: var(--space-2); font-weight: 500; }
.card-history-footer { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.card-history-time { font-size: .75rem; color: var(--color-text-tertiary); }
.card-history-commit { font-size: .75rem; color: var(--color-text-secondary); font-family: 'Courier New', monospace; background-color: var(--color-bg-surface); padding: 2px 6px; border-radius: 4px; }
.card-history-bar.current, .card-history-bar.primary { background-color: var(--color-primary-500); }
.card-history-bar.success { background-color: #22c55e; }
.card-history-bar.error { background-color: #ef4444; }
.card-library { padding: var(--space-2); cursor: pointer; }
.card-library-content { display: flex; gap: var(--space-3); align-items: center; }
.card-library-image { flex-shrink: 0; border-radius: var(--radius-md); overflow: hidden; background-color: var(--color-bg-base); border: 1px solid var(--color-border-subtle); box-sizing: border-box; }
.card-library-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.card-library-text { flex: 1; min-width: 0; }
.card-library-title { margin: 0 0 var(--space-1) 0; font-weight: var(--font-semibold); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-library-title-sm { font-size: var(--text-sm); }
.card-library-subtitle { margin: 0; color: var(--color-text-tertiary); }
.card-library-subtitle-xs { font-size: var(--text-xs); }
.card-library.card-hover:hover { border-color: var(--color-primary-500); transform: translateY(-2px); }

/* ---- Switch ---- */
.switch-base { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.switch-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
.switch-slider { position: relative; border-radius: 9999px; transition: all .2s; background-color: var(--color-border-default); width: 2.75rem; height: 1.5rem; }
.switch-slider::after { position: absolute; border-radius: 9999px; transition: all .2s; background-color: var(--color-bg-card); border: 1px solid var(--color-text-placeholder); content: ''; top: 1px; left: 2px; height: 1.25rem; width: 1.25rem; }
.switch-input:checked + .switch-slider { background-color: var(--color-primary-500); }
.switch-input:checked + .switch-slider::after { border-color: var(--color-primary-500); background-color: var(--color-text-primary); transform: translateX(1.25rem); }
.switch-input:focus + .switch-slider { box-shadow: 0 0 0 2px rgba(127,86,217,.3); }
.switch-label { margin-left: .75rem; font-size: .875rem; line-height: 1.25rem; font-weight: 500; color: var(--color-text-secondary); display: inline-flex; align-items: center; gap: 6px; }
.switch-icon svg { width: 16px; height: 16px; }
.switch-container { display: flex; align-items: flex-start; gap: .75rem; }
.switch-container.switch-position-right { flex-direction: row-reverse; }
.switch-container .switch-wrapper { flex-shrink: 0; padding-top: .125rem; }
.switch-container .switch-content { flex: 1; }
.switch-container[data-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* ---- Toggle ---- */
.toggle-container { display: inline-flex; border-radius: .5rem; padding: .25rem; background-color: var(--color-bg-surface); border: 1px solid var(--color-border-default); gap: .25rem; }
.toggle-option { flex: 1; border-radius: .375rem; transition: all .2s; background-color: transparent; border: none; color: var(--color-text-placeholder); cursor: pointer; }
.toggle-option:focus { outline: none; box-shadow: 0 0 0 2px rgba(127,86,217,.5); }
.toggle-option:hover { background-color: rgba(127,86,217,.1); }
.toggle-option.active { background-color: var(--color-primary-500); color: var(--color-text-primary); }
.toggle-sm .toggle-option { padding: .375rem .75rem; font-size: .875rem; line-height: 1.25rem; min-width: 3rem; }
.toggle-md .toggle-option { padding: .5rem 1rem; font-size: 1rem; line-height: 1.5rem; min-width: 4rem; }
.toggle-lg .toggle-option { padding: .75rem 1.25rem; font-size: 1.125rem; line-height: 1.75rem; min-width: 5rem; }
.toggle-with-icon { display: inline-flex; align-items: center; gap: .5rem; }
.toggle-with-icon .toggle-icon svg { width: 16px; height: 16px; }

/* ---- Inputs / textarea / select ---- */
.input-base { width: 100%; border-radius: .5rem; transition: all .2s; background-color: var(--color-bg-input); border: 1px solid var(--color-border-default); color: var(--color-text-primary); }
.input-base:focus { outline: none; box-shadow: 0 0 0 2px rgba(127,86,217,.2); border-color: var(--color-primary-500); }
.input-base::placeholder { color: var(--color-text-placeholder); }
.input-sm { padding: .375rem .75rem; font-size: .875rem; line-height: 1.25rem; }
.input-md { padding: .5rem 1rem; font-size: 1rem; line-height: 1.5rem; }
.input-lg { padding: .75rem 1.25rem; font-size: 1.125rem; line-height: 1.75rem; }
.input-icon-wrapper { position: relative; display: flex; align-items: center; width: 100%; }
.input-icon { position: absolute; pointer-events: none; color: var(--color-text-placeholder); display: inline-flex; }
.input-icon svg { width: 18px; height: 18px; }
.input-icon-wrapper.input-icon-left .input-icon { left: 1rem; }
.input-icon-wrapper.input-icon-left .input-with-icon { padding-left: 2.75rem; }
.input-icon-wrapper.input-icon-right .input-icon { right: 1rem; }
.input-icon-wrapper.input-icon-right .input-with-icon { padding-right: 2.75rem; }
.input-icon-wrapper:focus-within .input-icon { color: var(--color-primary-500); }
.textarea-base { width: 100%; padding: .75rem 1rem; border-radius: .5rem; background-color: var(--color-bg-input); border: 1px solid var(--color-border-default); color: var(--color-text-primary); transition: all .2s; font-family: inherit; font-size: .875rem; line-height: 1.5; min-height: 4rem; resize: vertical; }
.textarea-base:focus { outline: none; box-shadow: 0 0 0 2px rgba(127,86,217,.2); border-color: var(--color-primary-500); }
.textarea-base::placeholder { color: var(--color-text-placeholder); }
.textarea-wrapper { position: relative; width: 100%; display: flex; flex-direction: column; background-color: var(--color-bg-card); border: 1px solid var(--color-border-default); border-radius: .75rem; padding: 1rem; }
.textarea-wrapper .textarea-base { border: none; padding: 0; margin-bottom: 1rem; background-color: transparent; min-height: 6rem; resize: none; }
.textarea-wrapper .textarea-base:focus { box-shadow: none; }
.textarea-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2rem; width: 100%; }
.textarea-actions-left, .textarea-actions-right { display: flex; align-items: center; gap: .5rem; }
.textarea-actions .btn-ghost { color: #fff; }
.select-wrapper { position: relative; width: 100%; display: inline-block; }
.select-trigger { position: relative; display: flex; align-items: center; width: 100%; cursor: pointer; }
.select-input { flex: 1; cursor: pointer; caret-color: transparent; user-select: none; }
.select-input:focus { outline: none; }
.select-icon-button { position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding: .5rem; display: flex; align-items: center; justify-content: center; background: transparent; border: none; pointer-events: none; color: var(--color-text-secondary); }
.select-icon-button svg { width: 18px; height: 18px; transition: transform .2s ease; }
.select-wrapper.open .select-icon-button svg { transform: rotate(180deg); }
.select-list { position: absolute; top: calc(100% + .25rem); left: 0; right: 0; max-height: 300px; overflow-y: auto; background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); box-shadow: 0 4px 6px -1px rgba(0,0,0,.3); z-index: 1000; display: none; padding: .25rem 0; }
.select-wrapper.open .select-list { display: block; }
.select-item { padding: .5rem .75rem; cursor: pointer; color: var(--color-text-primary); font-size: .875rem; transition: background-color .15s ease, color .15s ease; }
.select-item:hover { background-color: var(--color-bg-hover); color: var(--color-primary-400); }
.select-item.selected { background-color: var(--color-primary-500); color: #fff; }
.select-wrapper.select-sm .select-input { padding-right: 2rem; }
.select-wrapper.select-md .select-input { padding-right: 2.5rem; }
.select-wrapper.select-lg .select-input { padding-right: 3rem; }

/* ---- Dropdown ---- */
.dropdown-wrapper { position: relative; display: inline-block; }
.dropdown-menu-container { position: absolute; z-index: 1000; margin-top: .5rem; border-radius: .5rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,.3); padding: .25rem 0; min-width: 12rem; display: none; background-color: var(--color-bg-card); border: 1px solid var(--color-border-default); }
.dropdown-menu-container.active { display: block; }
.dropdown-menu-container.dropdown-menu-gradient { border: 1px solid transparent; border-radius: 10px; padding: 4px 6px; background-image: linear-gradient(#0C111D,#0C111D), linear-gradient(90deg,#7F56D9 0%,#7F56D9 45%,#ABEC46 85%,#D5FE48 100%); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: 0 12px 24px -8px rgba(0,0,0,.5); }
.dropdown-menu-container.dropdown-menu-gradient .dropdown-item { gap: 8px; padding: 8px 10px; border-radius: 6px; font-size: .875rem; font-weight: 600; color: #fff; white-space: nowrap; }
.dropdown-menu-container.dropdown-menu-gradient .dropdown-item:hover { background-color: rgba(255,255,255,.08); }
.dropdown-divider { border-top: 1px solid var(--color-border-default); margin: .25rem 0; }
.dropdown-menu-container.menu-position-left { left: 0; right: auto; }
.dropdown-menu-container.menu-position-right { right: 0; left: auto; }
.dropdown-item { display: flex; align-items: center; gap: .75rem; padding: .5rem 1rem; font-size: .875rem; line-height: 1.25rem; transition: color .15s; cursor: pointer; color: var(--color-text-secondary); text-decoration: none; }
.dropdown-item:hover { background-color: var(--color-bg-hover); color: var(--color-text-primary); }
.dropdown-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.dropdown-item-text { flex: 1; }

/* ---- Social icon ---- */
.social-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-primary); transition: color .15s ease, transform .15s ease; }
.social-icon:hover { color: var(--color-primary-400); transform: translateY(-1px); }
.social-icon svg { display: block; width: 22px; height: 22px; }

/* ---- Loader ---- */
.loader-bar-container { width: 100%; }
.loader-bar-track { width: 100%; height: 8px; background-color: #252D3F; border-radius: 9999px; overflow: hidden; position: relative; }
.loader-bar-fill { height: 100%; background-color: #7F56D9; border-radius: 9999px; transition: width .3s ease-in-out; }
.loader-bar-container.loader-perpetual .loader-bar-fill { width: 30%; animation: bar-perpetual 2s ease-in-out infinite; }
@keyframes bar-perpetual { 0% { transform: translateX(-100%); } 50% { transform: translateX(350%); } 100% { transform: translateX(-100%); } }
.loader-circular-container { display: inline-flex; align-items: center; justify-content: center; }
.loader-circular-sm { width: 32px; height: 32px; }
.loader-circular-md { width: 48px; height: 48px; }
.loader-circular-lg { width: 64px; height: 64px; }
.loader-circular-svg { transform: rotate(-90deg); }
.loader-circular-track { stroke: #252D3F; }
.loader-circular-progress { stroke: #7F56D9; stroke-linecap: round; transition: stroke-dashoffset .3s ease-in-out; }
.loader-circular-container.loader-perpetual .loader-circular-svg { animation: circular-perpetual 1.5s linear infinite; }
@keyframes circular-perpetual { 0% { transform: rotate(-90deg); } 100% { transform: rotate(270deg); } }

/* ---- Typography / icon / chip ---- */
.text-heading-1 { font-size: 2.25rem; line-height: 2.5rem; font-weight: 700; color: var(--color-text-primary); margin: 0; }
.text-heading-2 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; color: var(--color-text-primary); margin: 0; }
.text-heading-3 { font-size: 1.5rem; line-height: 2rem; font-weight: 600; color: var(--color-text-primary); margin: 0; }
.text-heading-4 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; color: var(--color-text-primary); margin: 0; }
.text-label { font-size: .875rem; line-height: 1.25rem; font-weight: 500; color: var(--color-text-secondary); }
.text-body { font-size: 1rem; line-height: 1.5rem; color: var(--color-text-secondary); }
.icon { flex-shrink: 0; display: inline-flex; line-height: 0; }
.icon svg { display: block; }
.icon-sm svg { width: 1rem; height: 1rem; }
.icon-md svg { width: 1.25rem; height: 1.25rem; }
.icon-lg svg { width: 1.375rem; height: 1.375rem; }
.icon-xl svg { width: 1.5rem; height: 1.5rem; }
.icon-xxl svg { width: 1.625rem; height: 1.625rem; }
.chip { border: 1px solid; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.chip-sm { padding: 4px 8px; font-size: 12px; line-height: 16px; }
.chip-md { padding: 6px 12px; font-size: 13px; line-height: 18px; }
.chip-crop-text { max-width: 150px; }
.chip-crop-text .chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-icon { flex-shrink: 0; width: 16px; height: 16px; display: inline-flex; }
.chip-icon svg { width: 100%; height: 100%; }
.chip-text { flex: 1 1 auto; min-width: 0; }
.chip-close-icon { flex-shrink: 0; width: 16px; height: 16px; cursor: pointer; background: none; border: none; color: inherit; padding: 0; display: inline-flex; }
.chip-close-icon:hover { opacity: .7; }
.chip-close-icon svg { width: 12px; height: 12px; }

/* ---- Image / avatar / chat message ---- */
.image-base { display: block; max-width: 100%; height: auto; border-radius: .5rem; }
.image-md { width: 1.25rem; height: 1.25rem; }
.image-lg { width: 1.375rem; height: 1.375rem; }
.image-xl { width: 1.5rem; height: 1.5rem; }
.image-xxxl { width: 2rem; height: 2rem; }
.image-xxxxl { width: 4rem; height: 4rem; }
.ds-avatar { position: relative; display: inline-block; }
.ds-avatar-inner { border-radius: 9999px; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; }
.ds-avatar-status { position: absolute; right: 0; bottom: 0; border-radius: 9999px; border: 2px solid var(--color-bg-base); }
.chat-message-base { display: flex; gap: .75rem; align-items: flex-start; }
.chat-message-image-right { flex-direction: row-reverse; }
.chat-message-content { flex: 1; color: var(--color-text-primary); font-size: .875rem; line-height: 1.5; padding-top: .25rem; }
.chat-message-with-loader .chat-message-content { display: flex; align-items: center; padding-top: 0; }


/* ==== App shell (new — not part of the source design system) ==== */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--color-bg-base);
  color: var(--color-text-secondary);
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-primary-400); }

.app-shell { display: flex; min-height: 100vh; }
.app-sidebar { width: 240px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--color-bg-elevated); border-right: 1px solid var(--color-border-subtle); position: sticky; top: 0; height: 100vh; }
.app-sidebar-brand { display: block; padding: 1.25rem 1.25rem .75rem; color: var(--color-text-primary); font-weight: 700; font-size: 1.0625rem; text-decoration: none; }
.app-sidebar .js-dropdown { position: relative; display: block; }
.app-sidebar-user { display: flex; align-items: center; gap: 10px; padding: .75rem 1rem; margin: 0 .75rem .5rem; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
.app-sidebar-user:hover { background: var(--color-bg-hover); }
.app-sidebar-user .dropdown-menu-container { min-width: 10rem; }
.app-sidebar-avatar { width: 32px; height: 32px; border-radius: 9999px; background: var(--color-primary-500); color: #fff; font-weight: 600; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.app-sidebar-email { color: var(--color-text-secondary); font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.app-sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: .5rem .75rem; }
.app-sidebar-link { display: flex; align-items: center; gap: 10px; padding: .625rem .75rem; border-radius: 8px; color: var(--color-text-secondary); text-decoration: none; font-size: .875rem; }
.app-sidebar-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.app-sidebar-link:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.app-sidebar-link.active { background: rgba(127,86,217,.15); color: var(--color-primary-400); font-weight: 500; }
.app-sidebar-secondary { margin-top: auto; padding: .75rem 1.25rem; border-top: 1px solid var(--color-border-subtle); }
.app-sidebar-secondary a { color: var(--color-text-tertiary); font-size: .8125rem; text-decoration: none; }
.app-sidebar-secondary a:hover { color: var(--color-text-secondary); }
.app-shell-main { flex: 1; min-width: 0; }
.app-main { max-width: 1100px; margin: 0 auto; padding: 2rem; }
.app-main.narrow { max-width: 480px; }
.app-title-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.app-title-row h1 { color: var(--color-text-primary); font-size: 1.5rem; margin: 0; }
.app-table { width: 100%; border-collapse: collapse; }
.app-table th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-tertiary); padding: .5rem .75rem; border-bottom: 1px solid var(--color-border-default); }
.app-table th.sortable-th { cursor: pointer; user-select: none; }
.app-table th.sortable-th:hover { color: var(--color-text-secondary); }
.app-table th .sort-indicator { display: inline-block; margin-left: 4px; font-size: .625rem; color: var(--color-primary-400); }
.app-table td { padding: .75rem; border-bottom: 1px solid var(--color-border-subtle); color: var(--color-text-secondary); font-size: .875rem; vertical-align: middle; }
.app-table tr:hover td { background: var(--color-bg-hover); }
.field { display: flex; flex-direction: column; gap: .375rem; margin-bottom: 1rem; }
.field-row { display: flex; gap: 1rem; }
.field-row .field { flex: 1; }
.form-actions { display: flex; gap: .75rem; margin-top: 1.5rem; }
.badge { display: inline-flex; align-items: center; gap: 4px; }
.error-text { color: #f87171; font-size: .875rem; }
.hint-text { color: var(--color-text-tertiary); font-size: .8125rem; }
.card-plain-block { background: var(--color-bg-card); border: 1px solid var(--color-border-default); border-radius: 8px; padding: 1.5rem; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.option-row { display: flex; align-items: center; gap: 10px; padding: .625rem .875rem; border: 1px solid var(--color-border-default); border-radius: 8px; cursor: pointer; background: var(--color-bg-input); }
.option-row:hover { border-color: var(--color-border-hover); }
.option-row:has(input:checked) { border-color: var(--color-primary-500); background: rgba(127,86,217,.12); }
.option-row input { accent-color: var(--color-primary-500); width: 16px; height: 16px; flex-shrink: 0; }
.question-card { background: var(--color-bg-card); border: 1px solid var(--color-border-default); border-radius: 8px; padding: 1.5rem; margin-bottom: 1.25rem; }
.timer-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 1rem 2rem; background: var(--color-bg-elevated); border-bottom: 1px solid var(--color-border-subtle); }

/* Minimal modal — not the source design system's Modal (that belongs to
   the excluded ds-complex group), just a small purpose-built overlay. */
.modal-overlay-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 1rem; }
.modal-dialog-box { background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: 12px; width: 100%; max-width: 440px; padding: 1.5rem; box-shadow: 0 20px 25px -5px rgba(0,0,0,.4); }
.modal-dialog-box h2 { margin: 0 0 1rem; }
select.input-base { appearance: none; -webkit-appearance: none; background-image: none; }

/* Candidate-picker combobox (WAI-ARIA combobox pattern: text input +
   filtered listbox, supports picking an existing candidate or typing a
   new one). */
.combobox-listbox { position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 260px; overflow-y: auto; background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: 8px; z-index: 50; box-shadow: 0 10px 15px -3px rgba(0,0,0,.3); padding: .25rem 0; }
.combobox-option { padding: .5rem .75rem; cursor: pointer; font-size: .875rem; color: var(--color-text-primary); }
.combobox-option .hint-text { font-size: .75rem; margin-top: 1px; }
.combobox-option:hover, .combobox-option.active { background: var(--color-bg-hover); }
.combobox-option mark { background: rgba(127,86,217,.35); color: inherit; border-radius: 2px; }