.intro{max-width:800px}.intro h1{overflow-wrap:anywhere}.collage-workspace{display:grid;grid-template-columns:minmax(315px,.83fr) minmax(0,1.17fr);gap:22px;align-items:start}.control-column{display:grid;gap:22px}.drop-zone{min-height:155px}.card-heading{margin-bottom:17px}.photos-card .photo-list{max-height:255px}.photos-card .photo-row[aria-current=true]{border-color:#8eaaf0;background:#eff4ff}.photo-row{cursor:grab}.photo-row.drag-over{border-color:#2457d5;background:#e9efff}.photo-row .photo-info{display:flex;flex-direction:column}.photo-select{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:0;border:0;background:transparent;text-align:start;color:#293a57;cursor:pointer}.photo-select:hover .photo-name{text-decoration:underline}.row-actions{display:flex;align-items:center}.list-heading{align-items:center;margin-top:19px}.text-button{border:0;background:transparent;color:#3154aa;font-size:.88rem;font-weight:750;text-decoration:underline;text-underline-offset:3px;padding:6px;cursor:pointer}.text-button:hover{color:#183b92}.control-status{min-height:20px;margin:10px 0 0;font-size:.86rem;line-height:1.45;color:#526781}.control-status.error{color:#a43236}
.layout-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;border:0;padding:0;margin:0 0 23px}.layout-modes label{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;border:1px solid #cbd6e6;border-radius:9px;background:#fff;color:#293a57;cursor:pointer;font-size:.85rem;font-weight:750;line-height:1.2;padding:7px}.layout-modes label:has(input:checked){background:#eaf0ff;color:#163c9f;border-color:#819eee}.layout-modes input{position:absolute;opacity:0;width:1px;height:1px}.layout-modes label:focus-within{outline:3px solid #9ab7ff;outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.field-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:16px}.field-pair>div{min-width:0}.field-label{font-size:.88rem;line-height:1.3;margin-bottom:7px}.number-field,.color-field{width:100%;height:46px;border:1px solid #cbd6e6;border-radius:9px;background:#fff;color:#172741;padding:0 12px;font-weight:650}.color-field{padding:5px;cursor:pointer}.page-select{height:46px}.field-pair input[type=range]{width:100%;accent-color:#2457d5}.field-pair [hidden]{display:none!important}
.preview-card{min-width:0}.preview-frame{height:400px;max-height:62vh;min-height:260px;overflow:auto;border:1px solid #dce4ef;border-radius:12px;background-color:#f8faff;background-image:linear-gradient(45deg,#eef2f8 25%,transparent 25%),linear-gradient(-45deg,#eef2f8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef2f8 75%),linear-gradient(-45deg,transparent 75%,#eef2f8 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;padding:12px;display:flex;align-items:flex-start;justify-content:flex-start}.preview-frame:has(.empty-preview:not([hidden])){align-items:center;justify-content:center}.preview-frame canvas{display:block;flex:none;max-width:none;height:auto;box-shadow:0 5px 16px #15234030;touch-action:none}.empty-preview{max-width:330px;text-align:center;color:#687790;line-height:1.5;background:#ffffffed;padding:20px;border-radius:9px}.preview-card .field-hint{margin:11px 0 0;font-size:.84rem}.focus-controls{border:1px solid #dce4ef;border-radius:11px;margin-top:18px;padding:12px 15px;background:#f8faff}.focus-title{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.9rem;min-width:0}.focus-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.focus-controls .field-pair{margin-top:10px}.export-controls{margin-top:22px;border-top:1px solid #e5eaf2;padding-top:6px}.quality-row{display:flex;align-items:center;gap:7px;height:46px;color:#3154aa;font-size:.86rem;font-weight:750}.quality-row input{min-width:0;flex:1}.create-button{margin-top:21px}.preview-card .count{font-variant-numeric:tabular-nums;white-space:normal;text-align:end}
[dir=rtl] .page-select{background-position:left 12px center;padding-left:33px;padding-right:14px}
@media(max-width:950px){.collage-workspace{grid-template-columns:1fr}.control-column{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.preview-card{grid-column:1}.preview-frame{height:380px}}
@media(max-width:690px){.control-column{grid-template-columns:1fr;gap:15px}.collage-workspace{gap:15px}.preview-frame{height:330px}.card h2{overflow-wrap:anywhere}}
@media(max-width:420px){.layout-modes{grid-template-columns:1fr}.layout-modes label{min-height:39px}.field-pair{gap:10px}}