:root {
    --md-sys-color-primary: #6750a4;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #eaddff;
    --md-sys-color-background: #fdfcff;
    --md-sys-color-surface: #fdfcff;
    --md-sys-color-surface-container: #f3f3f6;
    --md-sys-color-on-surface: #1c1b1f;
    --md-sys-color-on-surface-variant: #49454f;
    --md-sys-color-outline: #79747e;
    --md-sys-color-outline-variant: #c4c7c5;
    --md-sys-shape-corner-medium: 12px;
    --md-sys-shape-corner-large: 16px;
    --md-sys-shape-corner-full: 100px;
    --md-elevation-1: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}

body.dark-mode {
    --md-sys-color-primary: #d0bcff;
    --md-sys-color-on-primary: #381e72;
    --md-sys-color-primary-container: #4f378b;
    --md-sys-color-background: #141218;
    --md-sys-color-surface: #141218;
    --md-sys-color-surface-container: #211f26;
    --md-sys-color-on-surface: #e6e1e5;
    --md-sys-color-on-surface-variant: #cac4d0;
    --md-sys-color-outline: #938f99;
    --md-sys-color-outline-variant: #444746;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
    margin: 0; font-family: 'Roboto', 'Padauk', sans-serif;
    background-color: var(--md-sys-color-background);
    color: var(--md-sys-color-on-surface);
    transition: background-color 0.3s;
}

.app-container {
    max-width: 500px; margin: 0 auto; min-height: 100vh;
    display: flex; flex-direction: column;
    background-color: var(--md-sys-color-surface);
    box-shadow: 0 0 20px rgba(0,0,0,0.05);
}

.top-app-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 20px; background: var(--md-sys-color-surface);
    position: sticky; top: 0; z-index: 10;
}
.top-app-bar h3 { margin: 0; font-size: 20px; font-weight: 500; }
.icon-btn {
    background: transparent; border: none; color: var(--md-sys-color-on-surface-variant);
    padding: 10px; border-radius: 50%; cursor: pointer; display: flex;
}
.icon-btn:hover { background-color: var(--md-sys-color-surface-container); }

.content-body { padding: 16px; flex: 1; }

.preview-card-container {
    background: var(--md-sys-color-surface-container);
    border-radius: var(--md-sys-shape-corner-large);
    padding: 16px; margin-bottom: 24px;
}

.preview-container {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    margin-bottom: 20px; position: relative; width: 100%;
}

.image-wrapper {
    position: relative; width: 100%; aspect-ratio: 5/3; 
    border-radius: 12px; overflow: hidden;
    background: #ffffff; box-shadow: var(--md-elevation-1);
    cursor: grab; user-select: none;
    transform: scale(1); transition: transform 0.1s ease;
}
.image-wrapper:active { cursor: grabbing; transform: scale(0.98); }

#resultImage {
    width: 100%; height: 100%; object-fit: cover;
    display: block; pointer-events: none;
}

/* ZOOM ANIMATION CLASS */
.zoom-animate {
    animation: zoomSlide 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes zoomSlide {
    0% { opacity: 0; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1); }
}

.style-badge {
    margin-top: 12px; margin-bottom: 8px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    padding: 6px 16px; border-radius: 100px;
    font-size: 12px; font-weight: 500;
    pointer-events: none; white-space: nowrap; text-align: center;
}

.pagination-dots { display: flex; justify-content: center; gap: 8px; padding: 4px; }
.dot {
    width: 8px; height: 8px; border-radius: 50%;
    background-color: var(--md-sys-color-outline-variant);
    cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.dot.active { background-color: var(--md-sys-color-primary); transform: scale(1.25); }

.action-buttons { display: flex; justify-content: center; width: 100%; }
.btn-download {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border: none; padding: 12px 24px;
    border-radius: var(--md-sys-shape-corner-full);
    font-size: 14px; font-weight: 500; font-family: 'Padauk', sans-serif;
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    box-shadow: var(--md-elevation-1); width: 100%; justify-content: center;
}
.btn-download:active { transform: scale(0.98); }

.controls-panel { display: flex; flex-direction: column; gap: 24px; }
.section-label {
    font-size: 14px; font-weight: 500; color: var(--md-sys-color-primary);
    margin-bottom: 12px; font-family: 'Padauk', sans-serif;
}

.bank-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.bank-item {
    aspect-ratio: 1; border-radius: var(--md-sys-shape-corner-medium);
    background: var(--md-sys-color-surface-container);
    border: 1px solid transparent; display: flex; flex-direction: column;
    align-items: center; justify-content: center; cursor: pointer; padding: 4px;
}
.bank-item img { width: 32px; height: 32px; object-fit: contain; margin-bottom: 4px; }
.bank-item span { font-size: 9px; font-weight: 500; color: var(--md-sys-color-on-surface-variant); }
.bank-item.active {
    background-color: var(--md-sys-color-primary-container);
    border-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary-container);
}

.md-input-group {
    position: relative; margin-bottom: 16px;
    background: var(--md-sys-color-surface-container);
    border-radius: 4px 4px 0 0; border-bottom: 1px solid var(--md-sys-color-outline);
}
.md-input-group input {
    width: 100%; padding: 24px 16px 8px; border: none; background: transparent;
    font-size: 16px; color: var(--md-sys-color-on-surface);
    font-family: 'Padauk', sans-serif; outline: none;
}
.md-input-group label {
    position: absolute; top: 16px; left: 16px; font-size: 16px;
    color: var(--md-sys-color-on-surface-variant); pointer-events: none;
    transition: 0.2s; font-family: 'Padauk', sans-serif;
}
.md-input-group input:focus ~ label, .md-input-group input:not(:placeholder-shown) ~ label {
    top: 4px; font-size: 12px; color: var(--md-sys-color-primary);
}
.md-input-group:focus-within { border-bottom: 2px solid var(--md-sys-color-primary); }

.upload-container {
    border: 2px dashed var(--md-sys-color-outline-variant); border-radius: 12px;
    padding: 16px; display: flex; align-items: center; gap: 16px; cursor: pointer;
}
.upload-container:hover { background-color: var(--md-sys-color-surface-container); border-color: var(--md-sys-color-primary); }
.upload-icon { color: var(--md-sys-color-primary); }
.upload-text strong { display: block; font-size: 14px; color: var(--md-sys-color-on-surface); font-family: 'Padauk', sans-serif; }
.upload-text span { font-size: 12px; color: var(--md-sys-color-on-surface-variant); font-family: 'Padauk', sans-serif; }

.btn-text {
    background: none; border: none; color: var(--md-sys-color-primary);
    padding: 12px; font-weight: 500; cursor: pointer; width: 100%; margin-bottom: 20px;
}

.crop-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); z-index: 20000;
    display: flex; align-items: center; justify-content: center; backdrop-filter: blur(5px);
}
.crop-modal-content {
    background: var(--md-sys-color-surface); width: 90%; max-width: 500px;
    border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 16px;
}
.crop-modal-content h3 { margin: 0; color: var(--md-sys-color-on-surface); }
.img-container { max-height: 60vh; overflow: hidden; background: #333; border-radius: 8px; }
.img-container img { max-width: 100%; display: block; }
.crop-actions { display: flex; gap: 10px; justify-content: flex-end; }
.btn-cancel {
    background: transparent; border: 1px solid var(--md-sys-color-outline);
    color: var(--md-sys-color-on-surface); padding: 10px 20px; border-radius: 100px; cursor: pointer;
}
.btn-confirm {
    background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
    border: none; padding: 10px 20px; border-radius: 100px; font-weight: bold; cursor: pointer;
}