/* Docka neo-brutalist minimal theme */
:root {
    color-scheme: light;
    --background: #f2f1ec;
    --background-alt: #f2f1ec;
    --foreground: #121212;
    --card: #fcfbf7;
    --card-hover: #f3f1eb;
    --secondary: #e7e4dc;
    --muted: #d6d2c8;
    --muted-foreground: #44413b;
    --accent: #d2d0c7;
    --accent-2: #c2c0b8;
    --border: #171717;
    --border-soft: rgba(23, 23, 23, 0.2);
    --primary: #171717;
    --primary-foreground: #faf9f4;
    --interactive: #171717;
    --interactive-hover: #000000;
    --success: #171717;
    --warning: #171717;
    --danger: #171717;
    --shadow-sm: 3px 3px 0 0 rgba(23, 23, 23, 0.9);
    --shadow-md: 6px 6px 0 0 rgba(23, 23, 23, 0.92);
    --shadow-lg: 10px 10px 0 0 rgba(23, 23, 23, 0.95);
    --shadow-xl: 14px 14px 0 0 rgba(23, 23, 23, 0.98);
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --font-sans: "Trebuchet MS", "Avenir Next", "Segoe UI", sans-serif;
    --font-display: "Arial Black", "Trebuchet MS", sans-serif;
    --font-mono: "Courier New", "Andale Mono", monospace;
}

html.dark,
.dark {
    color-scheme: dark;
    --background: rgb(17, 19, 19);
    --background-alt: rgb(17, 19, 19);
    --foreground: #f3f2ec;
    --card: rgb(17, 19, 19);
    --card-hover: rgb(24, 26, 26);
    --secondary: rgb(22, 24, 24);
    --muted: rgb(28, 30, 30);
    --muted-foreground: #b9b7af;
    --accent: #c8c6bd;
    --accent-2: #b8b6ae;
    --border: #34393b;
    --border-soft: rgba(52, 57, 59, 0.42);
    --primary: #f3f2ec;
    --primary-foreground: rgb(17, 19, 19);
    --interactive: #f3f2ec;
    --interactive-hover: #ffffff;
    --success: #f3f2ec;
    --warning: #f3f2ec;
    --danger: #f3f2ec;
    --shadow-sm: 3px 3px 0 0 rgba(56, 57, 55, 0.42);
    --shadow-md: 6px 6px 0 0 rgba(56, 57, 55, 0.36);
    --shadow-lg: 10px 10px 0 0 rgba(56, 57, 55, 0.3);
    --shadow-xl: 14px 14px 0 0 rgba(56, 57, 55, 0.24);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background: var(--background) !important;
    color: var(--foreground) !important;
}

h1, h2, h3, h4, .font-bold, .font-semibold {
    font-family: var(--font-display);
    letter-spacing: -0.03em;
}

code, pre, kbd, .font-mono {
    font-family: var(--font-mono);
}

::selection {
    background: var(--foreground);
    color: var(--background);
}

a, button, input, select, textarea {
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

button:active:not(:disabled),
.btn:active:not(:disabled),
a[role="button"]:active:not(:disabled) {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 0 color-mix(in srgb, var(--border) 88%, transparent);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

nav,
header,
footer,
.sidebar,
aside,
.auth-card,
.glass-card,
.bg-card,
[class*="bg-card"],
[role="dialog"],
.modal,
.dropdown-base,
[role="menu"],
[role="listbox"],
table,
pre,
.oauth-btn,
.prose pre,
.prose table {
    background-color: var(--card) !important;
    color: var(--foreground);
    border: 1px solid color-mix(in srgb, var(--border) 62%, transparent) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-md) !important;
}

nav,
header {
    background-color: color-mix(in srgb, var(--card) 96%, transparent) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

footer {
    background-color: var(--secondary) !important;
}

.sidebar,
aside {
    background: var(--card) !important;
}

.bg-secondary,
.bg-muted,
.oauth-btn,
.prose code,
code:not(pre code),
kbd,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    background-color: var(--secondary) !important;
    color: var(--foreground) !important;
    border: 1px solid color-mix(in srgb, var(--border) 62%, transparent) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
    color: color-mix(in srgb, var(--muted-foreground) 86%, transparent) !important;
}

input[type="checkbox"]:not(.sr-only) {
    appearance: none;
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    background-color: var(--secondary) !important;
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: inline-grid;
    place-content: center;
    vertical-align: middle;
    cursor: pointer;
}

input[type="checkbox"]:not(.sr-only)::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    background-color: var(--foreground);
    transform: scale(0);
    transition: transform 120ms ease;
}

