/* ===== Base ===== */ * { box-sizing: border-box; } body { margin: 0; padding: 30px; background: #05070a; color: #d8f7ff; font-family: "Segoe UI", sans-serif; } .container { max-width: 1400px; margin: 0 auto; } /* ===== Header ===== */ h1 { margin: 0 0 25px; text-align: center; letter-spacing: 4px; color: #7df9ff; text-shadow: 0 0 8px #7df9ff, 0 0 20px #7df9ff; } /* ===== Panels ===== */ .panel { background: rgba(15, 20, 30, 0.8); border: 1px solid rgba(125, 249, 255, 0.35); border-radius: 12px; padding: 20px; backdrop-filter: blur(8px); box-shadow: 0 0 10px rgba(125,249,255,0.15), inset 0 0 15px rgba(125,249,255,0.05); } .panel h2 { margin-top: 0; color: #7df9ff; letter-spacing: 2px; } /* ===== Input / Output ===== */ .image-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } #preview, #outputImage { width: 100%; min-height: 300px; max-height: 600px; object-fit: contain; border: 1px solid rgba(125,249,255,0.25); border-radius: 8px; background: rgba(0,0,0,0.3); } /* ===== Controls ===== */ .controls { margin-bottom: 20px; } .buttons { display: flex; gap: 12px; margin-bottom: 15px; } button { background: transparent; color: #7df9ff; border: 1px solid #7df9ff; border-radius: 8px; padding: 10px 20px; cursor: pointer; transition: 0.2s; } button:hover { background: rgba(125,249,255,0.15); box-shadow: 0 0 12px rgba(125,249,255,0.5); } /* ===== File Input ===== */ #file { margin-bottom: 15px; color: white; } /* ===== Status ===== */ #queue, #status, #progress { margin-top: 10px; font-size: 15px; } /* ===== Progress Bar ===== */ #progressBar { width: 100%; margin-top: 12px; height: 18px; } /* ===== Log ===== */ #log { background: rgba(0,0,0,0.45); border: 1px solid rgba(125,249,255,0.25); border-radius: 8px; padding: 12px; max-height: 200px; overflow-y: auto; white-space: pre-wrap; } /* ===== file ===== */ #file { display: none; } .cyber-button { display: inline-block; padding: 10px 20px; background: transparent; color: #7df9ff; border: 1px solid #7df9ff; border-radius: 8px; cursor: pointer; transition: 0.2s; } .cyber-button:hover { background: rgba(125,249,255,0.15); box-shadow: 0 0 12px rgba(125,249,255,0.5); } /* ===== Modal ===== */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; } .modal-content { background: #111; color: white; padding: 20px; border-radius: 10px; min-width: 200px; text-align: center; } .hidden { display: none; } /* ===== Mobile ===== */ @media (max-width: 900px) { .image-grid { grid-template-columns: 1fr; } body { padding: 15px; } } .notice { text-align: center; margin: -10px 0 25px; color: #ff6b9d; font-size: 14px; letter-spacing: 1px; } .footer { margin-top: 24px; padding: 16px; text-align: center; border-top: 1px solid rgba(125,249,255,0.25); } .footer a { color: #7df9ff; margin: 0 10px; text-decoration: none; font-size: 14px; } .footer a:hover { text-shadow: 0 0 8px #7df9ff; } /* ========================= AGREEMENT MODAL ========================= */ .agreement-modal { max-width: 520px; text-align: left; } .agreement-modal h2 { margin-top: 0; color: #7df9ff; text-align: center; } .agreement-modal p { font-size: 14px; line-height: 1.6; margin-bottom: 16px; } .agreement-check { display: block; margin-bottom: 16px; line-height: 1.5; font-size: 14px; } .agreement-check input { margin-right: 8px; transform: scale(1.15); } .agreement-check a { color: #7df9ff; text-decoration: none; } .agreement-check a:hover { text-shadow: 0 0 8px #7df9ff; } .agreement-buttons { display: flex; justify-content: center; gap: 12px; margin-top: 24px; } .agreement-buttons button { min-width: 120px; } Maintenance | ClothRemove

ClothRemove

The service is currently under maintenance.

We are improving stability, performance, and generation quality.

Maintenance Mode