/* Crop - Advanced Image Crop Tool v3.1 */
/* Fixed Ratio Buttons - 100% Working */

:root {
    --nc-primary: #00e5ff;
    --nc-primary-dark: #00b8d4;
    --nc-bg: #f4f5f7;
    --nc-white: #ffffff;
    --nc-text: #1a1a1a;
    --nc-border: #e0e0e0;
    --nc-shadow: 0 0 12px rgba(0,229,255,0.5);
    --nc-radius: 12px;
}

* {
    box-sizing: border-box;
}

.neoncrop-app {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
    max-width: 100%;
    margin: 16px auto;
    background: var(--nc-bg);
    border-radius: var(--nc-radius);
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    overflow: hidden;
    color: var(--nc-text);
    line-height: 1.4;
}

/* Header */
.neoncrop-app-header {
    background: var(--nc-primary);
    padding: clamp(12px, 2vw, 20px) clamp(16px, 3vw, 28px);
    display: flex;
    align-items: baseline;
    gap: clamp(8px, 1.5vw, 14px);
    flex-wrap: wrap;
}

.neoncrop-app-title {
    margin: 0;
    font-size: clamp(20px, 4vw, 28px);
    font-weight: 700;
    color: var(--nc-text);
    letter-spacing: -0.5px;
}

.neoncrop-app-subtitle {
    font-size: clamp(11px, 2vw, 15px);
    color: var(--nc-text);
    opacity: 0.75;
}

/* Body Layout */
.neoncrop-app-body {
    display: flex;
    flex-wrap: wrap;
    padding: clamp(10px, 2vw, 20px);
    gap: clamp(10px, 2vw, 20px);
    min-height: clamp(400px, 60vh, 600px);
}

.neoncrop-app-main {
    flex: 1 1 60%;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.5vw, 14px);
}

.neoncrop-app-sidebar {
    flex: 0 0 clamp(220px, 25vw, 280px);
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 2vw, 18px);
    align-items: center;
}

/* Upload */
.neoncrop-upload {
    border: 2px dashed #ccc;
    border-radius: 10px;
    padding: clamp(30px, 7vw, 60px) clamp(15px, 4vw, 20px);
    text-align: center;
    cursor: pointer;
    background: var(--nc-white);
    transition: all 0.25s;
}

.neoncrop-upload-active,
.neoncrop-upload:hover {
    border-color: var(--nc-primary);
    background: #f0fdff;
    box-shadow: 0 0 18px rgba(0,229,255,0.15);
}

.neoncrop-upload-icon {
    width: clamp(36px, 7vw, 52px);
    height: clamp(36px, 7vw, 52px);
    margin-bottom: 10px;
}

.neoncrop-upload-text {
    margin: 8px 0 4px;
    font-size: clamp(13px, 2.2vw, 16px);
    color: #555;
}

.neoncrop-upload-link {
    color: var(--nc-primary-dark);
    font-weight: 600;
    text-decoration: underline;
}

.neoncrop-upload-info {
    margin: 0;
    font-size: clamp(10px, 1.6vw, 12px);
    color: #999;
}

/* Canvas */
.neoncrop-canvas-area {
    flex: 1;
}

.neoncrop-canvas-container {
    position: relative;
    background: #333;
    border-radius: 8px;
    border: 1px solid #ddd;
    width: 100%;
    height: clamp(280px, 45vh, 500px);
    overflow: hidden;
}

#neoncropMainCanvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Crop Box */
.neoncrop-crop-box {
    position: absolute;
    border: 2px solid var(--nc-primary);
    cursor: move;
    z-index: 5;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.55);
}

/* Handles */
.neoncrop-handle {
    position: absolute;
    width: clamp(14px, 3vw, 18px);
    height: clamp(14px, 3vw, 18px);
    background: var(--nc-primary);
    border: 2px solid #fff;
    z-index: 6;
    border-radius: 3px;
    transition: transform 0.15s;
}

.neoncrop-handle:hover {
    transform: scale(1.4);
}

.neoncrop-handle-tl { top: -9px; left: -9px; cursor: nw-resize; }
.neoncrop-handle-tr { top: -9px; right: -9px; cursor: ne-resize; }
.neoncrop-handle-bl { bottom: -9px; left: -9px; cursor: sw-resize; }
.neoncrop-handle-br { bottom: -9px; right: -9px; cursor: se-resize; }

/* Tools */
.neoncrop-tools {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(8px, 1.5vw, 14px);
    background: var(--nc-white);
    padding: clamp(8px, 1.5vw, 14px) clamp(10px, 2vw, 16px);
    border-radius: 8px;
    border: 1px solid var(--nc-border);
}

.neoncrop-tools-row {
    display: flex;
    align-items: center;
    gap: clamp(6px, 1vw, 10px);
    flex-wrap: wrap;
    flex: 1;
    min-width: 200px;
}

