:root {
        --accent-color: #2196f3;
        --accent-bg-hover: rgba(33,150,243,0.2);
}

body {
        font-family: 'Montserrat', sans-serif;
        max-width: 600px;
        margin: 30px auto;
        padding: 20px;
        background: #f5f5f5;
}

.page-header {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
}

.logo {
        display: flex;
        align-items: flex-end;
        gap: 3px;
        max-width: 40%;
}

.logo svg {
        margin-left: 0;
}

.logo .adlook,
.logo .builder {
        height: 40px;
}

.dark .logo .adlook-svg,
.dark .logo svg.adlook path {
        filter: brightness(0) invert(1);
        fill: #fff;
}

.dark .logo .builder-svg,
.dark .logo svg.builder path {
        filter: brightness(0.7);
        fill: #888888;
}

label {
        display: block;
        margin-top: 15px;
        font-weight: bold;
}

input,
select,
textarea {
        width: 100%;
        padding: 8px;
        margin-top: 5px;
}

html.dark input,
html.dark select,
html.dark textarea {
        background: #2A2A2A;
        color: #F0F0F0;
        border-color: #444;
}

html.dark input::placeholder,
html.dark textarea::placeholder,
html.dark select::placeholder {
        color: #525252;
}

.input {
        padding: 10px 14px;
        font-size: 16px;
        font-family: 'Montserrat', sans-serif;
        border: 1px solid #ccc;
        border-radius: 14px;
        width: 100%;
        background-color: #ffffff;
}

.dark .input {
        border: none;
        background-color: #2a2a2a;
        color: #fff;
}

button {
        border-radius: 20px;
        transition: all 0.2s ease;
}

button:not(.format-chip):not(.copy-btn):hover {
        background: var(--accent-bg-hover);
        border-color: var(--accent-color);
}

.faded {
        opacity: 0.4;
        transition: opacity 0.2s ease;
}

.loaded {
        opacity: 1;
        transition: opacity 0.2s ease;
}

pre {
        background: #2d2d2d;
        padding: 10px;
        overflow-x: auto;
        white-space: pre-wrap;
        word-break: break-word;
        border-radius: 6px;
        color: #eee;
}

h3 {
        margin-top: 30px;
}

.copy-block {
        position: relative;
        margin-top: 0;
}

.copy-block:hover .copy-btn {
        opacity: 1;
}

.copy-btn {
        position: absolute;
        top: 14px;
        right: 14px;
        opacity: 0;
        transition: opacity 0.2s ease;
        padding: 6px 12px;
        cursor: pointer;
        font-size: 12px;
        display: flex;
        align-items: center;
        gap: 6px;
        background: #fff;
        border: 1px solid #ccc;
        color: #333;
        border-radius: 20px;
}

.copy-btn:hover {
        background: #e6e6e6;
        border-color: #ccc;
}

.copy-btn.success {
        background-color: #4CAF50;
        color: white;
        border-color: #4CAF50;
}

html.dark .copy-btn.success:hover {
        background-color: #4CAF50;
        color: white;
        border-color: #4CAF50;
}

.copy-icon {
        pointer-events: none;
}

.toggle-group {
        display: flex;
        margin-top: 15px;
        gap: 6px;
}

.toggle-btn,
.toggle-btn-ibv {
        padding: 8px 12px;
        border: 1px solid #ccc;
        background: #fff;
        cursor: pointer;
        border-radius: 20px;
        font-size: 14px;
        transition: all 0.15s ease;
}

html.dark .toggle-btn,
html.dark .toggle-btn-ibv {
        background: #2A2A2A;
        color: #F0F0F0;
        border-color: #444;
}

button:not(.format-chip):hover {
        background: var(--accent-bg-hover);
        border-color: var(--accent-color);
}
button:not(.format-chip).active:hover {
        background: var(--accent-color);
        border-color: var(--accent-color);
}

html.dark button:not(.format-chip):hover {
        background: var(--accent-bg-hover);
        border-color: var(--accent-color);
}
html.dark button:not(.format-chip).active:hover {
        background: var(--accent-color);
        border-color: var(--accent-color);
}


