:root{--bg:#f8f9fa;--surface:#ffffff;--text:#1a1a1a;--muted:#6b7280;--muted-light:#9ca3af;--border:#e5e7eb;--soft-border:#f0f1f4;--accent:#4f46e5;--accent-dark:#4338ca;--accent-soft:#eef2ff;--danger:#dc2626}*{box-sizing:border-box}body,html{margin:0;min-height:100%}body{background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}button,input,textarea{font:inherit}button{border:0}.app-shell,.login-shell{min-height:100vh}.login-shell{padding:24px;display:grid;place-items:center;background:var(--bg)}.login-card{width:min(100%,380px);padding:28px;display:grid;justify-items:center;grid-gap:16px;gap:16px;background:var(--surface);border:1px solid var(--soft-border);border-radius:18px;box-shadow:0 18px 52px rgba(15,23,42,.12)}.login-title{display:grid;grid-gap:6px;gap:6px;text-align:center}.login-title h1{margin:0;color:var(--text);font-size:22px}.login-title p{margin:0;color:var(--muted);font-size:13px}.login-input{width:100%;height:42px;padding:0 13px;color:#111827;background:#ffffff;border:1px solid var(--border);border-radius:12px;outline:none}.login-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,70,229,.14)}.login-error{width:100%;padding:9px 11px;color:var(--danger);background:#fef2f2;border:1px solid #fecaca;border-radius:10px;font-size:13px;text-align:center}.login-button{width:100%}.topbar{position:-webkit-sticky;position:sticky;top:0;z-index:10;background:var(--surface);border-bottom:1px solid var(--border)}.footer,.topbar-inner,.workspace{width:min(1440px,calc(100% - 12px));margin:0 auto}.topbar-inner{height:46px;justify-content:space-between}.brand,.topbar-inner{display:flex;align-items:center}.brand{gap:10px}.brand-mark{width:30px;height:30px;display:grid;place-items:center;color:white;background:var(--accent);border-radius:8px}.brand h1{margin:0;font-size:18px;line-height:1.4;font-weight:700;letter-spacing:0}.workspace{padding:8px 0 0}.tool-grid{display:grid;grid-template-columns:minmax(500px,5.3fr) minmax(0,6.7fr);grid-gap:10px;gap:10px}.left-column{display:grid;grid-gap:12px;gap:12px}.panel,.result-panel{background:var(--surface);border:1px solid var(--soft-border);border-radius:16px;box-shadow:0 1px 3px rgba(15,23,42,.06)}.panel{padding:10px}.settings-panel{display:grid;grid-gap:8px;gap:8px}.control-label,.panel-title{display:flex;align-items:center;gap:8px}.panel-title{margin-bottom:6px;color:var(--accent)}.settings-panel>.panel-title{margin-bottom:0}.panel-title h2{margin:0;color:var(--text);font-size:15px;line-height:1.4;font-weight:700}.upload-zone{width:100%;min-height:66px;padding:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#4b5563;background:white;border:2px dashed var(--border);border-radius:12px;cursor:pointer;transition:border-color .16s ease,background .16s ease}.upload-zone:hover{background:#f9fafb;border-color:#818cf8}.upload-zone.drag-over{color:var(--accent);background:#eef2ff;border-color:var(--accent);box-shadow:inset 0 0 0 1px rgba(79,70,229,.18)}.upload-zone.drag-over .upload-icon{color:#ffffff;background:var(--accent)}.upload-zone strong{font-size:14px}.upload-zone span{color:var(--muted-light);font-size:12px}.upload-icon{width:28px;height:28px;display:grid;place-items:center;background:#f3f4f6;border-radius:999px}.source-preview{max-height:78px;max-width:100%;border-radius:8px;box-shadow:0 4px 12px rgba(15,23,42,.12)}.control-group{display:grid;grid-gap:5px;gap:5px}.control-label{color:#4b5563;font-size:12px;line-height:1.2;font-weight:800;letter-spacing:0}.choice-grid{display:grid;grid-gap:5px;gap:5px}.doc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.size-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.choice-button{min-height:30px;padding:5px 7px;color:#374151;background:#f9fafb;border:1px solid var(--border);border-radius:10px;cursor:pointer;font-size:13px;font-weight:700;text-align:center;transition:border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease}.choice-button:hover{border-color:#a5b4fc}.choice-button.selected{color:var(--accent);background:var(--accent-soft);border-color:#a5b4fc;box-shadow:inset 0 0 0 1px rgba(79,70,229,.1)}.size-button{min-height:38px;display:grid;grid-gap:1px;gap:1px}.size-button small{color:var(--muted-light);font-size:10px;font-weight:600}.custom-size-row{display:grid;grid-template-columns:1fr 1fr;grid-gap:10px;gap:10px}.custom-size-row input{width:100%;padding:8px 10px;color:#374151;border:1px solid var(--border);border-radius:10px;outline:none}.custom-size-row input:focus,.prompt-box:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,70,229,.14)}.color-row{display:flex;flex-wrap:wrap;gap:8px}.color-option{display:grid;justify-items:center;grid-gap:4px;gap:4px;color:#6b7280;background:transparent;cursor:pointer}.color-option>span{position:relative;width:30px;height:30px;display:grid;place-items:center;color:white;border:2px solid transparent;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.color-option:hover>span{transform:scale(1.05)}.color-option.selected>span{border-color:var(--accent);transform:scale(1.08);box-shadow:0 6px 16px rgba(79,70,229,.2)}.color-option:first-child>span{color:var(--accent)}.color-option small{font-size:11px;font-weight:700}.color-option input{position:absolute;inset:0;width:30px;height:30px;opacity:0;cursor:pointer}.prompt-box{width:100%;min-height:74px;padding:8px 10px;color:#273142;background:#fff;border:1px solid var(--border);border-radius:12px;resize:vertical;outline:none;font-size:13px;line-height:1.35}.secondary-text-button{justify-self:start;padding:0;color:var(--accent);background:transparent;cursor:pointer;font-size:12px;font-weight:700}.actions{display:grid;grid-template-columns:1fr 1fr;grid-gap:7px;gap:7px}.generation-timer{min-height:34px;padding:7px 10px;display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;overflow:hidden;color:#4f46e5;background:#f4f4ff;border:1px solid rgba(79,70,229,.16);border-radius:12px}.generation-timer.is-active:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.78),transparent);animation:shimmer 1.7s ease-in-out infinite}.generation-timer span{position:relative;color:#64748b;font-size:12px;font-weight:800}.generation-timer strong{position:relative;color:#312e81;font-size:14px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.download-button,.mini-action-button,.primary-action,.secondary-action{min-height:34px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;cursor:pointer;font-size:13px;font-weight:800;transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease,opacity .16s ease}.primary-action{position:relative;overflow:hidden;color:white;background:var(--accent);box-shadow:0 10px 20px rgba(79,70,229,.18)}.primary-action.generating-action:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 10%,rgba(255,255,255,.26) 40%,transparent 70%);animation:shimmer 1.35s ease-in-out infinite}.primary-action,.primary-action>svg{isolation:isolate}.primary-action:hover{background:var(--accent-dark)}.secondary-action{color:#374151;background:#ffffff;border:2px solid var(--border)}.secondary-action:hover{color:var(--accent);border-color:var(--accent)}.download-button:active,.mini-action-button:active,.primary-action:active,.secondary-action:active{transform:scale(.98)}.download-button:disabled,.mini-action-button:disabled,.primary-action:disabled,.secondary-action:disabled{color:#9ca3af;background:#f3f4f6;border-color:#f0f1f4;box-shadow:none;cursor:not-allowed;transform:none}.result-panel{padding:16px;display:flex;flex-direction:column}.result-header{margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:16px}.result-header .panel-title{margin-bottom:0}.result-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}.download-button{min-height:34px;padding:0 12px}.download-button,.mini-action-button{color:var(--accent);background:var(--accent-soft)}.mini-action-button{min-height:28px;padding:0 9px;font-size:12px}.preview-stack{display:grid;grid-template-columns:minmax(180px,.72fr) minmax(0,1.28fr);grid-gap:10px;gap:10px}.preview-card{min-width:0;display:grid;grid-gap:7px;gap:7px}.preview-card.primary,.preview-card.wide{grid-column:1/-1}.preview-card.primary .preview-stage{min-height:315px}.preview-card.primary .crop-editor{max-width:min(94%,520px);max-height:270px}.preview-card.primary .editable-result-image{max-height:254px}.preview-card-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.preview-card-header h3{margin:0;color:#111827;font-size:13px;line-height:1.3;font-weight:800}.preview-card-header span{color:#8b95a5;font-size:11px;font-weight:700;white-space:nowrap}.preview-card-tools{min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.preview-stage{min-height:205px;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--soft-border);border-radius:12px;transition:background-color .18s ease}.empty-state{max-width:380px;padding:14px;display:grid;justify-items:center;grid-gap:12px;gap:12px;color:rgba(17,24,39,.52);text-align:center}.empty-state strong{color:rgba(17,24,39,.72)}.empty-state span{color:rgba(17,24,39,.54);font-size:12px;line-height:1.55}.loading-state{min-width:min(86%,340px)}.photo-processing-animation{display:grid;justify-items:center;grid-gap:10px;gap:10px}.photo-frame-skeleton{position:relative;width:96px;height:124px;overflow:hidden;background:linear-gradient(180deg,#eef2ff,#ffffff);border:6px solid #ffffff;border-radius:10px;box-shadow:0 16px 32px rgba(79,70,229,.16)}.photo-frame-skeleton:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 22%,rgba(79,70,229,.12),transparent 36%);animation:softPulse 1.8s ease-in-out infinite}.face-skeleton{top:24px;width:34px;height:40px;background:#c7d2fe;border-radius:45% 45% 48% 48%}.face-skeleton,.shoulder-skeleton{position:absolute;left:50%;transform:translateX(-50%)}.shoulder-skeleton{bottom:18px;width:66px;height:34px;background:#a5b4fc;border-radius:999px 999px 18px 18px}.scan-line{position:absolute;left:8px;right:8px;height:3px;background:rgba(79,70,229,.72);border-radius:999px;box-shadow:0 0 18px rgba(79,70,229,.48);animation:scanPhoto 1.55s ease-in-out infinite}.processing-dots{display:flex;align-items:center;gap:7px}.processing-dots span{width:7px;height:7px;background:#6366f1;border-radius:999px;animation:dotBounce 1s ease-in-out infinite}.processing-dots span:nth-child(2){animation-delay:.12s}.processing-dots span:nth-child(3){animation-delay:.24s}.error-state strong{color:var(--danger)}.result-image{max-width:min(82%,230px);max-height:176px;object-fit:contain;border:8px solid white;border-radius:10px;box-shadow:0 16px 32px rgba(15,23,42,.18)}.image-preview-button{max-width:100%;display:inline-flex;align-items:center;justify-content:center;padding:0;background:transparent;cursor:zoom-in}.image-preview-button:disabled{cursor:default}.image-preview-button:focus-visible{outline:3px solid #4f46e5;outline-offset:4px;border-radius:12px}.crop-editor-shell{width:100%;display:grid;justify-items:center;grid-gap:7px;gap:7px;padding:8px}.crop-editor{position:relative;max-width:min(88%,320px);max-height:176px;overflow:hidden;border:6px solid white;border-radius:10px;box-shadow:0 16px 32px rgba(15,23,42,.18);touch-action:none}.editable-result-image{display:block;width:auto;height:auto;max-width:100%;max-height:164px;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}.crop-mask{pointer-events:none;position:absolute;inset:0}.crop-box{position:absolute;z-index:2;cursor:move;background:rgba(255,255,255,.01);border:2px solid #ffffff;border-radius:4px;box-shadow:0 0 0 9999px rgba(15,23,42,.38),0 0 0 1px rgba(79,70,229,.95);outline:1px dashed rgba(79,70,229,.9);outline-offset:-7px;touch-action:none;transform-origin:center}.crop-box:focus-visible{outline:3px solid #4f46e5;outline-offset:2px}.crop-handle{position:absolute;z-index:3;width:14px;height:14px;background:#ffffff;border:2px solid #4f46e5;border-radius:999px;cursor:nwse-resize}.crop-handle.top-left{top:-8px;left:-8px}.crop-handle.top-right{top:-8px;right:-8px;cursor:nesw-resize}.crop-handle.bottom-left{bottom:-8px;left:-8px;cursor:nesw-resize}.crop-handle.bottom-right{right:-8px;bottom:-8px}.crop-rotate-handle{z-index:4;bottom:10px;width:18px;background:#ffffff;border:2px solid #4f46e5;border-radius:999px;cursor:-webkit-grab;cursor:grab;box-shadow:0 4px 10px rgba(79,70,229,.25)}.crop-rotate-handle,.crop-rotate-handle:after{position:absolute;left:50%;height:18px;transform:translateX(-50%)}.crop-rotate-handle:after{content:"";bottom:18px;width:2px;background:#4f46e5}.crop-help{margin:0;color:#6366f1;font-size:11px;font-weight:700;text-align:center}.layout-image{width:min(92%,430px);max-height:176px;object-fit:contain;border:6px solid white;border-radius:10px;box-shadow:0 16px 32px rgba(15,23,42,.16)}.image-modal{position:fixed;z-index:50;inset:0;padding:28px;display:grid;place-items:center;background:rgba(15,23,42,.72)}.image-modal-card{width:min(96vw,920px);max-height:92vh;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;background:#ffffff;border-radius:16px;box-shadow:0 24px 70px rgba(15,23,42,.38)}.image-modal-header{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--soft-border)}.image-modal-header h3{margin:0;color:#111827;font-size:15px}.image-modal-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.modal-action-button{min-height:36px;padding:0 12px;gap:7px;color:var(--accent);background:var(--accent-soft);font-size:13px;font-weight:800}.modal-action-button,.modal-close-button{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;cursor:pointer}.modal-close-button{width:36px;height:36px;color:#475569;background:#f8fafc}.image-modal-card img{max-width:100%;max-height:calc(92vh - 65px);margin:auto;display:block;object-fit:contain}.image-modal-card img.modal-layout-image{border:1px solid #111827;box-shadow:0 0 0 1px #ffffff,0 18px 42px rgba(15,23,42,.22)}.result-meta{margin-top:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:10px;gap:10px}.result-meta div{padding:9px;display:grid;grid-gap:4px;gap:4px;justify-items:center;background:#f9fafb;border:1px solid var(--soft-border);border-radius:12px;text-align:center}.result-meta span{color:#9ca3af;font-size:10px;font-weight:800}.result-meta strong{color:#374151;font-size:13px}.footer{padding:10px 0;color:#9ca3af;border-top:1px solid var(--border);margin-top:10px;text-align:center;font-size:14px}.spinning{animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}@keyframes shimmer{0%{transform:translateX(-110%)}to{transform:translateX(110%)}}@keyframes scanPhoto{0%,to{top:12px}50%{top:104px}}@keyframes softPulse{0%,to{opacity:.55}50%{opacity:1}}@keyframes dotBounce{0%,80%,to{transform:translateY(0);opacity:.45}40%{transform:translateY(-5px);opacity:1}}@media (max-width:980px){.tool-grid{grid-template-columns:1fr}.doc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.size-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.result-panel{min-height:auto}.preview-stack{grid-template-columns:1fr}}@media (max-width:620px){.footer,.topbar-inner,.workspace{width:min(100% - 24px,1152px)}.workspace{padding-top:20px}.panel,.result-panel{padding:18px;border-radius:14px}.actions,.doc-grid,.result-meta,.size-grid{grid-template-columns:1fr}.result-header{align-items:stretch;flex-direction:column}.preview-stage{min-height:260px}.result-image{max-width:88%}}