/* ============================================================
   Vamriko - IMAGES TO PDF
   Internal tool styling only.
   Global site styling remains untouched.
   ============================================================ */
#tool-root {
    width:100%;
}
/* ============================================================
   UPLOAD
   ============================================================ */
.pdf-upload {
    min-height:360px;
    border:1px dashed rgba(129,120,255,.45);
    border-radius:20px;
    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(99,91,255,.13),
            transparent 48%
        ),
        rgba(255,255,255,.015);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:40px 24px;
    transition:
        border-color .25s ease,
        background .25s ease,
        transform .25s ease;
}
.pdf-upload.dragover {
    border-color:#8178ff;
    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(99,91,255,.22),
            transparent 50%
        );
    transform:scale(1.01);
}
.upload-icon {
    width:68px;
    height:68px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    background:
        linear-gradient(
            135deg,
            #635bff,
            #8178ff
        );
    color:#fff;
    box-shadow:
        0 15px 45px rgba(99,91,255,.25);
    margin-bottom:22px;
}
.pdf-upload h2 {
    margin:0 0 8px;
    font-size:25px;
}
.pdf-upload p {
    margin:0 0 20px;
    opacity:.65;
}
.upload-note {
    font-size:12px;
    opacity:.45;
    margin-top:14px;
}
/* ============================================================
   APP
   ============================================================ */
.pdf-app {
    width:100%;
}
.pdf-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding-bottom:18px;
    margin-bottom:20px;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.toolbar-left {
    display:flex;
    gap:9px;
    flex-wrap:wrap;
}
.image-count {
    font-size:12px;
    opacity:.55;
}
/* ============================================================
   LAYOUT
   ============================================================ */
.pdf-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) 310px;
    gap:22px;
    align-items:start;
}
/* ============================================================
   IMAGE LIST
   ============================================================ */
.image-list-panel {
    min-width:0;
}
.section-heading {
    margin-bottom:12px;
}
.section-heading strong {
    display:block;
    font-size:15px;
}
.section-heading span {
    display:block;
    font-size:11px;
    opacity:.45;
    margin-top:4px;
}
.image-list {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
    gap:14px;
}
.empty-list {
    min-height:280px;
    border:1px dashed rgba(255,255,255,.08);
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:.4;
}
/* ============================================================
   IMAGE CARD
   ============================================================ */
.image-card {
    position:relative;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.012)
        );
    overflow:hidden;
    cursor:grab;
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}
.image-card:hover {
    border-color:rgba(129,120,255,.45);
    transform:translateY(-2px);
    box-shadow:
        0 14px 35px rgba(0,0,0,.18);
}
.image-card.dragging {
    opacity:.45;
    transform:scale(.97);
}
.image-card.drag-over {
    border-color:#8178ff;
    box-shadow:
        0 0 0 2px rgba(129,120,255,.15);
}
.image-preview {
    width:100%;
    aspect-ratio:4 / 3;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        linear-gradient(
            45deg,
            rgba(255,255,255,.035) 25%,
            transparent 25%,
            transparent 75%,
            rgba(255,255,255,.035) 75%
        ),
        linear-gradient(
            45deg,
            rgba(255,255,255,.035) 25%,
            transparent 25%,
            transparent 75%,
            rgba(255,255,255,.035) 75%
        );
    background-size:20px 20px;
    background-position:0 0,10px 10px;
    overflow:hidden;
}
.image-preview img {
    max-width:100%;
    max-height:100%;
    display:block;
    transition:transform .25s ease;
}
.image-number {
    position:absolute;
    left:9px;
    top:9px;
    min-width:25px;
    height:25px;
    padding:0 7px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:rgba(0,0,0,.7);
    backdrop-filter:blur(8px);
    font-size:11px;
    font-weight:700;
}
.image-actions {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:5px;
    padding:9px;
}
.image-name {
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:11px;
    opacity:.6;
}
.card-buttons {
    display:flex;
    gap:5px;
}
.card-btn {
    width:28px;
    height:28px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:7px;
    background:rgba(255,255,255,.025);
    color:inherit;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    transition:.2s ease;
}
.card-btn:hover {
    background:rgba(99,91,255,.15);
    border-color:rgba(129,120,255,.5);
}
.card-btn.delete:hover {
    background:rgba(255,70,90,.12);
    border-color:rgba(255,70,90,.35);
}
/* ============================================================
   SETTINGS
   ============================================================ */