.copy-block:hover button.copy-btn {
        opacity: 1;
}

button.copy-btn {
        position: absolute;
        top: 14px;
        right: 14px;
        opacity: 0;
        transition: opacity 0.2s ease;
        padding: 6px 12px;
        cursor: pointer;
        font-size: 12px;
        display: flex;
        align-items: center;
        gap: 6px;
        background: #fff;
        border: 1px solid #ccc;
        color: #333;
        border-radius: 20px;
}

button.copy-btn:hover {
        background: #e6e6e6;
        border-color: #ccc;
}

html.dark button.copy-btn:hover {
        background: #e6e6e6;
        border-color: #ccc;
}

button.copy-btn.success {
        background-color: #4CAF50;
        color: white;
        border-color: #4CAF50;
}

html.dark button.copy-btn.success:hover {
        background-color: #4CAF50;
        color: white;
        border-color: #4CAF50;
}

.toggle-btn.active,
.toggle-btn-ibv.active,
.ibv-device-btn.active,
.ibv-count-btn.active,
.ibv-container-btn.active,
.ibv-align-btn.active,
.ibv-adaptive-btn.active {
        background: var(--accent-color);
        color: #fff;
        border-color: var(--accent-color);
}

html.dark .toggle-btn.active,
html.dark .toggle-btn-ibv.active,
html.dark .ibv-device-btn.active,
html.dark .ibv-count-btn.active,
html.dark .ibv-container-btn.active,
html.dark .ibv-align-btn.active,
html.dark .ibv-adaptive-btn.active {
        background: var(--accent-color);
        color: #fff;
        border-color: var(--accent-color);
}

.toggle-btn.active:hover {
        background: var(--accent-color);
}

.code-header {
        background: #e0f7fa;
        padding: 6px 14px;
        font-weight: 600;
        font-size: 15px;
        border-radius: 8px;
        margin-bottom: 0;
        margin-top: 30px;
        display: inline-block;
        color: #333;
}

.message-header {
        background: #fff0e0;
        padding: 8px 16px;
        font-weight: 600;
        border-radius: 8px;
        margin-bottom: 0;
        margin-top: 30px;
        font-size: 16px;
        color: #333;
        display: inline-block;
}

#code-container {
        background: #e0f7fa;
        margin-top: 0;
        border: 1px solid #b3e5fc;
}

#telegram-container {
        background: #fff0e0;
        margin-top: 0;
        border: 1px solid #ffd7b3;
}

html.dark #code-container {
        background: #37474f;
        border-color: #4fa3c7;
}

html.dark #telegram-container {
        background: #5a452b;
        border-color: #d59a5a;
}

.format-toggle-group {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
        flex-wrap: wrap;
}

.format-chip {
        padding: 6px 14px;
        border-radius: 20px;
        background: rgba(0, 0, 0, 0.05);
        border: 1px solid transparent;
        font-size: 14px;
        cursor: pointer;
        user-select: none;
        transition: all 0.15s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
}

html:not(.dark) .format-chip:hover {
        background: rgba(0, 0, 0, 0.12);
        color: white;
}

.format-chip.fly.active:hover,
html:not(.dark) .format-chip.fly.active:hover {
        background: #2196f3;
}

.format-chip.ibv.active:hover,
html:not(.dark) .format-chip.ibv.active:hover {
        background: #ff9800;
}

.format-chip.content.active:hover,
html:not(.dark) .format-chip.content.active:hover {
        background: #4caf50;
}

.format-chip.overlay.active:hover,
html:not(.dark) .format-chip.overlay.active:hover {
        background: #9c27b0;
}

.format-chip.banner.active:hover,
html:not(.dark) .format-chip.banner.active:hover {
        background: #f44336;
}

html.dark .format-chip.fly:hover,
html:not(.dark) .format-chip.fly:hover {
        background: #2195f36f;
}

