:root {
    --kou-titlebar-bg: transparent;
    --kou-titlebar-text: var(--border);
}

.y2k-title-bar,
.title-bar {
    background: var(--kou-titlebar-bg);
}

[data-titlebar="custom"] .y2k-title-bar,
[data-titlebar="custom"] .y2k-title-bar .y2k-title-bar-left,
[data-titlebar="custom"] .y2k-title-bar .y2k-title-bar-right,
[data-titlebar="custom"] .y2k-title-bar .y2k-title-text,
[data-titlebar="custom"] .y2k-title-bar .y2k-settings-btn,
[data-titlebar="custom"] .y2k-title-bar .y2k-date,
[data-titlebar="custom"] .y2k-title-bar .y2k-date-btn,
[data-titlebar="custom"] .y2k-title-bar-left,
[data-titlebar="custom"] .y2k-title-bar svg,
[data-titlebar="custom"] .title-bar,
[data-titlebar="custom"] .title-bar * {
    color: var(--kou-titlebar-text);
}

[data-titlebar="custom"] .y2k-title-bar .y2k-settings-btn,
[data-titlebar="custom"] .y2k-title-bar .y2k-date-btn,
[data-titlebar="custom"] .y2k-title-bar svg,
[data-titlebar="custom"] .title-bar .nav-btn,
[data-titlebar="custom"] .title-bar svg {
    opacity: 1;
}

.y2k-title-bar #settings-btn,
.title-bar #settings-btn {
    width: 18px;
    height: 18px;
    padding: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 50%;
    opacity: 1;
    color: var(--text);
}

.y2k-title-bar #settings-btn svg,
.title-bar #settings-btn svg {
    width: 12px;
    height: 12px;
}

.y2k-title-bar #settings-btn svg,
.y2k-title-bar #settings-btn svg *,
.title-bar #settings-btn svg,
.title-bar #settings-btn svg * {
    color: var(--primary, var(--border-color, #b8878c));
    opacity: 1;
}

.hide-border .y2k-title-bar #settings-btn,
.hide-border .title-bar #settings-btn,
[data-settings-border="off"] .y2k-title-bar #settings-btn,
[data-settings-border="off"] .title-bar #settings-btn {
    border-color: transparent;
    background: transparent;
}

[data-titlebar="custom"].hide-border .y2k-title-bar #settings-btn svg,
[data-titlebar="custom"].hide-border .y2k-title-bar #settings-btn svg *,
[data-titlebar="custom"].hide-border .title-bar #settings-btn svg,
[data-titlebar="custom"].hide-border .title-bar #settings-btn svg *,
[data-titlebar="custom"] .hide-border .y2k-title-bar #settings-btn svg,
[data-titlebar="custom"] .hide-border .y2k-title-bar #settings-btn svg *,
[data-titlebar="custom"] .hide-border .title-bar #settings-btn svg,
[data-titlebar="custom"] .hide-border .title-bar #settings-btn svg *,
[data-titlebar="custom"][data-settings-border="off"] .y2k-title-bar #settings-btn svg,
[data-titlebar="custom"][data-settings-border="off"] .y2k-title-bar #settings-btn svg *,
[data-titlebar="custom"][data-settings-border="off"] .title-bar #settings-btn svg,
[data-titlebar="custom"][data-settings-border="off"] .title-bar #settings-btn svg * {
    color: var(--kou-titlebar-text);
}

[data-settings-hover="on"] .y2k-title-bar #settings-btn,
[data-settings-hover="on"] .title-bar #settings-btn {
    opacity: 0;
    transition: opacity 0.15s, background-color 0.15s, color 0.15s;
}

[data-settings-hover="on"] .y2k-window:hover .y2k-title-bar #settings-btn,
[data-settings-hover="on"] .y2k-window:hover .title-bar #settings-btn,
[data-settings-hover="on"] .y2k-title-bar #settings-btn:focus-visible,
[data-settings-hover="on"] .title-bar #settings-btn:focus-visible {
    opacity: 1;
}

@media (hover: none) {
    [data-settings-hover="on"] .y2k-title-bar #settings-btn,
    [data-settings-hover="on"] .title-bar #settings-btn {
        opacity: 1;
    }
}

.y2k-title-bar #settings-btn:hover,
.title-bar #settings-btn:hover {
    background: var(--primary-hover);
}

.y2k-title-bar #settings-btn:hover,
.title-bar #settings-btn:hover,
.y2k-title-bar #settings-btn:hover svg,
.title-bar #settings-btn:hover svg {
    transform: none;
}