.pdf-settings {
    padding:20px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.01)
        );
    position:sticky;
    top:20px;
}
.settings-title {
    font-size:16px;
    font-weight:700;
    padding-bottom:16px;
    margin-bottom:18px;
    border-bottom:1px solid rgba(255,255,255,.07);
}
.setting-group {
    margin-bottom:18px;
}
.setting-label {
    display:block;
    font-size:12px;
    font-weight:600;
    margin-bottom:8px;
    opacity:.75;
}
.setting-label-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:8px;
}
.setting-label-row .setting-label {
    margin:0;
}
.setting-label-row > span {
    font-size:11px;
    opacity:.5;
}
/* selects / input */
.pdf-settings select,
.pdf-settings input[type="text"] {
    width:100%;
    background:#111827;
    color:#fff;
    border:1px solid rgba(255,255,255,.1);
    border-radius:9px;
    padding:10px 11px;
    outline:none;
}
.pdf-settings select:focus,
.pdf-settings input[type="text"]:focus {
    border-color:#8178ff;
}
/* segmented */
.segmented {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
}
.segment {
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.025);
    color:inherit;
    border-radius:8px;
    padding:9px 7px;
    font-size:11px;
    cursor:pointer;
    transition:.2s ease;
}
.segment:hover {
    border-color:rgba(129,120,255,.5);
}
.segment.active {
    background:rgba(99,91,255,.18);
    border-color:#8178ff;
}
/* slider */
.pdf-settings input[type="range"] {
    width:100%;
    accent-color:#8178ff;
}
/* switch */
.switch-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;
    font-size:12px;
    cursor:pointer;
}
.switch-row input {
    position:absolute;
    opacity:0;
}
.switch {
    width:40px;
    height:22px;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    position:relative;
    transition:.2s ease;
}
.switch::after {
    content:"";
    position:absolute;
    width:16px;
    height:16px;
    left:3px;
    top:3px;
    border-radius:50%;
    background:#fff;
    transition:.2s ease;
}
.switch-row input:checked + .switch {
    background:#635bff;
}
.switch-row input:checked + .switch::after {
    transform:translateX(18px);
}
/* summary */
.pdf-summary {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:20px;
    margin-bottom:14px;
}
.pdf-summary > div {
    padding:10px;
    border-radius:9px;
    background:rgba(99,91,255,.07);
    border:1px solid rgba(129,120,255,.12);
}
.pdf-summary span {
    display:block;
    font-size:10px;
    opacity:.45;
    margin-bottom:4px;
}
.pdf-summary strong {
    font-size:12px;
}
/* generate */
.generate-btn {
    width:100%;
    border:0;
    border-radius:11px;
    padding:14px;
    background:
        linear-gradient(
            135deg,
            #635bff,
            #8178ff
        );
    color:#fff;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    box-shadow:
        0 12px 30px rgba(99,91,255,.22);
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;
}
.generate-btn:hover {
    transform:translateY(-1px);
    box-shadow:
        0 16px 38px rgba(99,91,255,.32);
}
.generate-btn:disabled {
    opacity:.55;
    cursor:wait;
    transform:none;
}
/* progress */
.progress-wrap {
    margin-top:14px;
}
.progress-track {
    height:5px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    overflow:hidden;
}
.progress-bar {
    height:100%;
    width:0;
    border-radius:999px;
    background:#8178ff;
    transition:width .2s ease;
}
.progress-wrap > span {
    display:block;
    margin-top:7px;
    text-align:center;
    font-size:10px;
    opacity:.5;
}
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px) {
    .pdf-layout {
        grid-template-columns:1fr;
    }
    .pdf-settings {
        position:static;
    }
}
@media (max-width:650px) {
    .pdf-upload {
        min-height:300px;
        padding:30px 18px;
    }
    .pdf-toolbar {
        align-items:flex-start;
        flex-direction:column;
    }
    .toolbar-left {
        width:100%;
    }
    .toolbar-left .btn {
        flex:1;
    }
    .image-list {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }
    .image-actions {
        padding:7px;
    }
    .image-name {
        font-size:10px;
    }
    .card-btn {
        width:26px;
        height:26px;
    }
}