html.dark .format-chip.ibv:hover,
html:not(.dark) .format-chip.ibv:hover {
        background: #ff99007e;
}

html.dark .format-chip.content:hover,
html:not(.dark) .format-chip.content:hover {
        background: #4caf4f77;
}

html.dark .format-chip.overlay:hover,
html:not(.dark) .format-chip.overlay:hover {
        background: #9b27b080;
}

html.dark .format-chip.banner:hover,
html:not(.dark) .format-chip.banner:hover {
        background: #f443367d;
}

html.dark .format-chip {
        background: rgba(255, 255, 255, 0.05);
        color: #ddd;
}

.format-chip.active {
        background: #2196f3;
        color: white;
        font-weight: 500;
        border-color: #2196f3;
}

html.dark .format-chip.active {
        background: #2196f3;
        color: white;
        border-color: #2196f3;
}

.format-chip.fly {
        background: rgba(33, 150, 243, 0.1);
        color: #2196f3;
}

.format-chip.fly.active {
        background: #2196f3;
        color: white;
        border-color: #2196f3;
}

html.dark .format-chip.fly.active {
        background: #2196f3;
        color: white;
        border-color: #2196f3;
}

.format-chip.ibv {
        background: rgba(255, 152, 0, 0.1);
        color: #ff9800;
}

.format-chip.ibv.active {
        background: #ff9800;
        color: white;
        border-color: #ff9800;
}

html.dark .format-chip.ibv.active {
        background: #ff9800;
        color: white;
        border-color: #ff9800;
}

.format-chip.content {
        background: rgba(76, 175, 80, 0.1);
        color: #4caf50;
}

.format-chip.content.active {
        background: #4caf50;
        color: white;
        border-color: #4caf50;
}

html.dark .format-chip.content.active {
        background: #4caf50;
        color: white;
        border-color: #4caf50;
}

.format-chip.overlay {
        background: rgba(156, 39, 176, 0.1);
        color: #9c27b0;
}

.format-chip.overlay.active {
        background: #9c27b0;
        color: white;
        border-color: #9c27b0;
}

html.dark .format-chip.overlay.active {
        background: #9c27b0;
        color: white;
        border-color: #9c27b0;
}

.format-chip.banner {
        background: rgba(244, 67, 54, 0.1);
        color: #f44336;
}

.format-chip.banner.active {
        background: #f44336;
        color: white;
        border-color: #f44336;
}

html.dark .format-chip.banner.active {
        background: #f44336;
        color: white;
        border-color: #f44336;
}

.layout-container {
        display: flex;
        gap: 40px;
        align-items: flex-start;
        flex-wrap: wrap;
        margin-top: 20px;
}

.left-column,
right-column {
        flex: 1 1 200px;
        display: flex;
        flex-direction: column;
        gap: 12px;
}

.left-column label {
        font-weight: bold;
        margin-bottom: 4px;
}


.device-toggle {
        display: flex;
        gap: 6px;
}

.device-toggle .toggle-btn {
        padding: 6px 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        background: #fff;
        border-radius: 20px;
        cursor: pointer;
        flex: 1;
}

html.dark .device-toggle .toggle-btn {
        background: #2A2A2A;
        color: #F0F0F0;
        border-color: #444;
}

.device-toggle .toggle-btn.active {
        background-color: var(--accent-color);
        color: white;
        border-color: var(--accent-color);
}
html.dark .device-toggle .toggle-btn.active {
        background-color: var(--accent-color);
        color: white;
        border-color: var(--accent-color);
}

.placement-wrap {
        display: flex;
        flex-direction: row;
        gap: 40px;
}

.placement-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
}

.align-grid,
.mobile-grid {
        display: grid;
        grid-template-columns: repeat(3, 40px);
        grid-template-rows: repeat(3, 40px);
        gap: 5px;
}

.align-grid button,
.mobile-grid button {
        width: 40px;
        height: 40px;
        font-size: 18px;
        border: 1px solid #ccc;
        border-radius: 20px;
        background: #fff;
        cursor: pointer;
        padding: 0;
}