input[type="checkbox"]:not(.sr-only):checked {
    background-color: var(--card) !important;
}

input[type="checkbox"]:not(.sr-only):checked::after {
    transform: scale(1);
}

input[type="checkbox"]:not(.sr-only):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 70%, transparent);
    outline-offset: 2px;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
    background-color: var(--card) !important;
    border-color: var(--interactive) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 42%, transparent) !important;
}

.bg-foreground,
.btn-primary,
button.bg-neutral-900,
a.bg-neutral-900,
.bg-neutral-900 {
    background-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent) !important;
    box-shadow: var(--shadow-sm) !important;
}

.dark .dark\:bg-white {
    background-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
}

.text-background,
.dark .dark\:text-neutral-900,
.dark .dark\:text-neutral-950 {
    color: var(--primary-foreground) !important;
}

.btn-primary:hover,
.bg-foreground:hover,
button.bg-neutral-900:hover,
a.bg-neutral-900:hover,
.bg-neutral-900:hover {
    transform: translate(-1px, -1px);
    box-shadow: var(--shadow-sm) !important;
}

.btn-ghost:hover,
.nav-link:hover,
.dropdown-item:hover,
.oauth-btn:hover,
.hover\:bg-secondary:hover,
.hover\:bg-neutral-100:hover,
.dark .dark\:hover\:bg-neutral-800:hover,
.dark .dark\:hover\:bg-neutral-900:hover {
    background-color: var(--card-hover) !important;
}

.nav-link,
.dropdown-item {
    border-radius: var(--radius-sm) !important;
}

.nav-link.active,
.nav-link[aria-current="page"] {
    background-color: var(--accent) !important;
    color: #171717 !important;
    border: 1px solid color-mix(in srgb, var(--border) 38%, transparent);
    box-shadow: none;
}

.rounded-lg,
.rounded-xl,
.rounded-2xl {
    border-radius: var(--radius-md) !important;
}

.rounded-full {
    border-radius: 0 !important;
}