.neoncrop-tools-label {
    font-size: clamp(10px, 1.5vw, 12px);
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.neoncrop-ratio-group,
.neoncrop-action-group {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

/* Buttons */
.neoncrop-ratio-btn,
.neoncrop-action-btn {
    padding: clamp(5px, 1.2vw, 8px) clamp(8px, 1.8vw, 14px);
    border: 2px solid var(--nc-border);
    background: var(--nc-white);
    border-radius: 6px;
    font-size: clamp(10px, 1.6vw, 13px);
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    user-select: none;
}

.neoncrop-ratio-btn.active {
    background: var(--nc-primary);
    border-color: var(--nc-primary);
    color: #fff;
    box-shadow: var(--nc-shadow);
    transform: scale(1.05);
}

.neoncrop-ratio-btn:hover:not(.active) {
    border-color: var(--nc-primary);
    color: var(--nc-primary-dark);
    background: #f0fdff;
    box-shadow: 0 0 8px rgba(0,229,255,0.3);
}

.neoncrop-action-btn:hover:not(.neoncrop-reset-btn) {
    border-color: var(--nc-primary);
    color: var(--nc-primary-dark);
    background: #f0fdff;
}

.neoncrop-reset-btn {
    color: #d32f2f;
    border-color: #ffcdd2;
}

.neoncrop-reset-btn:hover {
    background: #ffebee;
    border-color: #d32f2f;
    box-shadow: 0 0 8px rgba(211,47,47,0.3);
}

/* Sidebar */
.neoncrop-preview-card {
    background: var(--nc-white);
    border: 2px solid var(--nc-border);
    border-radius: 8px;
    padding: clamp(10px, 2vw, 16px);
    width: 100%;
    text-align: center;
}

.neoncrop-preview-title {
    margin: 0 0 10px;
    font-size: clamp(11px, 1.8vw, 13px);
    text-transform: uppercase;
    color: #777;
    letter-spacing: 0.5px;
}

.neoncrop-preview-wrap {
    margin: 0 auto;
    display: inline-block;
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
}

#neoncropPreviewCanvas {
    display: block;
    width: clamp(120px, 25vw, 220px);
    height: clamp(120px, 25vw, 220px);
}

.neoncrop-preview-size {
    margin: 8px 0 0;
    font-size: clamp(10px, 1.6vw, 12px);
    color: #888;
    font-family: 'SF Mono', Monaco, monospace;
}

/* Download Button */
.neoncrop-download-btn {
    width: 100%;
    padding: clamp(10px, 2vw, 14px);
    background: var(--nc-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: clamp(13px, 2vw, 16px);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s;
    box-shadow: 0 2px 8px rgba(0,229,255,0.3);
}

.neoncrop-download-btn:hover {
    background: var(--nc-primary-dark);
    box-shadow: 0 4px 18px rgba(0,229,255,0.5);
    transform: translateY(-2px);
}

.neoncrop-download-btn:active {
    transform: translateY(0);
}

.neoncrop-download-btn svg {
    width: clamp(16px, 2.5vw, 20px);
    height: clamp(16px, 2.5vw, 20px);
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 900px) {
    .neoncrop-app-body {
        flex-direction: column;
    }
    
    .neoncrop-app-sidebar {
        flex: 1 1 auto;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px;
    }
    
    .neoncrop-preview-card {
        flex: 0 0 auto;
        width: auto;
    }
    
    .neoncrop-download-btn {
        flex: 0 0 auto;
        width: auto;
        min-width: 180px;
    }
}

@media (max-width: 600px) {
    .neoncrop-app {
        margin: 8px;
        border-radius: 8px;
    }
    
    .neoncrop-app-body {
        padding: 8px;
        gap: 8px;
    }
    
    .neoncrop-canvas-container {
        height: 38vh;
        min-height: 250px;
    }
    
    .neoncrop-tools {
        flex-direction: column;
    }
    
    .neoncrop-tools-row {
        width: 100%;
    }
    
    .neoncrop-ratio-btn,
    .neoncrop-action-btn {
        padding: 5px 8px;
        font-size: 10px;
    }
    
    .neoncrop-app-sidebar {
        flex-direction: column;
        align-items: center;
    }
    
    .neoncrop-download-btn {
        width: 100%;
        min-width: auto;
    }

    .neoncrop-handle {
        width: 20px;
        height: 20px;
    }
    
    .neoncrop-handle-tl { top: -10px; left: -10px; }
    .neoncrop-handle-tr { top: -10px; right: -10px; }
    .neoncrop-handle-bl { bottom: -10px; left: -10px; }
    .neoncrop-handle-br { bottom: -10px; right: -10px; }
}

@media (max-width: 400px) {
    .neoncrop-canvas-container {
        height: 35vh;
        min-height: 200px;
    }
    
    .neoncrop-ratio-group,
    .neoncrop-action-group {
        gap: 3px;
    }
    
    .neoncrop-ratio-btn,
    .neoncrop-action-btn {
        padding: 4px 6px;
        font-size: 9px;
    }
    
    .neoncrop-handle {
        width: 24px;
        height: 24px;
    }
    
    .neoncrop-handle-tl { top: -12px; left: -12px; }
    .neoncrop-handle-tr { top: -12px; right: -12px; }
    .neoncrop-handle-bl { bottom: -12px; left: -12px; }
    .neoncrop-handle-br { bottom: -12px; right: -12px; }
}

@media (max-height: 500px) and (orientation: landscape) {
    .neoncrop-app-body {
        flex-direction: row;
    }
    
    .neoncrop-canvas-container {
        height: 70vh;
    }
    
    .neoncrop-app-sidebar {
        flex: 0 0 180px;
    }
    
    #neoncropPreviewCanvas {
        width: 100px;
        height: 100px;
    }
}