html.dark .align-grid button,
html.dark .mobile-grid button {
        background: #2A2A2A;
        color: #F0F0F0;
        border-color: #444;
}


.align-grid button.active {
        background: var(--accent-color);
        color: white;
        border-color: var(--accent-color);
}
html.dark .align-grid button.active,
html.dark .mobile-grid button.active {
        background: var(--accent-color);
        color: white;
        border-color: var(--accent-color);
}

.mobile-grid button.active {
        background: var(--accent-color);
        color: white;
        border-color: var(--accent-color);
}
.align-grid button.active:hover,
.mobile-grid button.active:hover,
.device-toggle .toggle-btn.active:hover,
.ibv-device-btn.active:hover,
.ibv-count-btn.active:hover,
.ibv-container-btn.active:hover,
.ibv-align-btn.active:hover,
.ibv-adaptive-btn.active:hover,
.banner-device-btn.active:hover,
.banner-align-btn.active:hover,
.banner-container-btn.active:hover {
        background: var(--accent-color);
        border-color: var(--accent-color);
}

.mobile-advanced-options {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20px;
        margin-top: 10px;
}

.mobile-advanced-options label {
        font-size: 14px;
}

#mobileHeightLabel input {
        width: 40px;
}

.adaptive-chip {
        padding: 6px 14px;
        border-radius: 20px;
        background: rgba(33, 150, 243, 0.1);
        border: 1px solid rgba(33, 150, 243, 0.3);
        font-size: 14px;
        color: #2196f3;
        cursor: pointer;
        transition: all 0.2s ease;
        user-select: none;
        display: flex;
        align-items: center;
}

.adaptive-chip:hover {
        background: var(--accent-bg-hover);
        border-color: var(--accent-color);
}

.adaptive-chip.active {
        background: var(--accent-color);
        color: white;
        border-color: var(--accent-color);
}

.adaptive-chip svg {
        width: 16px;
        height: 16px;
        vertical-align: middle;
}

#mobileHeightLabel {
        margin: 0;
}

#mobileStickyHeight {
        margin: 0;
}

/* TOGGLE THEME */

.theme-icon-toggle {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 37px;
        width: 37px;
        transition: transform 0.3s ease-in-out;
}

.theme-icon-toggle svg {
        height: 37px;
        transition: transform 0.3s ease-in-out;
}

.theme-icon-toggle:hover svg {
        transform: scale(1.1);
}

.theme-icon-toggle svg path {
        fill: #666;
}

html.dark .theme-icon-toggle svg path {
        fill: #ccc;
}

.theme-switch-wrapper {
        display: flex;
        align-items: center;
        margin-left: 10px;
}

.tooltip-icon-toggle {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 37px;
        width: 37px;
        margin-left: 8px;
        border-radius: 50%;
        border: 1px solid var(--accent-color);
        color: var(--accent-color);
        font-weight: bold;
        transition: background 0.2s;
}

.tooltip-icon-toggle.active {
        background: var(--accent-color);
        color: #fff;
}

.tooltip-icon-toggle:hover {
        background: var(--accent-bg-hover);
}

html.dark body {
        background: #1B1B1B;
        color: #F0F0F0;
}

html.dark .code-header {
        background: #37474f;
        color: #fff;
}

html.dark .message-header {
        background: #5a452b;
        color: #fff;
}

html.dark .toggle-btn,
html.dark .align-grid button,
html.dark .mobile-grid button,
html.dark .adaptive-chip {
        text-shadow: 0 0 2px #ddd;
}

/* Tooltips */
[data-tooltip]:not(.copy-btn) {
        position: relative;
}

html.show-tooltips [data-tooltip]:hover::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: #333;
        color: #fff;
        padding: 4px 8px;
        border-radius: 4px;
        white-space: nowrap;
        font-size: 12px;
        z-index: 10;
        opacity: 1;
}

html.show-tooltips.dark [data-tooltip]:hover::after {
        background: #eee;
        color: #000;
}