.portrait-studio-main{min-height:100vh;background:#1a1a1a;color:#fff;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;padding:20px}.portrait-studio-header{display:flex;justify-content:center;align-items:center;background:#2d2d2d;padding:15px 25px;border-radius:8px;margin-bottom:20px;border:1px solid #444;position:relative}.portrait-header-nav{display:flex;align-items:center;gap:20px}.portrait-back-link{background:rgba(0,255,255,.1);border:1px solid #00ffff;padding:10px 20px;border-radius:8px;color:#0ff;text-decoration:none;font-size:.9rem;font-weight:400;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:5px}.portrait-back-link:hover{background:rgba(0,255,255,.2);border-color:#0ff;color:#0ff;transform:translateY(-1px)}.portrait-title-section{text-align:center}.portrait-title-section h1{margin:0;font-size:1.8rem;background:linear-gradient(90deg,#00bfff,#00ffff);-webkit-background-clip:text;background-clip:text;color:transparent;text-transform:uppercase;letter-spacing:2px}.portrait-title-section p{margin:5px 0 0;color:#ccc;font-size:.9rem;text-transform:uppercase;letter-spacing:1px}.portrait-main-grid{display:grid;grid-template-columns:250px 1fr 180px;gap:20px;height:calc(100vh - 200px);min-height:600px}.portrait-left-panel,.portrait-right-panel{background:#2d2d2d;border-radius:8px;padding:20px;border:1px solid #444;overflow-y:auto}.portrait-center-panel{background:#2d2d2d;border-radius:8px;padding:15px;border:1px solid #444;display:flex;flex-direction:column}.portrait-upload-area{background:#2a2a2a;border:2px dashed #444;border-radius:8px;padding:20px;text-align:center;margin-bottom:20px;cursor:pointer;transition:all .3s ease}.portrait-upload-area:hover{border-color:#0891b2;background:rgba(8,145,178,.05)}.portrait-upload-area input[type=file]{display:none!important}.portrait-upload-area .upload-zone,.portrait-upload-area .dropzone,.portrait-upload-area [class*=drag],.portrait-upload-area [class*=drop]{background:transparent!important;border:1px solid #444!important;border-radius:6px!important;padding:20px 15px!important;margin:0!important;transition:all .2s ease!important}.portrait-upload-area .upload-zone:hover,.portrait-upload-area .dropzone:hover,.portrait-upload-area [class*=drag]:hover,.portrait-upload-area [class*=drop]:hover{border-color:#0891b2!important;background:rgba(8,145,178,.1)!important}.portrait-upload-area button,.portrait-upload-area .upload-button,.portrait-upload-area [class*=upload][class*=button],.portrait-upload-area [class*=button]{background:#333!important;border:1px solid #555!important;color:#ccc!important;padding:8px 16px!important;border-radius:6px!important;font-size:.85rem!important;font-weight:500!important;cursor:pointer!important;transition:all .2s ease!important;text-transform:none!important;letter-spacing:normal!important;min-height:auto!important;width:auto!important;max-width:140px!important;margin:8px auto 0!important;display:inline-block!important}.portrait-upload-area button:hover,.portrait-upload-area .upload-button:hover,.portrait-upload-area [class*=upload][class*=button]:hover,.portrait-upload-area [class*=button]:hover{background:#444!important;border-color:#0891b2!important;color:#fff!important;transform:translateY(-1px)!important}.portrait-upload-area p,.portrait-upload-area span,.portrait-upload-area div:not([class*=button]):not(button){color:#999!important;font-size:.8rem!important;margin:4px 0!important;line-height:1.3!important;font-weight:400!important}.portrait-upload-area>div>div>div{border:none!important;background:transparent!important;padding:0!important;margin:0!important}.portrait-upload-area .upload-icon,.portrait-upload-area [class*=icon]{opacity:.6!important;transform:scale(.8)!important}.portrait-action-button{width:100%;padding:10px 20px;border:1px solid #555;border-radius:6px;font-weight:500;font-size:.9rem;cursor:pointer;background:#333;color:#ccc;transition:all .2s ease}.portrait-action-button:hover{background:#444;border-color:#0891b2;color:#fff;transform:translateY(-1px)}.portrait-canvas-split{display:flex;gap:10px;height:100%}.portrait-canvas-side{flex:1;display:flex;flex-direction:column;border-radius:8px}.portrait-canvas-side.original{border:2px solid #0891b2}.portrait-canvas-side.processed{border:2px solid #0e7490}.portrait-canvas-header{padding:8px 12px;font-size:.9rem;font-weight:600;text-align:center;color:#fff}.portrait-canvas-side.original .portrait-canvas-header{background:#0891b2}.portrait-canvas-side.processed .portrait-canvas-header{background:#0e7490}.portrait-canvas-content{flex:1;background:#1a1a1a;display:flex;align-items:center;justify-content:center}.portrait-placeholder{color:#666;font-size:.9rem;text-align:center}.portrait-controls-section{background:#1a1a1a;border:1px solid #444;border-radius:8px;padding:20px;margin-bottom:20px}.portrait-control-item{margin-bottom:20px}.portrait-control-label{display:block;font-size:.9rem;font-weight:600;color:#0891b2;margin-bottom:8px}.portrait-control-description{color:#888;font-size:.9rem}.portrait-processing-status{background:#1a1a1a;border:1px solid #444;border-radius:8px;padding:15px;margin-top:20px}.portrait-processing-status h4{color:#0891b2;margin:0 0 10px;font-size:.9rem}.status-item{display:flex;justify-content:space-between;margin-bottom:8px;font-size:.8rem}.status-item span:first-child{color:#ccc}.status-success{color:#10b981;font-weight:500}.status-pending{color:#f59e0b;font-weight:500}.portrait-custom-slider{flex:1;height:8px;background:#444;border-radius:4px;position:relative;cursor:pointer;width:100%;min-width:200px}.portrait-custom-slider-thumb{position:absolute;top:50%;transform:translateY(-50%);width:20px;height:20px;background:#0891b2;border-radius:50%;border:2px solid #ffffff;box-shadow:0 2px 4px #0000004d;cursor:grab}.portrait-custom-slider-thumb.disabled{cursor:not-allowed;background:#666}.portrait-range input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;background:#444;border-radius:3px;outline:none;flex:1}.portrait-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;background:#0891b2;border-radius:50%;cursor:pointer;border:2px solid #ffffff;box-shadow:0 2px 4px #0000004d}.portrait-range input[type=range]::-moz-range-thumb{width:20px;height:20px;background:#0891b2;border-radius:50%;cursor:pointer;border:2px solid #ffffff;box-shadow:0 2px 4px #0000004d}.portrait-range input[type=range]::-webkit-slider-thumb:hover{background:#0a7491;transform:scale(1.1)}.portrait-range input[type=range]::-moz-range-thumb:hover{background:#0a7491;transform:scale(1.1)}.portrait-range input[type=range]:disabled{opacity:.5;cursor:not-allowed}.portrait-range input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed;background:#666}.portrait-range input[type=range]:disabled::-moz-range-thumb{cursor:not-allowed;background:#666}.portrait-slider-container{display:flex;flex-direction:column;gap:8px;width:100%}.portrait-slider-label{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#ccc;font-weight:500}.portrait-slider-value{font-family:SF Mono,Monaco,monospace;font-weight:600;color:#0891b2;background:rgba(8,145,178,.1);padding:2px 8px;border-radius:4px;border:1px solid rgba(8,145,178,.3);min-width:40px;text-align:center}.portrait-custom-slider{position:relative;height:20px;width:100%;min-width:200px;cursor:pointer;border-radius:10px;padding:7px 0;outline:none;transition:all .2s ease}.portrait-custom-slider:focus{box-shadow:0 0 0 2px #0891b24d}.portrait-custom-slider.disabled{cursor:not-allowed;opacity:.5}.portrait-custom-slider:hover:not(.disabled) .portrait-custom-slider-thumb{transform:translateY(-50%) scale(1.05);box-shadow:0 3px 8px #0006}.portrait-custom-slider:hover:not(.disabled) .portrait-slider-fill{box-shadow:0 0 8px #0891b24d}.portrait-arrow-control{display:flex;align-items:center;background:#0a0a0a;border:1px solid #333;border-radius:6px;overflow:hidden;height:40px;width:100%}.portrait-arrow-btn{background:transparent;border:none;color:#999;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;font-size:16px;padding:0}.portrait-arrow-btn:hover:not(:disabled){background:#1a1a1a;color:#0891b2}.portrait-arrow-btn:disabled{opacity:.3;cursor:not-allowed}.portrait-value-display{flex:1;text-align:center;font-size:14px;font-weight:600;color:#fff;background:#1a1a1a;font-family:SF Mono,Monaco,monospace;padding:0 12px}.portrait-control-group{background:#1a1a1a;border:1px solid #333;border-radius:8px;margin-bottom:16px;overflow:hidden}.portrait-group-header{padding:12px 16px;background:#222;border-bottom:1px solid #333}.portrait-group-title{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#ddd;margin:0}.portrait-group-content{padding:16px}.portrait-control-item{margin-bottom:16px}.portrait-control-item:last-child{margin-bottom:0}.portrait-control-label{margin-bottom:8px;font-size:11px;color:#999;text-transform:uppercase;letter-spacing:.5px;font-weight:500}.portrait-custom-slider *,.portrait-arrow-control *,.portrait-control-group *{transition:all .2s ease}.portrait-color-grid{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.portrait-color-button{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .2s ease;position:relative;box-shadow:0 2px 4px #0000004d}.portrait-color-button:hover{transform:scale(1.1);box-shadow:0 4px 8px #0006}.portrait-color-button.selected{border-color:#fff;transform:scale(1.15);box-shadow:0 0 0 2px #ffffff4d}.portrait-color-button:active{transform:scale(1.05)}.portrait-processing-status{background:linear-gradient(135deg,#1a1a1a 0%,#222 100%);border:1px solid #444;border-radius:8px;padding:16px;margin-top:20px}.portrait-processing-status h4{color:#0891b2;margin:0 0 12px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.status-item{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px;padding:4px 0}.status-item:last-child{margin-bottom:0}.status-item span:first-child{color:#ccc;font-weight:500}.status-success{color:#10b981;font-weight:600;background:rgba(16,185,129,.1);padding:2px 8px;border-radius:4px;border:1px solid rgba(16,185,129,.3)}.status-pending{color:#f59e0b;font-weight:600;background:rgba(245,158,11,.1);padding:2px 8px;border-radius:4px;border:1px solid rgba(245,158,11,.3);animation:pulse 2s infinite}@media (max-width: 768px){.portrait-custom-slider{min-width:150px}.portrait-arrow-control{height:36px}.portrait-arrow-btn{width:36px;height:36px;font-size:14px}.portrait-color-button{width:24px;height:24px}}.portrait-custom-slider:focus-visible{outline:none;box-shadow:0 0 0 3px #0891b266}.portrait-custom-slider:focus-visible .portrait-custom-slider-thumb{box-shadow:0 0 0 2px #0891b299}.portrait-action-strip{display:flex;justify-content:center;align-items:center;background:#252525;padding:12px 25px;border-radius:6px;margin-bottom:20px;border:1px solid #333}.portrait-animate-button{padding:12px 32px;border:2px solid transparent;border-radius:8px;font-weight:700;font-size:.95rem;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px;background:linear-gradient(135deg,#ff6b6b,#ee5a24);color:#fff;box-shadow:0 4px 15px #ff6b6b4d}.portrait-animate-button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff6b6b66}.portrait-animate-button:disabled{background:#333;color:#666;cursor:not-allowed;box-shadow:none}.portrait-upload-container{text-align:center;padding:20px;background:#2a2a2a;border-radius:8px;border:1px solid #444;margin-bottom:20px}.portrait-upload-button{width:100%;padding:10px 20px;border:1px solid #555;border-radius:6px;font-weight:500;font-size:.9rem;cursor:pointer;background:#333;color:#ccc;transition:all .2s ease;box-shadow:0 0 20px #0891b299,0 0 40px #0891b24d,0 0 60px #0891b21a}.portrait-upload-button:hover{background:#444;border-color:#0891b2;color:#fff;transform:translateY(-1px);box-shadow:0 0 25px #0891b2cc,0 0 50px #0891b280,0 0 80px #0891b233}.portrait-upload-button:disabled{background:#333;color:#666;border-color:#555;cursor:not-allowed;box-shadow:0 0 10px #0891b24d,0 0 20px #0891b21a;transform:none}.portrait-upload-info{color:#fff!important;font-size:.85rem!important;margin-top:15px!important;opacity:.9}.portrait-left-panel h3,.portrait-right-panel h3{color:#fff!important;margin-bottom:20px;font-size:1.1rem;font-weight:600}.portrait-right-panel .portrait-controls-section>div{white-space:nowrap}.portrait-desktop-only{display:block}.portrait-mobile-only{display:none}@media (max-width: 768px){.portrait-desktop-only{display:none!important}.portrait-mobile-only{display:block!important}}.portrait-mobile-upload-screen{min-height:100dvh;background:linear-gradient(135deg,#1a1a1a 0%,#2d2d2d 100%);display:flex;flex-direction:column;padding:20px}.portrait-mobile-back-btn{color:#0ff;text-decoration:none;font-size:.9rem;padding:8px 0;align-self:flex-start}.portrait-mobile-upload-content{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:16px;padding:20px}.portrait-mobile-logo{height:80px;width:auto;margin-bottom:10px}.portrait-mobile-upload-content h1{font-size:1.8rem;background:linear-gradient(90deg,#00bfff,#00ffff);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0;text-transform:uppercase;letter-spacing:2px}.portrait-mobile-upload-content p{color:#aaa;font-size:.9rem;margin:0}.portrait-mobile-upload-btn{background:linear-gradient(135deg,#0891b2,#06b6d4);border:none;color:#fff;padding:16px 48px;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;margin-top:20px;transition:transform .2s}.portrait-mobile-upload-btn:active{transform:scale(.98)}.portrait-mobile-upload-btn:disabled{opacity:.6;cursor:not-allowed}.portrait-mobile-examples-link{color:#f97316;text-decoration:none;font-size:.95rem;margin-top:12px}.portrait-mobile-upload-hint{color:#666;font-size:.8rem;max-width:280px;margin-top:20px}.portrait-mobile-canvas-screen{position:fixed;top:0;left:0;right:0;bottom:0;background:#1a1a1a;overflow-y:auto;overflow-x:hidden}.portrait-mobile-canvas-container{width:100%;padding:60px 12px 120px;box-sizing:border-box}@media (max-width: 768px) and (orientation: portrait){.portrait-mobile-canvas-container .portrait-canvas-side.original{display:none!important}.portrait-mobile-canvas-container .portrait-canvas-side.processed{width:100%!important;flex:none!important}}.portrait-mobile-canvas-container .portrait-control-group{margin-top:16px}.portrait-mobile-floating-back{position:absolute;top:16px;left:16px;width:44px;height:44px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.2);border-radius:50%;color:#fff;font-size:1.2rem;display:flex;align-items:center;justify-content:center;text-decoration:none;z-index:100}.portrait-mobile-floating-upload{position:absolute;top:16px;right:16px;width:44px;height:44px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.2);border-radius:50%;color:#fff;font-size:1.2rem;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100}.portrait-mobile-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.8);color:#4caf50;padding:12px 24px;border-radius:8px;font-size:.9rem;z-index:100}.portrait-mobile-error{position:absolute;top:70px;left:16px;right:16px;background:rgba(255,68,68,.9);color:#fff;padding:12px 16px;border-radius:8px;font-size:.85rem;z-index:100;text-align:center}.portrait-mobile-style-bar{position:absolute;bottom:90px;left:16px;right:16px;display:flex;gap:8px;justify-content:center;z-index:100}.portrait-mobile-style-btn{background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.2);color:#aaa;padding:10px 16px;border-radius:20px;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s}.portrait-mobile-style-btn.active{background:rgba(8,145,178,.8);border-color:#0891b2;color:#fff}.portrait-mobile-style-btn:disabled{opacity:.5;cursor:not-allowed}.portrait-mobile-animate-btn{position:absolute;bottom:24px;left:50%;transform:translate(-50%);background:linear-gradient(135deg,#ff6b6b,#ee5a24);border:none;color:#fff;padding:14px 48px;border-radius:30px;font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;cursor:pointer;z-index:100}.portrait-mobile-animate-btn:active:not(:disabled){transform:translate(-50%) scale(.98)}.portrait-mobile-animate-btn:disabled{background:#444;color:#888;cursor:not-allowed}@media (max-width: 768px){[class*=modal],[class*=Modal]{z-index:1000!important}.modal-overlay,[class*=overlay],[class*=Overlay]{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1000!important}.modal-content,[class*=modal-content],[class*=ModalContent],[class*=modal-body],[class*=ModalBody]{position:fixed!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;max-height:85vh!important;max-width:92vw!important;overflow-y:auto!important;z-index:1001!important}}@media (max-width: 900px) and (orientation: landscape){.portrait-desktop-only{display:none!important}.portrait-mobile-only{display:block!important}.portrait-mobile-upload-screen{flex-direction:row;padding:16px}.portrait-mobile-back-btn{position:absolute;top:12px;left:12px}.portrait-mobile-upload-content{padding:10px;gap:12px}.portrait-mobile-logo{height:50px;margin-bottom:5px}.portrait-mobile-upload-content h1{font-size:1.4rem}.portrait-mobile-upload-btn{padding:12px 36px;font-size:1rem;margin-top:10px}.portrait-mobile-upload-hint{margin-top:10px;font-size:.75rem}.portrait-mobile-canvas-container{padding:50px 12px 100px}.portrait-mobile-floating-back,.portrait-mobile-floating-upload{width:38px;height:38px;font-size:1rem;top:8px}.portrait-mobile-floating-back{left:8px}.portrait-mobile-floating-upload{right:8px}.portrait-mobile-animate-btn{bottom:8px;padding:8px 28px;font-size:.8rem;letter-spacing:1px}.portrait-mobile-loading{padding:8px 16px;font-size:.8rem}.portrait-mobile-error{top:50px;left:50px;right:50px;padding:6px 10px;font-size:.75rem}.portrait-mobile-canvas-container .portrait-canvas-side.original{display:flex!important}}