body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:#f7f4fb;display:flex;flex-direction:column;align-items:center;height:100vh;overflow:hidden;margin:0;padding:24px;box-sizing:border-box}.btn.btn-sm{padding:6px 10px;font-size:12px;min-width:auto}.app-header h1{margin:0;font-size:28px}.frame-type{display:flex;gap:8px;align-items:center}.frame-type select{padding:8px 10px;border-radius:8px;border:1px solid #ddd;background:#fff}.container{background:transparent;padding:0;border-radius:0;box-shadow:none;text-align:left;width:100%;max-width:none;overflow:visible}.container.wide{max-width:1120px}#left-sidebar{left:0}#left-sidebar,#right-sidebar{position:fixed;top:0;width:300px;height:100vh;overflow:auto;background:#fff;border:1px solid #e5e7eb;border-radius:0;padding:16px;box-shadow:0 6px 20px rgba(0,0,0,.06)}#right-sidebar{right:0}.thumb-item{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:8px;cursor:grab}.thumb-item:active{cursor:grabbing}.thumb-grid img.sidebar-thumb{width:100%;height:100%;object-fit:cover;border:1px solid #ececec}.thumb-preview-btn{position:absolute;top:6px;right:6px;width:18px;height:18px;padding:0;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.92);border:1px solid #e5e7eb;color:#333}.thumb-preview-btn svg{width:12px;height:12px}#folder-images.loading{gap:12px;min-height:60vh}#folder-images.loading,.thumb-loading{display:flex;flex-direction:column;align-items:center;justify-content:center}.thumb-loading{gap:10px;padding:12px;color:#666}.thumb-loading-spinner{width:24px;height:24px;border:3px solid #e5e7eb;border-top-color:#9ca3af;border-radius:50%;animation:spin .9s linear infinite}.thumb-loading-text{font-size:12px}.thumb-item.marked{outline:3px solid #1e3a8a;outline-offset:2px;border-radius:8px}@keyframes spin{to{transform:rotate(1turn)}}.thumb-skeleton{width:100%;height:120px;border-radius:8px;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 37%,#f3f4f6 63%);background-size:400% 100%;animation:shimmer 1.2s ease-in-out infinite}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.editor-grid{display:grid;grid-template-columns:minmax(320px,520px) 1fr;gap:28px;align-items:start}.editor-left{gap:12px}.editor-left,.editor-right{display:flex;flex-direction:column}.editor-right{gap:20px;padding:24px;border-radius:24px;background:linear-gradient(180deg,#ffffff,#eff6ff 50%,#dbeafe)}@media (max-width:640px){.editor-grid{grid-template-columns:1fr}.editor-right{padding:16px}}h1{color:#1c1e21;margin-bottom:10px}.brand-script{font-family:var(--font-brand-script),cursive;font-weight:700;letter-spacing:.4px}.brand-title{font-size:36px;line-height:1.1;margin:0 0 16px;text-align:center}p.instructions{color:#606770;margin-bottom:20px}#editor-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.photo-count{display:inline-flex;align-items:center;gap:8px;background:#ffffff;border:1px solid #d1d5db;box-shadow:0 4px 12px rgba(0,0,0,.12);border-radius:12px;padding:8px 12px;margin-bottom:12px}.photo-count .icon{font-size:18px}.photo-count select{border:none;background:transparent;font-weight:600}.grid-icon{color:#374151;opacity:1}#frame-type-select{color:#111827}#frame-type-select option{color:#111827;background-color:#ffffff}#frame-type-select:focus{outline:none}.section-title{font-weight:600;margin:8px 0 12px}.color-palette{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}.swatch{width:22px;height:22px;border-radius:50%;border:2px solid rgba(0,0,0,.15);box-shadow:0 2px 6px rgba(0,0,0,.08)}.swatch.multicolor{background:conic-gradient(#ff0000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000)}.sticker-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:20px}.sticker-item{background:#fff;border:2px solid #f4d28f;border-radius:10px;padding:8px;font-size:18px;box-shadow:0 2px 6px rgba(0,0,0,.08)}.actions{display:flex;gap:16px;align-items:center}.btn-primary{background-color:#1e3a8a}.btn-outline{background:transparent}#wa-keypad{position:fixed;z-index:50;display:none;background:#ffffff;border:1px solid #d1d5db;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.15);padding:10px}#wa-keypad .key-grid{display:grid;grid-template-columns:repeat(3,60px);gap:8px}#wa-keypad .key-actions{display:flex;justify-content:flex-end;margin-top:8px}#wa-keypad .key-btn{height:48px;min-width:60px;border-radius:10px;border:1px solid #e5e7eb;background:#f9fafb;color:#111827;font-weight:600}#wa-keypad .key-btn:hover{background:#f3f4f6}#wa-keypad .key-btn.done{background:#1e3a8a;color:#ffffff;border-color:#1e3a8a}#preview-canvas{background-color:#e0e0e0;border-radius:8px;width:auto;height:auto;max-width:540px;max-height:55vh;margin:0 auto;display:block}#preview-canvas.landscape{max-width:980px;height:auto}#preview-canvas.active-drag{cursor:grabbing}.zoom-controls{display:flex;align-items:center;justify-content:center;gap:10px;margin:15px auto;max-width:350px}.zoom-controls label{font-weight:600}.controls{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:20px}#image-upload{display:none}#folder-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.sidebar-controls{display:flex;flex-direction:column;gap:8px}.drive-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.drive-controls .folder-btn{height:38px;padding:0 14px;flex:1 1 auto;min-width:0}.drive-controls #google-login-btn{height:38px;padding:0 14px;border-radius:12px;display:inline-flex;align-items:center}#right-sidebar #cancel-btn,#right-sidebar #done-btn{height:38px;padding:0 14px;border-radius:12px;align-items:center;justify-content:center;font-size:12px}#right-sidebar #cancel-btn:not(.hidden),#right-sidebar #done-btn{display:inline-flex}.drive-controls #drive-upload-btn{flex:0 0 auto}.drive-controls #google-login-btn,.drive-controls #upload-progress,.drive-controls .drive-name-input,.drive-controls .folder-count{flex:1 1 100%}.drive-controls .folder-btn span{font-size:12px}@media (max-width:640px){.drive-controls .folder-btn{height:34px;padding:0 12px}.drive-controls .folder-btn span{font-size:11px}.drive-controls #google-login-btn{height:34px;padding:0 12px;border-radius:12px}#right-sidebar #cancel-btn,#right-sidebar #done-btn{height:34px;padding:0 12px;border-radius:12px;font-size:11px}#right-sidebar #cancel-btn:not(.hidden),#right-sidebar #done-btn{display:inline-flex}}.drive-name-input{width:clamp(160px,24vw,220px)}.folder-count{font-size:12px;color:#606770;background:#fff;border:1px solid #e5e7eb;border-radius:999px;padding:4px 8px}.folder-count:empty{display:none}.btn.btn-icon[disabled]{opacity:.5;cursor:not-allowed}.folder-btn{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(180deg,#3b82f6,#1e3a8a);color:#fff;padding:10px 14px;border-radius:12px;box-shadow:0 6px 16px rgba(30,58,138,.28);font-weight:600;user-select:none}.folder-btn.disabled{opacity:.6;cursor:not-allowed;filter:brightness(.96)}.btn.btn-loading{pointer-events:none;opacity:.85}.btn-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.6);border-top-color:#fff;border-radius:50%;animation:spin .9s linear infinite;display:inline-block}.btn.btn-primary.btn-loading .btn-spinner{border-color:#fff rgba(255,255,255,.6) rgba(255,255,255,.6)}.btn.btn-loading .btn-label{margin-left:8px}.folder-btn img{width:18px;height:18px;filter:brightness(0) invert(1)}.folder-btn:hover{filter:brightness(1.02);transform:translateY(-1px)}.folder-btn:active{transform:translateY(0);filter:brightness(.98)}.folder-btn:focus-visible{outline:3px solid #dbeafe;outline-offset:2px;box-shadow:0 0 0 2px #1e3a8a}.btn{color:#fff;padding:clamp(10px,1.5vw,14px) clamp(14px,3vw,20px);border-radius:999px;font-weight:700;border:none;transition:all .2s ease-in-out;font-size:clamp(14px,1.6vw,16px);min-width:clamp(110px,22vw,160px)}@media (max-width:640px){.btn{padding:10px 14px;font-size:14px;min-width:110px}}.btn-primary{background:linear-gradient(180deg,#1e3a8a,#172554);box-shadow:0 8px 20px rgba(30,58,138,.35)}.btn-primary:hover{filter:brightness(1.05)}.btn:disabled,.btn[disabled]{opacity:.55;cursor:not-allowed;filter:none;box-shadow:none}.btn-primary:disabled,.btn-primary[disabled]{background:linear-gradient(180deg,#bfdbfe,#93c5fd);color:#ffffff}.btn-secondary{background-color:#6c63ff}.btn-secondary:hover{filter:brightness(1.06)}.btn-outline{background:#fff;color:#1e3a8a;border:2px solid #1e3a8a;box-shadow:0 6px 16px rgba(30,58,138,.18)}.btn.btn-icon{min-width:auto;padding:8px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:0}.btn.btn-icon svg{width:18px;height:18px;display:block}.btn.btn-icon:focus-visible{outline:3px solid #dbeafe;outline-offset:2px;box-shadow:0 0 0 2px #1e3a8a}@media (max-width:640px){.btn.btn-icon{padding:6px}.btn.btn-icon svg{width:16px;height:16px}}#download-btn{background-color:#28a745}#download-btn:hover{background-color:#218838}.modal.hidden{display:none}.modal{position:fixed;inset:0;background:rgba(0,0,0,.64);justify-content:center;padding:20px;z-index:1000}.modal,.modal-content{display:flex;align-items:center}.modal-content{position:relative;background:#ffffff;border-radius:16px;padding:22px 24px;flex-direction:column;max-width:min(96vw,1200px);width:auto;max-height:90vh;text-align:center;box-shadow:0 24px 48px rgba(0,0,0,.28);border:1px solid #e5e7eb}.modal-content h3{color:#111827;font-size:20px;font-weight:700;margin:0 0 12px}.modal-content .confirm-details,.modal-content p{color:#1f2937}.modal-actions .btn{min-width:200px}.modal-content .confirm-list{text-align:left;margin:10px auto 16px;padding-left:18px;list-style:disc}.modal-content .confirm-list li{margin:4px 0}.modal-close{top:12px;right:12px;background:#333}.modal-close,.modal-nav{position:absolute;color:#fff;border:none;border-radius:999px;width:44px;height:44px;font-size:18px;line-height:44px;z-index:1001}.modal-nav{top:50%;transform:translateY(-50%);background:rgba(51,51,51,.85);display:none}.modal-prev{left:12px}.modal-next{right:12px}.modal-nav:hover{background:rgba(51,51,51,.92)}.modal-zoom{margin-top:12px;display:flex;align-items:center;gap:8px;justify-content:center}.modal-zoom input{width:60%}#preview-image{display:block;margin:0 auto;max-width:95vw;max-height:85vh;height:auto;object-fit:contain;transform-origin:center}#download-btn,#preview-btn{padding:clamp(6px,1.4vw,10px) clamp(8px,2.2vw,12px);font-size:clamp(11px,1.8vw,13px);min-width:clamp(84px,16vw,108px)}#download-btn.btn-icon,#preview-btn.btn-icon{min-width:auto;padding:8px}@media (max-width:640px){#download-btn.btn-icon,#preview-btn.btn-icon{padding:6px}}.floating-actions{position:fixed;right:calc(320px + 24px);top:24px;display:flex;flex-direction:column;gap:12px;z-index:20}.floating-actions .floating-row{display:flex;justify-content:flex-end;gap:12px}@media (max-width:640px){.floating-actions{right:16px;top:16px;gap:10px}.floating-actions .floating-row{gap:10px}}.floating-actions .download-large{padding:12px}.floating-actions .download-large svg{width:22px;height:22px}@media (max-width:640px){#download-btn,#preview-btn{padding:4px 8px;font-size:11px;min-width:78px}}#custom-text-size-slider{-webkit-appearance:none;appearance:none;background:#e2e8f0;border-radius:9999px;outline:none}#custom-text-size-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#1e3a8a;cursor:pointer;border:2px solid #ffffff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s ease,background-color .15s ease}#custom-text-size-slider::-webkit-slider-thumb:hover{background:#1d4ed8;transform:scale(1.15)}#custom-text-size-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#1e3a8a;cursor:pointer;border:2px solid #ffffff;box-shadow:0 1px 3px rgba(0,0,0,.25)}#custom-text-size-slider:disabled::-webkit-slider-thumb{background:#cbd5e1;cursor:not-allowed;transform:none;box-shadow:none}#custom-text-size-slider:disabled::-moz-range-thumb{background:#cbd5e1;cursor:not-allowed;box-shadow:none}#custom-text-bold-btn:disabled,#custom-text-italic-btn:disabled{background-color:#f1f5f9!important;color:#94a3b8!important;border-color:#e2e8f0!important;cursor:not-allowed!important;box-shadow:none!important;opacity:.7!important}