/* === RESET & BASE === */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    color: #33334f;
    background: #f0f1f5;
    line-height: 1.6;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

a { color: #6078ff; text-decoration: none; font-weight: 700; }
a:hover { text-decoration: underline; }

/* === BUTTONS === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55em 0.8em;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    color: #000;
    background: transparent;
    box-shadow: inset 0 0 0 1px, 0 1px 2px rgba(0, 0, 0, .17);
}

.btn:hover {
    box-shadow: inset 0 0 0 1px, 0 4px 10px rgba(50, 50, 93, .23), 0 1px 3px rgba(0, 0, 0, .08);
    text-decoration: none;
}

.btn.primary {
    color: #fff;
    background: #000;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .17);
}

.btn.primary:hover {
    box-shadow: 0 4px 10px rgba(50, 50, 93, .23), 0 1px 3px rgba(0, 0, 0, .08);
}

.tool-btn {
    font-size: 16px;
    min-width: 34px;
}

/* === HEADER === */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 100px;
    flex-shrink: 0;
    border-bottom: 1px solid #e2e4ef;
    gap: 16px;
    background: #fff;
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #33334f;
    flex-shrink: 0;
    margin-left: 8px;
}

.header-logo:hover { text-decoration: none; }

.header-logo span {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: clamp(16px, 5vw, 22px);
    white-space: nowrap;
}

