/* ===== Base / Reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background:#0d1117;color:#e6edf3;min-height:100vh;overflow-x:hidden}

/* ===== Background blobs ===== */
.background-animation{position:fixed;inset:0;z-index:0;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.18;animation:float 20s infinite ease-in-out}
.blob-1{width:500px;height:500px;background:#58a6ff;top:-100px;left:-100px}
.blob-2{width:400px;height:400px;background:#ff7b72;bottom:-80px;right:-60px;animation-delay:-7s}
.blob-3{width:350px;height:350px;background:#7ee787;top:40%;left:60%;animation-delay:-14s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-30px) scale(1.05)}66%{transform:translate(-20px,20px) scale(.95)}}

/* ===== Top bar ===== */
.top-bar{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:16px 32px;background:rgba(22,27,34,.85);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}
.top-bar h1{font-size:1.3rem;font-weight:700;color:#e6edf3}
.top-bar h1 span{background:linear-gradient(135deg,#58a6ff,#7ee787);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.back-link{color:#58a6ff;text-decoration:none;font-weight:500;font-size:.95rem;transition:opacity .2s}
.back-link:hover{opacity:.7}

/* ===== Layout grid ===== */
.layout-container{position:relative;z-index:5;display:flex;gap:24px;padding:24px 32px;max-width:1400px;margin:0 auto;align-items:flex-start}
.a4-wrapper{flex:1;display:flex;justify-content:center}

/* A4 page — padding is set dynamically via JS */
.a4-page{width:595px;height:842px;background:#fff;border-radius:4px;box-shadow:0 8px 40px rgba(0,0,0,.5);position:relative;overflow:hidden;display:flex;flex-direction:column}

/* Inner content area with dynamic padding */
.a4-inner{flex:1;display:flex;flex-direction:column;justify-content:flex-start}

/* ===== Card rows ===== */
.card-row{display:flex;align-items:flex-start;gap:2px;justify-content:flex-start;margin-bottom:0}

/* Card slot: NO border when image is present */
.card-slot{flex:1;min-height:60px;border:1.5px dashed rgba(0,0,0,.15);border-radius:2px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;position:relative;overflow:hidden;background:rgba(0,0,0,.02)}
.card-slot:hover{border-color:#58a6ff;background:rgba(88,166,255,.05)}

/* When slot has an image: NO border at all */
.card-slot.has-image{border:none;border-radius:0;background:transparent}
.card-slot img{width:100%;height:100%;object-fit:contain;display:block}
.slot-label{font-size:10px;color:rgba(0,0,0,.3);font-weight:600;text-transform:uppercase;letter-spacing:.5px;pointer-events:none}
.card-slot.has-image .slot-label{display:none}

/* ===== Controls sidebar ===== */
.controls-sidebar{width:270px;position:sticky;top:24px;z-index:10}
.controls-sidebar h3{font-size:1rem;font-weight:700;margin-bottom:16px;color:#58a6ff}
.row-controls{background:rgba(22,27,34,.75);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:14px;margin-bottom:10px}
.row-controls h4{font-size:.85rem;font-weight:600;margin-bottom:8px;color:#7ee787}
.row-controls label{display:flex;justify-content:space-between;font-size:.78rem;color:#8b949e;margin-bottom:4px}
.ctrl-val{color:#58a6ff;font-weight:600}
.row-controls input[type="range"]{width:100%;margin-bottom:8px;accent-color:#58a6ff;height:4px;cursor:pointer}

/* ===== Buttons ===== */
.btn{padding:10px 24px;border:none;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s}
.btn.primary{background:linear-gradient(135deg,#58a6ff,#388bfd);color:#fff}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(56,139,253,.3)}
.btn.secondary{background:rgba(255,255,255,.06);color:#8b949e;border:1px solid rgba(255,255,255,.1)}
.btn.secondary:hover{background:rgba(255,255,255,.1);color:#e6edf3}

/* ===== Modal ===== */
.modal-overlay{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.75);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center}
.modal-overlay.hidden{display:none}
.modal-content{background:rgba(22,27,34,.92);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:24px;max-width:900px;width:90%;height:85vh;overflow-y:auto;display:flex;flex-direction:column}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.modal-header h2{font-size:1.2rem;font-weight:700}
.modal-close-btn{background:none;border:none;color:#8b949e;font-size:1.4rem;cursor:pointer;padding:4px 8px}
.modal-close-btn:hover{color:#e6edf3}
.modal-canvas-wrap{width:100%;flex:1;min-height:0;overflow:hidden;border-radius:8px;margin-bottom:12px;display:flex;align-items:center;justify-content:center}
.modal-canvas-wrap canvas{max-width:100%;max-height:100%;display:block;border-radius:8px}
.actions{display:flex;gap:12px;justify-content:flex-end;margin-top:12px}

/* ===== Slider (modal) ===== */
.slider-control{margin:8px 0}
.slider-control label{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.slider-label{font-size:.85rem;color:#8b949e}
.slider-value{font-size:.85rem;color:#58a6ff;font-weight:600}
.slider-row{display:flex;align-items:center;gap:10px}
.slider-tag{font-size:.7rem;color:#484f58;text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}
.slider-row input[type="range"]{flex:1;accent-color:#58a6ff;height:4px;cursor:pointer}

/* ===== Loader ===== */
.loader-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.loader-overlay.hidden{display:none}
.spinner{width:48px;height:48px;border:3px solid rgba(255,255,255,.1);border-top-color:#58a6ff;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-overlay p{color:#8b949e;font-size:.9rem}

/* ===== Global Toggle Switch ===== */
.global-toggle{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);margin-bottom:20px;padding:14px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}
.ctrl-title{font-size:.92rem;font-weight:600;color:#c9d1d9}
.switch{position:relative;display:inline-block;width:44px;height:24px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;inset:0;background-color:#30363d;transition:.3s;border-radius:24px;border:1px solid rgba(255,255,255,.1)}
.slider:before{position:absolute;content:"";height:16px;width:16px;left:3px;bottom:3px;background-color:#8b949e;transition:.3s;border-radius:50%}
input:checked + .slider{background-color:#238636;border-color:rgba(255,255,255,.1)}
input:checked + .slider:before{transform:translateX(20px);background-color:#fff}
.slider.round{border-radius:24px}
.slider.round:before{border-radius:50%}

/* ===== Responsive ===== */
@media(max-width:900px){
    .layout-container{flex-direction:column;padding:16px}
    .controls-sidebar{width:100%;position:static}
    .a4-page{width:100%;height:auto;aspect-ratio:210/297}
}