.glass,
.cmd-backdrop,
.modal-backdrop,
.driver-overlay,
[class*="backdrop-blur"],
[style*="backdrop-filter"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.border,
.border-t,
.border-b,
.border-l,
.border-r,
.border-neutral-100,
.border-neutral-200,
.border-neutral-300,
.dark .dark\:border-neutral-700,
.dark .dark\:border-neutral-800 {
    border-color: var(--border) !important;
}

.shadow-sm,
.shadow-md,
.shadow-lg,
.shadow-xl,
.shadow-2xl,
.glow {
    box-shadow: var(--shadow-md) !important;
}

.text-muted-foreground,
.text-neutral-400,
.text-neutral-500,
.text-neutral-600,
.dark .dark\:text-neutral-400,
.dark .dark\:text-neutral-500 {
    color: var(--muted-foreground) !important;
}

.dark [class*="dark:bg-neutral-950"],
.dark [class*="dark:bg-neutral-900"],
.dark [class*="dark:bg-neutral-800/"],
.dark [class*="dark:bg-neutral-900/"],
.dark [class*="dark:bg-neutral-950/"] {
    background-color: rgb(17, 19, 19) !important;
}

.dark [class*="dark:border-neutral-"],
.dark [class*="dark:border-zinc-"],
.dark [class*="dark:border-slate-"],
.dark [class*="dark:border-gray-"],
.dark [class*="dark:border-white"],
.dark .border-white,
.dark .border-white\/10,
.dark .border-white\/20,
.dark .border-white\/30 {
    border-color: #34393b !important;
}

.dark [class*="dark:divide-neutral-"],
.dark [class*="dark:divide-zinc-"],
.dark [class*="dark:divide-slate-"],
.dark [class*="dark:divide-gray-"],
.dark [class*="dark:divide-white"] {
    --tw-divide-opacity: 1 !important;
    border-color: #34393b !important;
}

.dark [class*="dark:hover:bg-neutral-800"]:hover,
.dark [class*="dark:hover:bg-neutral-900"]:hover,
.dark [class*="dark:hover:bg-neutral-950"]:hover {
    background-color: rgb(24, 26, 26) !important;
}

.gradient-text {
    color: currentColor !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

.text-emerald-500,
.text-emerald-400 {
    color: var(--success) !important;
}

.text-amber-500,
.text-amber-400,
.text-orange-400 {
    color: var(--warning) !important;
}

.text-red-500,
.text-red-400 {
    color: var(--danger) !important;
}

.bg-emerald-500\/10,
.dark .dark\:bg-emerald-900\/20,
.bg-amber-500\/10,
.dark .dark\:bg-amber-900\/20,
.bg-red-500\/10,
.dark .dark\:bg-red-900\/20 {
    border: 1px solid color-mix(in srgb, var(--border) 56%, transparent) !important;
    box-shadow: none !important;
}

[class*="bg-gradient-to"] {
    background-image: none !important;
}

[class*="bg-gradient-to"][class*="from-secondary"][class*="to-muted"] {
    background-color: var(--secondary) !important;
    color: var(--foreground) !important;
}

[class*="bg-gradient-to"][class*="text-white"] {
    background-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
}

[class*="bg-gradient-to"][class*="from-blue"],
[class*="bg-gradient-to"][class*="from-purple"],
[class*="bg-gradient-to"][class*="from-pink"],
[class*="bg-gradient-to"][class*="from-violet"],
[class*="bg-gradient-to"][class*="from-indigo"],
[class*="bg-gradient-to"][class*="from-amber"],
[class*="bg-gradient-to"][class*="from-orange"],
[class*="bg-gradient-to"][class*="from-emerald"],
[class*="bg-gradient-to"][class*="from-green"],
[class*="bg-gradient-to"][class*="from-gray"],
[class*="bg-gradient-to"][class*="from-slate"],
[class*="bg-gradient-to"][class*="from-neutral"] {
    background-color: var(--card) !important;
    border-color: color-mix(in srgb, var(--border) 54%, transparent) !important;
}

[class*="bg-gradient-to"][class*="text-white"] {
    background-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
}

.prose h1,
.prose h2,
.prose h3 {
    color: var(--foreground) !important;
}

.prose p,
.prose li,
.prose td,
.prose th {
    color: var(--foreground);
}

.prose p.lead {
    color: var(--muted-foreground) !important;
}

.prose a {
    color: inherit;
    text-decoration-thickness: 2px;
}

.prose pre,
pre {
    overflow-x: auto;
}

table th,
.prose th {
    background-color: var(--secondary) !important;
}

.grain::before,
.bg-grid-pattern,
.docka-bg,
.cmd-backdrop {
    opacity: 1;
}

.docka-bg {
    background: var(--background) !important;
}

.bg-grid-pattern {
    background-image: none !important;
}

.gradient-text {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--foreground) !important;
}

.dark .gradient-text {
    color: var(--foreground) !important;
}

.hero-badge,
.status-badge,
.badge,
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 2px solid var(--border) !important;
    background-color: var(--accent) !important;
    color: #171717 !important;
    box-shadow: var(--shadow-sm) !important;
}

.app-shell-main {
    position: relative;
    --cursor-x: 50%;
    --cursor-y: 30%;
}

.app-shell-main::before {
    content: "";
    position: absolute;
    inset: 1rem;
    border: 1px solid color-mix(in srgb, var(--border) 8%, transparent);
    border-radius: 0;
    pointer-events: none;
}

.app-shell-main::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: none;
    opacity: 0;
}

.app-surface {
    position: relative;
    z-index: 1;
    margin: 1rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--border) 16%, transparent);
    border-radius: 0;
    background: var(--card);
    box-shadow: none;
}

.public-shell {
    position: relative;
}