/* Preset Buttons */
.header-presets {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.header-tools {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tool-icon {
    min-width: 32px;
    justify-content: center;
    padding: 5px 8px;
}

.preset-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Lato', sans-serif;
    color: #767ead;
    background: transparent;
    border: 1px solid #e2e4ef;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.preset-btn:hover {
    border-color: #6078ff;
    color: #6078ff;
}

.preset-btn.active {
    background: #eef0ff;
    color: #5b5fc7;
    border-color: #6078ff;
}

.preset-custom {
    display: flex;
    align-items: center;
    gap: 4px;
}

.preset-custom input {
    width: 56px;
    padding: 4px 6px;
    font-size: 12px;
    border: 2px solid #e2e4ef;
    border-radius: 8px;
    text-align: center;
    font-family: 'Lato', sans-serif;
    transition: border-color 0.2s;
}

.preset-custom input:focus {
    outline: none;
    border-color: #6078ff;
}

.preset-custom span {
    font-size: 12px;
    color: #999;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.header-actions .btn {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    color: #999;
    transition: color 0.2s;
}

.header-actions .btn:hover {
    color: #333;
    box-shadow: none;
    text-decoration: none;
}

.theme-toggle {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    transition: transform 0.2s;
}

.theme-toggle:hover { transform: scale(1.2); }

.theme-toggle .icon-moon { color: #f59e0b; }
.theme-toggle .icon-sun { display: none; color: #f59e0b; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

/* === MAIN APP LAYOUT === */
.app-layout {
    flex: 1;
    display: flex;
    overflow-y: auto;
    gap: 0;
    padding: 16px 100px;
    flex-wrap: wrap;
}

/* === PANELS === */
.panel {
    width: 315px;
    min-width: 255px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e4ef;
    overflow: hidden;
}

.panel-emoji {
    border-right: none;
    border-left: none;
}

.panel-header {
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
}

.panel-header h2 {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #33334f;
}

.panel-count {
    font-weight: 700;
    color: #999;
    font-family: 'Lato', sans-serif;
}

.panel-items {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    align-content: start;
    order: 2;
}

.panel-thumb {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    cursor: grab;
    border: 2px solid #e2e4ef;
    transition: border-color 0.2s, transform 0.2s;
    aspect-ratio: 1;
}

.panel-thumb:hover {
    border-color: #6078ff;
    transform: translateY(-1px);
}

.panel-thumb:active { cursor: grabbing; }

.panel-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Transparent sticker background (checkerboard) */
.panel-emoji .panel-thumb img {
    object-fit: contain;
}

.panel-thumb .thumb-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 11px;
    border: none;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.panel-thumb:hover .thumb-remove { display: flex; }

/* Drop Zone */
.drop-zone {
    margin: 8px;
    padding: 12px;
    border: 2px dashed #ccc;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    order: 1;
}

.drop-zone:hover {
    border-color: #6078ff;
}

.drop-zone.drag-over {
    border-color: #6078ff;
    background: rgba(96, 120, 255, 0.05);
    box-shadow: 0 0 12px rgba(96, 120, 255, 0.2);
}

.drop-zone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #999;
    font-size: 12px;
}

.drop-zone-content svg {
    stroke: #ccc;
    transition: stroke 0.2s;
}

.drop-zone:hover .drop-zone-content svg { stroke: #6078ff; }
.drop-zone.drag-over .drop-zone-content svg { stroke: #6078ff; }

.covers-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0 12px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e4ef;
}

.covers-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

/* Cover Card */
.cover-card {
    position: relative;
    border: 2px solid #e2e4ef;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    transition: border-color 0.2s;
    width: 100%;
    max-width: 900px;
}

.cover-card:hover { border-color: #6078ff; }

.cover-card.drag-target {
    border-color: #6078ff;
    box-shadow: 0 0 16px rgba(96, 120, 255, 0.3);
}

.cover-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    font-size: 12px;
    font-weight: 700;
    color: #767ead;
}

.cover-card-actions {
    display: flex;
    gap: 6px;
}

.cover-card-actions button {
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.2s;
    color: #999;
}

.cover-card-actions button:hover { background: #eee; color: #333; }

.cover-canvas-wrap {
    position: relative;
    width: 100%;
    background-image:
        linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
        linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
        linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}

.cover-canvas-wrap canvas {
    display: block;
    width: 100%;
    cursor: default;
}

/* Snap guides */
.snap-line-h, .snap-line-v {
    position: absolute;
    background: rgba(96, 120, 255, 0.5);
    pointer-events: none;
    z-index: 100;
    display: none;
}

.snap-line-h { height: 1px; left: 0; right: 0; }
.snap-line-v { width: 1px; top: 0; bottom: 0; }

/* Loading spinner */
.cover-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.7);
    z-index: 50;
}

.cover-loading::after {
    content: '';
    width: 28px;
    height: 28px;
    border: 3px solid #e2e4ef;
    border-top-color: #6078ff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Empty cover placeholder */
.cover-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ccc;
    font-size: 14px;
    padding: 40px;
    cursor: default;
    user-select: none;
}

.cover-empty svg { stroke: #ddd; }

/* === TOOLBAR === */
.covers-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid #eee;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.toolbar-divider {
    width: 1px;
    height: 20px;
    background: #e2e4ef;
}

/* === FOOTER === */
.site-footer {
    padding: 30px 100px 15px;
    flex-shrink: 0;
    background: transparent;
    width: 100%;
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-inner span { color: #999; font-size: 14px; }
.footer-inner a { color: #999; transition: color 0.2s; }
.footer-inner a:hover { color: #6078ff; }

.footer-social {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
}

.footer-social a {
    color: #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    transition: color 0.25s, transform 0.25s;
}

.footer-social a svg path { fill: currentColor; }
.footer-social a svg path { fill: currentColor; }
.footer-social a:hover { transform: scale(1.2); text-decoration: none; }

.footer-social .social-telegram:hover { color: #0088cc; }
.footer-social .social-youtube:hover { color: #FF0000; }
.footer-social .social-instagram:hover { color: #E4405F; }
.footer-social .social-x:hover { color: #000; }
.footer-social .social-github:hover { color: #333; }
.footer-social .social-linkedin:hover { color: #0A66C2; }
.footer-social .social-devto:hover { color: #000; }

/* === DARK MODE === */
[data-theme="dark"] body { background: #0f0f1a; color: #e0e0e0; }
[data-theme="dark"] .site-header { border-bottom-color: #2a2a40; }
[data-theme="dark"] .site-header, [data-theme="dark"] .header-logo { color: #e0e0e0; }
[data-theme="dark"] .header-actions .btn { color: #888; }
[data-theme="dark"] .header-actions .btn:hover { color: #e0e0e0; }

[data-theme="dark"] .preset-btn { color: #888; border-color: #2a2a40; }
[data-theme="dark"] .preset-btn:hover { color: #818cf8; border-color: #818cf8; }
[data-theme="dark"] .preset-btn.active { background: #1a1a2e; color: #818cf8; border-color: #818cf8; }
[data-theme="dark"] .preset-custom input { background: #1a1a2e; border-color: #2a2a40; color: #e0e0e0; }
[data-theme="dark"] .preset-custom input:focus { border-color: #818cf8; }
[data-theme="dark"] .preset-custom span { color: #666; }

[data-theme="dark"] .panel { background: #16162a; border-color: #2a2a40; }
[data-theme="dark"] .site-header { background: #0f0f1a; border-bottom-color: #2a2a40; }
[data-theme="dark"] .site-footer { background: #0f0f1a; }
[data-theme="dark"] .panel-header { border-color: #2a2a40; }
[data-theme="dark"] .panel-header h2 { color: #e0e0e0; }
[data-theme="dark"] .panel-thumb { border-color: #2a2a40; }
[data-theme="dark"] .panel-thumb:hover { border-color: #818cf8; }

[data-theme="dark"] .drop-zone { border-color: #333; }
[data-theme="dark"] .drop-zone:hover { border-color: #818cf8; }
[data-theme="dark"] .drop-zone.drag-over { border-color: #818cf8; background: rgba(129, 140, 248, 0.05); }
[data-theme="dark"] .drop-zone-content { color: #666; }
[data-theme="dark"] .drop-zone-content svg { stroke: #444; }
[data-theme="dark"] .drop-zone:hover .drop-zone-content svg { stroke: #818cf8; }

[data-theme="dark"] .cover-card { border-color: #2a2a40; }
[data-theme="dark"] .cover-card:hover { border-color: #818cf8; }
[data-theme="dark"] .cover-card-header { background: #1a1a2e; border-color: #2a2a40; color: #888; }
[data-theme="dark"] .cover-card-actions button { color: #666; }
[data-theme="dark"] .cover-card-actions button:hover { background: #2a2a40; color: #e0e0e0; }

[data-theme="dark"] .covers-area { background: #16162a; border-color: #2a2a40; }
[data-theme="dark"] .covers-scroll { background: transparent; }

[data-theme="dark"] .cover-canvas-wrap {
    background-image:
        linear-gradient(45deg, #1a1a2e 25%, transparent 25%),
        linear-gradient(-45deg, #1a1a2e 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #1a1a2e 75%),
        linear-gradient(-45deg, transparent 75%, #1a1a2e 75%);
}

[data-theme="dark"] .cover-empty { color: #444; }
[data-theme="dark"] .cover-empty svg { stroke: #333; }
[data-theme="dark"] .cover-loading { background: rgba(15,15,26,0.7); }
[data-theme="dark"] .cover-loading::after { border-color: #2a2a40; border-top-color: #818cf8; }

[data-theme="dark"] .covers-toolbar { border-top-color: #2a2a40; }
[data-theme="dark"] .toolbar-divider { background: #2a2a40; }
[data-theme="dark"] .btn { color: #e0e0e0; box-shadow: inset 0 0 0 1px #444, 0 1px 2px rgba(0,0,0,.3); }
[data-theme="dark"] .btn:hover { box-shadow: inset 0 0 0 1px #666, 0 4px 10px rgba(0,0,0,.3); }
[data-theme="dark"] .btn.primary { background: #818cf8; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); }

[data-theme="dark"] .site-footer { border-top-color: #2a2a40; }
[data-theme="dark"] .footer-inner span, [data-theme="dark"] .footer-inner a { color: #666; }
[data-theme="dark"] .footer-inner a:hover { color: #818cf8; }
[data-theme="dark"] .footer-social a { color: #666; }

/* === SELECTION HANDLES === */
.element-handles {
    position: absolute;
    pointer-events: none;
    z-index: 90;
}

.element-handles .handle {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid #6078ff;
    background: #fff;
    border-radius: 2px;
    pointer-events: all;
    cursor: nwse-resize;
}

.element-handles .handle-rotate {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid #6078ff;
    background: #fff;
    border-radius: 50%;
    pointer-events: all;
    cursor: grab;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
}

.element-handles .handle-line {
    position: absolute;
    width: 1px;
    background: #6078ff;
    pointer-events: none;
    top: -20px;
    left: 50%;
    height: 20px;
}

/* Shadow on elements */
.element-shadow {
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3));
}