.preview-stack{display:flex;flex-direction:column;gap:16px}.crop-container{background:#09090b;border-radius:var(--radius-xl);overflow:hidden;position:relative;touch-action:none;border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 25px -5px #0003,0 10px 10px -5px #0000001a;margin-bottom:8px}.adjust-label{position:absolute;top:12px;left:12px;background:#0009;color:#fff;padding:4px 10px;border-radius:20px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;z-index:10;pointer-events:none}.crop-matted{display:flex;align-items:center;justify-content:center;width:100%;max-width:340px;margin:0 auto;position:relative;overflow:hidden;background:#111;background-image:linear-gradient(45deg,#161618 25%,transparent 25%),linear-gradient(-45deg,#161618 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#161618 75%),linear-gradient(-45deg,transparent 75%,#161618 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;box-shadow:inset 0 0 10px #00000080,0 0 0 1px #ffffff0d}.crop-matted img{max-width:none;display:block;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.face-guide{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:5}.face-guide svg{width:100%;height:100%}.guide-oval{fill:none;stroke:#63b3ed99;stroke-width:1.5;stroke-dasharray:4 4}.guide-line{stroke:#fff6;stroke-width:1}.guide-line.head{stroke:#3b82f6;stroke-width:2.5}.guide-line.chin{stroke:#ef4444;stroke-width:2.5}.guide-center{stroke:#ffffff26;stroke-width:.5}.guide-label{position:absolute;left:10px;font-size:.6rem;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:4px;background:#000000b3;color:#fff}.label-head{transform:translateY(-100%);margin-top:-4px;color:#3b82f6;border-left:2px solid #3b82f6}.label-chin{margin-top:4px;color:#ef4444;border-left:2px solid #ef4444}.biometric-info{position:absolute;top:12px;right:12px;z-index:20;padding:4px 10px;background:#09090bd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);border-radius:6px;color:#fff;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;pointer-events:none;box-shadow:0 4px 12px #0000004d}.zoom-controls{padding:18px 24px;background:#09090b;display:flex;align-items:center;gap:16px;border-top:1px solid rgba(255,255,255,.08)}.zoom-controls button{width:36px;height:36px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:#18181b;color:#fff;font-size:1.1rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;flex-shrink:0}.zoom-controls button:hover{background:#27272a;border-color:#3b82f6;color:#3b82f6}.zoom-controls input[type=range]{flex:1;height:6px;border-radius:3px;background:#27272a;outline:none;-moz-appearance:none;appearance:none;-webkit-appearance:none;accent-color:#3b82f6}.zoom-controls input[type=range]::-webkit-slider-runnable-track{height:6px;background:#27272a;border-radius:3px}.zoom-controls input[type=range]::-webkit-slider-thumb{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#3b82f6;cursor:pointer;border:4px solid #09090b;box-shadow:0 0 0 1px #ffffff1a}.alignment-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#007bff1a;display:flex;align-items:center;justify-content:center;z-index:100;pointer-events:none;border:3px dashed #3b82f6;animation:pulse-border 1.5s infinite}@keyframes pulse-border{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.alignment-msg{background:#3b82f6;color:#fff;padding:10px 20px;border-radius:40px;font-weight:700;font-size:.9rem;box-shadow:0 10px 20px #0006}.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}.btn-sm{padding:8px 12px;font-size:.75rem;font-weight:700}.settings-scroll{display:flex;flex-direction:column;gap:12px}.settings-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}.tips-panel{display:flex;flex-direction:column;gap:20px;padding:10px 0}.tip-item{display:flex;gap:12px;align-items:flex-start}.tip-icon{font-size:1.25rem;background:var(--accent-dim);padding:8px;border-radius:var(--radius-md);line-height:1}.tip-item strong{display:block;color:var(--text-primary);margin-bottom:2px}.tip-item div{font-size:.85rem;color:var(--text-secondary);line-height:1.4}.check-row{display:flex;flex-direction:column;gap:12px;align-self:center}.checkbox-wrap{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:.85rem;font-weight:600;color:var(--text-secondary)}.checkbox-wrap input{width:18px;height:18px;cursor:pointer}.result-layout{display:flex;flex-direction:column;gap:32px}.result-preview-box{width:100%;max-width:440px;padding:12px;background:#111;border-radius:var(--radius-lg);display:flex;justify-content:center;box-shadow:inset 0 0 20px #00000080;border:1px solid rgba(255,255,255,.05)}.result-img{max-width:100%;height:auto;max-height:700px;display:block;margin:0 auto;box-shadow:var(--shadow-xl);border-radius:var(--radius-md)}.result-actions{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:flex-start;width:100%;padding:12px 0}.download-controls{display:flex;flex-direction:column;gap:24px}.download-settings{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;display:flex;flex-direction:column;gap:16px}.check-row.compact{padding:0;margin:-4px 0}.target-size-input{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}.target-size-input label{font-size:.75rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.size-input-field{width:100%;max-width:140px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;color:var(--text-primary);font-family:var(--font-mono);font-weight:700;outline:none;transition:border-color .2s}.size-input-field:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim)}.download-wrap{width:100%}@media (max-width: 992px){.passport-page .tool-grid{display:flex;flex-direction:column;align-items:stretch!important;gap:24px;width:100%}.result-actions{grid-template-columns:1fr;gap:24px}}@media (max-width: 768px){.settings-row{grid-template-columns:1fr}}@media (max-width: 640px){.passport-page .tool-grid{width:100%;margin:0}.panel-body{padding:20px 14px!important}.crop-matted{max-width:100%}}.bg-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.bg-swatch{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.1);cursor:pointer;transition:all var(--transition);flex-shrink:0}.bg-swatch:hover{transform:scale(1.15);border-color:#ffffff4d}.bg-swatch.active{border-color:var(--accent);box-shadow:0 0 0 2px #63b3ed59;transform:scale(1.1)}.bg-picker-wrap{display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;width:28px;height:28px}.bg-picker{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:2px solid rgba(255,255,255,.1);border-radius:50%;padding:0;background:none;cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;overflow:hidden}.picker-icon{font-size:.9rem;pointer-events:none;z-index:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}[data-theme=light] .bg-swatch{border-color:#0000001a}[data-theme=light] .bg-swatch.active{border-color:var(--accent)}[data-theme=light] .bg-picker{border-color:#0000001a}[data-theme=light] .tip-icon{background:#f0f7ff;color:var(--accent)}.ai-magic span{color:var(--accent);font-weight:700}.user-markers{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:50}.marker{position:absolute;left:0;width:100%;pointer-events:auto;cursor:row-resize;transition:opacity .2s}.marker.active{z-index:100}.marker-line{width:100%;height:2px;background:#fbbf24;box-shadow:0 0 10px #fbbf2480}.marker-handle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:#fbbf24;color:#000;padding:4px 10px;border-radius:20px;font-size:.65rem;font-weight:800;text-transform:uppercase;white-space:nowrap;box-shadow:0 4px 10px #0000004d;-webkit-user-select:none;user-select:none}.marker-handle span{display:block}.marker.active .marker-line{background:#fff;height:3px}.marker.active .marker-handle{background:#fff;transform:translateY(-50%) scale(1.1)}