.public-nav {
    background-color: color-mix(in srgb, var(--card) 94%, transparent) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 52%, transparent) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

.public-sidebar {
    background: var(--card) !important;
    border-right: 1px solid color-mix(in srgb, var(--border) 20%, transparent) !important;
    box-shadow: none !important;
}

.public-panel,
.public-card {
    background-color: var(--card) !important;
    color: var(--foreground) !important;
    border: 1px solid color-mix(in srgb, var(--border) 54%, transparent) !important;
    box-shadow: var(--shadow-sm) !important;
}

.public-panel-muted {
    background-color: color-mix(in srgb, var(--secondary) 88%, transparent) !important;
    color: var(--foreground) !important;
    border: 1px solid color-mix(in srgb, var(--border) 16%, transparent) !important;
    box-shadow: none !important;
}

.public-outline {
    border-color: color-mix(in srgb, var(--border) 52%, transparent) !important;
}

.public-divider {
    border-color: color-mix(in srgb, var(--border) 18%, transparent) !important;
}

.public-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--secondary) !important;
    color: var(--foreground) !important;
    border: 1px solid color-mix(in srgb, var(--border) 42%, transparent) !important;
    box-shadow: none !important;
}

.public-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: none;
    opacity: 0;
}

.bg-primary {
    background-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
    border: 2px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
}

.driver-popover,
.driver-popover-footer,
.driver-popover-navigation-btns,
.driver-popover .driver-popover-btn,
.driver-popover .driver-popover-prev-btn,
.driver-popover .driver-popover-next-btn {
    border: none !important;
}

.driver-popover,
.driver-popover * {
    text-shadow: none !important;
}

.text-primary-foreground {
    color: var(--primary-foreground) !important;
}

.docka-collection-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1rem;
    background: color-mix(in srgb, var(--card) 96%, var(--background) 4%);
    border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
    box-shadow: var(--shadow-sm);
}

.docka-collection-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
}

.docka-collection-search {
    position: relative;
    flex: 1 1 20rem;
    min-width: 0;
}

.docka-collection-search svg {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    width: 1rem;
    height: 1rem;
    transform: translateY(-50%);
    color: var(--muted-foreground);
    pointer-events: none;
}

.docka-collection-search input {
    width: 100%;
    padding: 0.65rem 0.9rem 0.65rem 2.5rem;
    background: var(--background);
    border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
    color: var(--foreground);
    outline: none;
}

.docka-collection-search input:focus {
    border-color: var(--border);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--foreground) 10%, transparent);
}

.docka-collection-controls {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    min-width: 0;
}

.docka-icon-button,
.docka-segmented button,
.docka-collection-select {
    min-height: 2.5rem;
    border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
    background: var(--background);
    color: var(--foreground);
    box-shadow: none;
}

.docka-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    padding: 0;
}

.docka-segmented {
    display: inline-flex;
    border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
    background: var(--background);
}

.docka-segmented button {
    min-width: 2.5rem;
    padding: 0 0.8rem;
    border: 0;
    border-left: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
}

.docka-segmented button:first-child {
    border-left: 0;
}

.docka-segmented button.is-active,
.docka-icon-button.is-active {
    background: var(--secondary);
}

.docka-collection-select {
    padding: 0 0.75rem;
}

.docka-empty-state {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 3rem);
}

.docka-empty-state-copy {
    max-width: min(32rem, 100%);
    margin-inline: auto;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.docka-empty-state-actions {
    display: flex;
    width: 100%;
    max-width: 22rem;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0.75rem;
    margin-inline: auto;
}

.docka-empty-state-actions > * {
    width: 100%;
    min-width: 0;
    justify-content: center;
}

.docka-long-text,
.docka-mobile-wrap {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

[data-collection-container] .docka-collection-list-summary {
    display: none;
}

[data-collection-container] .docka-collection-list-shell,
[data-collection-container] .docka-collection-list-detail,
[data-collection-container] .docka-collection-list-meta,
[data-collection-container] .docka-collection-list-summary,
[data-collection-container] .docka-collection-list-title {
    min-width: 0;
}

[data-collection-container] .docka-collection-list-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

[data-collection-container] .docka-collection-list-title > * {
    min-width: 0;
}

[data-collection-container] .docka-collection-list-summary-note {
    min-width: 0;
    overflow-wrap: anywhere;
}

[data-collection-container] .docka-collection-list-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

[data-collection-container] .docka-collection-list-actions > * {
    min-width: 0;
}

[data-collection-container][data-view-mode="list"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
}

[data-collection-container][data-view-mode="list"] > [data-collection-item] {
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
}

[data-collection-container][data-view-mode="list"] .docka-collection-list-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(10rem, 1fr) auto;
    gap: 1rem;
    align-items: center;
}

[data-collection-container][data-view-mode="list"] .docka-collection-list-summary {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 0.9fr));
    gap: 0.75rem 1rem;
    align-items: center;
    min-width: 0;
}

