@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Inter:wght@300;400;500;600&display=swap');

:root {
    --myth-background: #12121e;
    --myth-surface: #1c1c2e;
    --myth-sidebar: #16162a;
    --myth-primary: #7c6af5;
    --myth-input-background: #252538;
    --myth-border: rgba(255,255,255,0.08);
    --myth-border-subtle: rgba(255,255,255,0.06);
    --myth-foreground: #e8e8f0;
    --myth-muted: #8888a8;
    --myth-muted-strong: #a8a8d8;
    --myth-success: #10b981;
    --myth-cyan: #06b6d4;
    --myth-amber: #f59e0b;
    --myth-danger: #e05472;
    --myth-violet: #8b5cf6;

    --background: var(--myth-background);
    --surface: var(--myth-surface);
    --sidebar: var(--myth-sidebar);
    --primary: var(--myth-primary);
    --secondary: var(--myth-input-background);
    --border: var(--myth-border);
    --foreground: var(--myth-foreground);
    --muted-foreground: var(--myth-muted);
}

html,
body {
    overflow-x: clip;
}

body {
    background: var(--background);
    font-family: Inter, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

.mud-layout,
.mud-main-content {
    max-width: 100vw;
    overflow-x: clip;
}

.myth-main-content {
    min-height: 100vh;
    padding: 0 32px 24px !important;
    box-sizing: border-box;
    background: var(--background);
}

.mud-drawer-pos-right.mud-drawer--closed {
    display: none;
}

.mud-popover-provider {
    max-width: 100vw;
}

.myth-nav-link {
    align-items: center;
}

.myth-nav-link__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.myth-nav-link__icon svg {
    display: block;
}

.myth-section-card {
    background: var(--surface) !important;
    border: 1px solid var(--border);
    border-radius: 14px !important;
    overflow: hidden;
}

.myth-section-card__header {
    border-bottom: 1px solid var(--border);
    padding: 16px 20px;
}

.myth-section-card--plain-header .myth-section-card__header {
    border-bottom: 0;
    padding-bottom: 8px;
}

.myth-section-card__content {
    padding: 16px 20px 18px;
}

.myth-section-card--plain-header .myth-section-card__content {
    padding-top: 10px;
}

.myth-section-card__action {
    align-self: center;
}

.myth-field {
    width: 100%;
}

.myth-form-label {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    text-transform: uppercase;
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
}


.myth-field .mud-input {
    background: var(--secondary);
    border-radius: 12px;
    color: var(--foreground);
    font-size: 14px;
    min-height: 38px;
    overflow: hidden;
}

.myth-field .mud-input-control > .mud-input-control-input-container > div.mud-input {
    margin-top: 0;
}

.myth-field .mud-input-control-input-container {
    min-height: 38px;
}

.myth-field .mud-input-control-input-container,
.myth-field .mud-input-outlined,
.myth-field .mud-input-root {
    border-radius: 12px;
}

.myth-field .mud-input-outlined {
    height: 38px;
}

.myth-field .mud-input:has(textarea),
.myth-field .mud-input-outlined:has(textarea) {
    height: auto;
    min-height: 0;
}

.myth-field input.mud-input-root {
    box-sizing: border-box;
    height: 38px;
    min-height: 0;
    padding: 0 12px;
}

.myth-field .mud-input-slot {
    padding: 0 12px;
    display: flex;
    align-items: center;
}

.myth-field .mud-input-adornment {
    height: 38px;
    margin-top: 0;
}

.myth-field textarea.mud-input-root {
    box-sizing: border-box;
}

.myth-field .mud-input > input,
.myth-field .mud-input > textarea,
.myth-field .mud-input-slot,
.myth-field .mud-picker-input-button,
.myth-field .mud-input-adornment {
    color: var(--foreground);
}

.myth-field .mud-input > input::placeholder,
.myth-field .mud-input > textarea::placeholder,
.myth-field .mud-input-slot::placeholder {
    color: var(--muted-foreground);
    opacity: 1;
}

.myth-field .mud-input-label,
.myth-field .mud-input-helper-text {
    color: var(--muted-foreground) !important;
}

.myth-field .mud-input-label:not(.mud-input-label-shrink) {
    transform: translate(14px, 9px) scale(1);
}

.myth-field .mud-input-outlined-border {
    border-color: var(--border) !important;
    border-radius: 12px !important;
}

.myth-field .mud-input:hover .mud-input-outlined-border,
.myth-field .mud-input:focus-within .mud-input-outlined-border {
    border-color: rgba(124,106,245,0.72) !important;
}

.myth-field .mud-input.mud-input-error .mud-input-outlined-border {
    border-color: var(--myth-danger) !important;
}

.myth-add-custom-button {
    height: 38px;
    border: 1px dashed var(--border) !important;
    border-radius: 12px !important;
    color: #a8a8d8 !important;
    text-transform: none !important;
}

.myth-add-custom-button:hover {
    border-color: rgba(124,106,245,0.56) !important;
    background: rgba(124,106,245,0.08) !important;
    color: var(--foreground) !important;
}

.myth-table,
.myth-table .mud-table-container,
.myth-table table,
.myth-table .mud-table-root {
    background: transparent !important;
}

.myth-table .mud-table-container {
    overflow: hidden;
}

.myth-table .mud-table-root {
    border-collapse: separate;
    border-spacing: 0 8px;
}

.myth-table .mud-table-head {
    background: transparent;
}

.myth-table .mud-table-body {
    background: transparent;
}

.myth-table .mud-table-head .mud-table-cell {
    background: var(--secondary);
    border-bottom: 0;
    color: #a8a8d8;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 10px 12px;
    text-transform: uppercase;
}

.myth-table .mud-table-head .mud-table-cell:first-child {
    border-radius: 10px 0 0 10px;
}

.myth-table .mud-table-head .mud-table-cell:last-child {
    border-radius: 0 10px 10px 0;
}

.myth-table .mud-table-row .mud-table-cell {
    border-bottom: 1px solid var(--myth-border-subtle);
    color: var(--foreground);
    padding: 12px;
}

.myth-table .mud-table-row:hover {
    background: rgba(255,255,255,0.03) !important;
}

.myth-table .mud-table-cell .mud-link {
    color: var(--foreground);
    font-weight: 500;
}

.myth-table .mud-table-cell .mud-link:hover {
    color: var(--primary);
}

.myth-table .mud-alert {
    background: var(--secondary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px;
}

.myth-list-grid__search {
    width: min(100%, 320px);
}

.myth-list-grid__filter {
    width: min(100%, 180px);
}

.game-system-select {
    width: 100%;
}

.game-system-select__popover {
    border-radius: 12px;
}

.game-system-select__panel {
    background: var(--surface) !important;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
}

.game-system-select__list {
    margin-top: 8px;
    max-height: 280px;
    overflow-y: auto;
    background: transparent;
}

.game-system-select__list .mud-list-item {
    border-radius: 10px;
    color: var(--foreground);
}

.game-system-select__list .mud-list-item:hover {
    background: rgba(124,106,245,0.14);
}

.myth-field .mud-input > textarea.mud-input-root-outlined {
    box-sizing: border-box;
    margin-top: 0;
    margin-bottom: 0;
    padding: 12px 14px 18.5px;
}


.mud-input > input.mud-input-root-outlined, div.mud-input-slot.mud-input-root-outlined {
    padding: 0px 12px 0px 12px;
}

.nav-item-active {
    background: rgba(124, 106, 245, 0.12) !important;
    color: var(--primary) !important;
}

.mud-nav-link {
    color: var(--muted-foreground) !important;
    font-size: 14px !important;
}

    .mud-nav-link:hover {
        background: rgba(255, 255, 255, 0.04) !important;
        color: var(--foreground) !important;
    }

.cinzel {
    font-family: 'Cinzel', serif !important;
}

@media (max-width: 768px) {
    .myth-main-content {
        padding: 0 16px 16px !important;
    }
}

.myth-button,
.myth-button-muted,
.myth-button-primary,
.myth-button-danger,
.myth-section-card-action-button {
    min-height: 38px;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.myth-button:hover,
.myth-button-muted:hover,
.myth-button-primary:hover,
.myth-button-danger:hover,
.myth-section-card-action-button:hover {
    transform: translateY(-1px);
}

.myth-button-muted {
    background: var(--secondary) !important;
    border: 1px solid var(--border) !important;
    color: var(--muted-foreground) !important;
}

.myth-button-muted:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    color: var(--foreground) !important;
}

.myth-button-primary {
    background: var(--primary) !important;
    color: white !important;
    box-shadow: 0 0 16px rgba(124,106,245,0.3);
}

.myth-button-primary:hover {
    background: #8b7afa !important;
    box-shadow: 0 0 22px rgba(124,106,245,0.42);
}

.myth-button-danger {
    background: rgba(224, 84, 114, 0.12) !important;
    border: 1px solid rgba(224, 84, 114, 0.3) !important;
    color: var(--myth-danger) !important;
}

.myth-button-danger:hover {
    background: rgba(224, 84, 114, 0.18) !important;
    border-color: rgba(224, 84, 114, 0.42) !important;
}

.myth-section-card-action-button:hover {
    background: var(--myth-action-accent-bg-hover) !important;
    border-color: var(--myth-action-accent-border-hover) !important;
    color: var(--myth-action-accent) !important;
    box-shadow: 0 0 16px var(--myth-action-accent-shadow) !important;
}