[data-shape="square"] .y2k-title-bar #settings-btn,
[data-shape="square"] .title-bar #settings-btn {
    border-radius: 0;
}

[data-shape="square"] .y2k-window {
    border-radius: 0;
    border-width: 1px;
    box-shadow: none;
}

[data-shape="square"] .settings-panel {
    border-width: 1px;
}

[data-shape="square"] .y2k-title-bar,
[data-shape="square"] .y2k-input-area,
[data-shape="square"] .input-area,
[data-shape="square"] .input-container,
[data-shape="square"] .y2k-footer,
[data-shape="square"] .y2k-select,
[data-shape="square"] .y2k-content,
[data-shape="square"] input,
[data-shape="square"] textarea,
[data-shape="square"] select,
[data-shape="square"] .settings-panel,
[data-shape="square"] .settings-content,
[data-shape="square"] [class*="-btn"],
[data-shape="square"] [class*="-pill"],
[data-shape="square"] [class*="popup"],
[data-shape="square"] [class*="-card"],
[data-shape="square"] [class*="-tag"],
[data-shape="square"] [class*="chip"],
[data-shape="square"] [class*="-options"],
[data-shape="square"] .sync-status-panel,
[data-shape="square"] .sync-error-panel,
[data-shape="square"] .share-link-container,
[data-shape="square"] .share-link-input {
    border-radius: 0;
}

[data-shape="square"] input[type="color"],
[data-shape="square"] input[type="color"]::-webkit-color-swatch,
[data-shape="square"] input[type="color"]::-webkit-color-swatch-wrapper {
    border-radius: 0 !important;
}

[data-shape="square"] input[type="color"]::-moz-color-swatch {
    border-radius: 0 !important;
}

[data-shape="square"] .color-hex,
[data-shape="square"] .size-slider {
    border-radius: 0;
}

[data-shape="square"] .toggle-slider,
[data-shape="square"] .toggle-slider:before {
    border-radius: 0;
}

[data-shape="square"] input[type="range"]::-webkit-slider-thumb {
    border-radius: 0;
}

[data-shape="square"] input[type="range"]::-moz-range-thumb {
    border-radius: 0;
}

#titlebar-color {
    width: 28px;
    height: 28px;
    border: 1px solid var(--primary-lighter, var(--modal-border, #ddd));
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    background: none;
}

#titlebar-color::-webkit-color-swatch-wrapper {
    padding: 0;
}

#titlebar-color::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

[data-shape="square"] #titlebar-color,
[data-shape="square"] #titlebar-color::-webkit-color-swatch {
    border-radius: 0;
}

.titlebar-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: var(--primary-lighter, var(--modal-input-bg, #efe8e8));
    border: none;
    border-radius: 50%;
    color: var(--text-muted, var(--modal-text-muted, #777));
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.titlebar-clear:hover {
    opacity: 1;
}

[data-shape="square"] .titlebar-clear {
    border-radius: 0;
}

.window-style-toggle {
    display: flex;
    gap: 4px;
}

.window-style-btn {
    flex: 1;
    padding: 5px 10px;
    font-size: 11px;
    font-family: var(--font-family, inherit);
    font-weight: 500;
    color: var(--text-muted, var(--modal-text-muted, #777));
    background: var(--primary-lighter, var(--modal-input-bg, #efe8e8));
    border: 1px solid transparent;
    border-radius: 100px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.window-style-btn.active {
    color: var(--white, var(--modal-bg, #fff));
    background: var(--primary, var(--border-color, #b8878c));
}

[data-shape="square"] .window-style-btn {
    border-radius: 0;
}

[data-shape="square"] .settings-close,
[data-shape="square"] .toast,
[data-shape="square"] .toast-notification {
    border-radius: 0;
}

.settings-icon-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.settings-icon-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.settings-icon-btn svg {
    display: block;
    width: 12px;
    height: 12px;
    color: var(--text-muted, var(--modal-text-muted, #777));
}

.settings-icon-btn:hover {
    background: var(--primary-hover);
}

.settings-icon-btn:hover svg {
    color: var(--text, var(--modal-text, #555));
}

.settings-icon-btn.active {
    background: var(--primary-lighter, var(--modal-input-bg, #efe8e8));
}

.settings-icon-btn.active svg {
    color: var(--primary, var(--border-color, #b8878c));
}

[data-shape="square"] .settings-icon-btn {
    border-radius: 0;
}