[data-collection-container][data-view-mode="list"] .docka-collection-list-meta {
    min-width: 0;
}

[data-collection-container][data-view-mode="list"] .docka-collection-list-detail {
    display: none !important;
}

[data-collection-container][data-view-mode="list"] .docka-collection-list-actions {
    border-top: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    justify-content: flex-end;
}

[data-collection-container][data-view-mode="list"] .docka-collection-list-actions .flex-1 {
    flex: 0 0 auto !important;
}

[data-collection-container][data-view-mode="list"] .docka-collection-list-actions a,
[data-collection-container][data-view-mode="list"] .docka-collection-list-actions button {
    min-height: 2.25rem;
}

[data-collection-container][data-view-mode="list"] .docka-collection-list-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

[data-collection-container][data-view-mode="list"] .docka-collection-list-title > * {
    min-width: 0;
}

[data-collection-container][data-view-mode="list"] .docka-collection-list-title h3,
[data-collection-container][data-view-mode="list"] .docka-collection-list-title a,
[data-collection-container][data-view-mode="list"] .docka-collection-list-title p {
    margin: 0;
}

[data-collection-container][data-view-mode="list"] .docka-collection-list-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

[data-collection-container][data-view-mode="list"] .docka-collection-list-stat-label {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

[data-collection-container][data-view-mode="list"] .docka-collection-list-stat-value {
    font-size: 0.9rem;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-collection-container][data-view-mode="list"] .docka-collection-list-summary-note {
    font-size: 0.8rem;
    color: var(--muted-foreground);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.docka-terminal-panel {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    overflow-x: clip;
    contain: layout paint;
    isolation: isolate;
    background: color-mix(in srgb, var(--card) 92%, transparent);
}

.docka-terminal-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--muted) 60%, transparent);
    padding: 0.875rem 1rem;
}

.docka-terminal-toolbar-meta {
    min-width: 0;
    flex: 1 1 14rem;
}

.docka-terminal-toolbar-title {
    overflow-wrap: anywhere;
    font-family: "JetBrains Mono", Menlo, Monaco, monospace;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.docka-terminal-toolbar-status {
    margin-top: 0.125rem;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.docka-terminal-toolbar-status.is-connected {
    color: rgb(16 185 129);
}

.docka-terminal-toolbar-status.is-error {
    color: rgb(239 68 68);
}

.docka-terminal-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.docka-terminal-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border-radius: 0.625rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.docka-terminal-action.is-primary {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary);
}

.docka-terminal-action.is-secondary {
    background: var(--secondary);
    color: var(--foreground);
}

.docka-terminal-action.is-danger {
    background: color-mix(in srgb, rgb(239 68 68) 10%, transparent);
    color: rgb(239 68 68);
}

.docka-terminal-viewport {
    height: 16rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    overflow-x: clip;
    background: color-mix(in srgb, var(--background) 96%, #000);
}

.docka-terminal-panel .xterm,
.docka-terminal-panel .xterm-screen,
.docka-terminal-panel .xterm-viewport,
.docka-terminal-panel .xterm-helpers,
.docka-terminal-panel .xterm-rows {
    display: block;
    width: 100%;
    max-width: 100% !important;
    min-width: 0;
}

.docka-terminal-panel .xterm-viewport {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.docka-terminal-panel .xterm-screen,
.docka-terminal-panel .xterm-rows,
.docka-terminal-panel .xterm-helpers,
.docka-terminal-panel .xterm-helper-textarea {
    overflow: hidden;
}

.docka-terminal-panel .xterm-screen canvas {
    max-width: 100%;
}

.docka-terminal-panel .xterm-helpers,
.docka-terminal-panel .xterm-helper-textarea {
    left: 0 !important;
    top: 0 !important;
    width: 1px !important;
    max-width: 1px !important;
}

.docka-terminal-panel.is-fullscreen {
    position: fixed;
    inset: 0.75rem;
    z-index: 90;
    border: 1px solid var(--border);
    border-radius: 1rem;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.docka-terminal-panel.is-fullscreen .docka-terminal-viewport {
    height: calc(100dvh - 7.5rem);
}

@media (max-width: 1024px) {
    [data-collection-container][data-view-mode="list"] .docka-collection-list-shell {
        grid-template-columns: 1fr;
    }

    [data-collection-container][data-view-mode="list"] .docka-collection-list-summary {
        grid-template-columns: 1fr;
    }

    [data-collection-container][data-view-mode="list"] .docka-collection-list-actions {
        justify-content: stretch;
    }
}

@media (max-width: 640px) {
    .docka-collection-toolbar {
        padding: 0.875rem;
    }

    .docka-collection-toolbar-row {
        align-items: stretch;
    }

    .docka-collection-search {
        flex-basis: 100%;
    }

    .docka-collection-controls {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: stretch;
        width: 100%;
    }

    .docka-segmented {
        min-width: 0;
        width: 100%;
    }

    .docka-segmented button {
        flex: 1 1 0;
        min-width: 0;
    }

    .docka-collection-select {
        min-width: 0;
        width: 100%;
    }

    .docka-collection-controls .docka-icon-button {
        justify-self: stretch;
    }

    [data-collection-container] .docka-collection-list-actions > .flex-1,
    [data-collection-container] .docka-collection-list-actions > a.flex-1,
    [data-collection-container] .docka-collection-list-actions > button.flex-1 {
        flex: 1 1 calc(50% - 0.25rem);
    }

    [data-collection-container] .docka-collection-list-actions > a:not(.flex-1),
    [data-collection-container] .docka-collection-list-actions > button:not(.flex-1) {
        flex: 0 0 auto;
    }

    [data-collection-container][data-view-mode="list"] .docka-collection-list-actions > * {
        flex: 1 1 calc(50% - 0.25rem) !important;
    }

    [data-collection-container] .docka-collection-list-stat-value,
    [data-collection-container] .docka-collection-list-summary-note,
    [data-collection-container] .docka-mobile-wrap,
    [data-collection-container] .docka-mobile-wrap.truncate {
        overflow: visible;
        text-overflow: initial;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .docka-terminal-toolbar {
        align-items: stretch;
        padding: 0.75rem;
    }

    .docka-terminal-toolbar-actions {
        width: 100%;
        justify-content: stretch;
    }

    .docka-terminal-action {
        flex: 1 1 8rem;
    }

    .docka-terminal-viewport {
        height: 14rem;
    }

    .docka-terminal-panel.is-fullscreen {
        inset: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .docka-terminal-panel.is-fullscreen .docka-terminal-viewport {
        height: calc(100dvh - 8.5rem);
    }
}

@media (min-width: 640px) {
    .docka-empty-state-actions {
        width: auto;
        max-width: none;
        flex-direction: row;
        align-items: center;
    }

    .docka-empty-state-actions > * {
        width: auto;
    }
}

[data-collection-container][data-view-mode="compact"] {
    display: grid !important;
    gap: 0.75rem !important;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)) !important;
}

[data-collection-container][data-view-mode="compact"] > [data-collection-item] {
    box-shadow: var(--shadow-sm);
}

[data-collection-item].is-hidden-by-collection {
    display: none !important;
}

.docka-editor-shell {
    --editor-background: var(--card);
    --editor-toolbar-background: color-mix(in srgb, var(--card) 92%, var(--background) 8%);
    --editor-foreground: var(--foreground);
    --editor-gutter-foreground: color-mix(in srgb, var(--muted-foreground) 78%, transparent);
    --editor-border: color-mix(in srgb, var(--border) 82%, transparent);
    --editor-active-line: color-mix(in srgb, var(--muted) 58%, transparent);
    --editor-selection: color-mix(in srgb, var(--accent) 52%, transparent);
    --editor-shadow: var(--shadow-md);
    background: var(--editor-background);
    border: 1px solid var(--editor-border);
    box-shadow: var(--editor-shadow);
    color: var(--editor-foreground);
}

.docka-editor-toolbar {
    background: var(--editor-toolbar-background);
    border-bottom: 1px solid var(--editor-border);
    position: sticky;
    top: 0;
    z-index: 2;
}

.docka-editor-host {
    min-height: 24rem;
    width: 100%;
}

.docka-editor-shell.is-fullscreen {
    position: fixed;
    inset: 1rem;
    z-index: 120;
    display: flex;
    flex-direction: column;
}

.docka-editor-shell.is-fullscreen .docka-editor-host {
    min-height: calc(100vh - 8rem);
    flex: 1 1 auto;
}

.docka-editor-fallback {
    width: 100%;
    min-height: 24rem;
    padding: 1rem;
    border: none;
    background: var(--editor-background);
    color: var(--editor-foreground);
    font: 14px/1.6 "Courier New", monospace;
    resize: vertical;
    outline: none;
}

.ace_editor,
.ace_gutter {
    background: var(--editor-background) !important;
    color: var(--editor-foreground) !important;
}

.ace_scroller,
.ace_content,
.ace_text-layer {
    background: var(--editor-background) !important;
}

.ace_gutter {
    color: var(--editor-gutter-foreground) !important;
    border-right: 1px solid var(--editor-border) !important;
}

.ace_print-margin {
    display: none !important;
}

.ace_marker-layer .ace_active-line,
.ace_gutter-active-line {
    background: var(--editor-active-line) !important;
}

.ace_marker-layer .ace_selection {
    background: var(--editor-selection) !important;
}

.ace_cursor {
    color: var(--editor-foreground) !important;
}

.ace_keyword {
    color: color-mix(in srgb, var(--foreground) 88%, #335c8f 12%) !important;
}

.ace_storage,
.ace_support.ace_type {
    color: color-mix(in srgb, var(--foreground) 86%, #3a6ea5 14%) !important;
}

.ace_string {
    color: color-mix(in srgb, var(--foreground) 74%, #486b3c 26%) !important;
}

.ace_constant.ace_numeric,
.ace_constant.ace_language,
.ace_constant.ace_character {
    color: color-mix(in srgb, var(--foreground) 76%, #7a4b12 24%) !important;
}

.ace_comment {
    color: color-mix(in srgb, var(--muted-foreground) 82%, transparent) !important;
    font-style: normal !important;
}

.ace_function,
.ace_entity.ace_name.ace_function,
.ace_support.ace_function {
    color: color-mix(in srgb, var(--foreground) 84%, #7d2d5b 16%) !important;
}

.ace_variable,
.ace_identifier {
    color: var(--editor-foreground) !important;
}

.ace_paren {
    color: color-mix(in srgb, var(--foreground) 72%, transparent) !important;
}

.dark .docka-editor-shell {
    --editor-background: rgb(17, 19, 19);
    --editor-toolbar-background: color-mix(in srgb, rgb(17, 19, 19) 94%, white 6%);
    --editor-foreground: #f3f2ec;
    --editor-gutter-foreground: color-mix(in srgb, #f3f2ec 34%, transparent);
    --editor-border: #34393b;
    --editor-active-line: color-mix(in srgb, rgb(56, 57, 55) 42%, transparent);
    --editor-selection: color-mix(in srgb, rgb(56, 57, 55) 60%, transparent);
    --editor-shadow: 6px 6px 0 rgb(56, 57, 55);
}

@media (max-width: 768px) {
    .app-shell-main::before {
        inset: 0.5rem;
    }

    .app-surface {
        margin: 0.5rem;
        padding: 0.875rem;
    }

    .docka-editor-shell.is-fullscreen {
        inset: 0.5rem;
    }
}