:root{--font-family: "Inter", system-ui, -apple-system, sans-serif;--bg-app: #09090b;--bg-panel: #18181b;--bg-panel-transparent: rgba(24, 24, 27, .7);--fg-primary: #fafafa;--fg-secondary: #a1a1aa;--accent: #8b5cf6;--accent-hover: #7c3aed;--accent-glow: rgba(139, 92, 246, .5);--border: #27272a;--danger: #ef4444;--danger-hover: #f87171;--danger-glow: rgba(239, 68, 68, .5);--glass-border: rgba(255, 255, 255, .1)}*{box-sizing:border-box}body{margin:0;padding:0;font-family:var(--font-family);background-color:var(--bg-app);color:var(--fg-primary);height:100vh;width:100vw;overflow:hidden}#root{height:100%;width:100%}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.flex-1{flex:1}.h-full{height:100%}.w-full{width:100%}.app-container{height:100%;width:100%;display:flex;flex-direction:column;background-image:url(/bg-grid.svg);background-size:cover;position:relative}.app-overlay{position:absolute;inset:0;background:linear-gradient(to top right,#4c1d951a,#312e811a);pointer-events:none}.nav-bar{padding:1.5rem;display:flex;align-items:center;gap:.75rem;z-index:10}.logo-box{background:linear-gradient(to bottom right,var(--accent),#4f46e5);padding:.5rem;border-radius:.5rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;display:flex;color:#fff}.app-title{font-size:1.25rem;font-weight:700;background:linear-gradient(to right,#fff,#a1a1aa);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0}.dropplane-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;z-index:10;animation:fadeIn .5s ease-out}.drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:42rem;height:24rem;border:2px dashed var(--border);border-radius:1.5rem;transition:all .3s ease;cursor:pointer;background:var(--bg-panel-transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--glass-border)}.drop-zone:hover{border-color:var(--fg-secondary)}.drop-zone.active{border-color:var(--accent);background:#8b5cf61a}.icon-circle{background:#27272a;padding:1.5rem;border-radius:9999px;margin-bottom:1.5rem;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.drop-text-main{font-size:1.5rem;font-weight:600;margin-bottom:.5rem;color:#fff}.drop-text-sub{color:var(--fg-secondary);margin-bottom:1.5rem}.file-types{display:flex;gap:1rem;justify-content:center;color:#71717a;font-size:.875rem}.type-badge{display:flex;align-items:center;gap:.25rem}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:1rem;margin:1rem 1rem 0;border-bottom:1px solid var(--glass-border);background:var(--bg-panel-transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:.75rem;z-index:20}.tool-group{display:flex;align-items:center;gap:1rem}.divider{height:1.5rem;width:1px;background:var(--glass-border)}.toggle-group{display:flex;align-items:center;gap:.5rem;background:#18181b80;padding:.25rem;border-radius:.5rem;border:1px solid var(--glass-border)}.toggle-btn{padding:.375rem .75rem;border-radius:.25rem;display:flex;align-items:center;gap:.5rem;font-size:.875rem;transition:all .2s;background:transparent;border:none;color:var(--fg-secondary);cursor:pointer}.toggle-btn.active{background:var(--accent);color:#fff}.toggle-btn:hover:not(.active){color:#fff}.btn{background:var(--bg-panel);border:1px solid var(--border);color:var(--fg-primary);padding:.5rem 1rem;border-radius:6px;font-weight:500;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem}.btn:hover{background:var(--border);border-color:var(--fg-secondary)}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 15px var(--accent-glow)}.btn-primary:hover{background:var(--accent-hover);box-shadow:0 0 25px var(--accent-glow)}.btn-danger{color:#f87171}.btn-danger:hover{background:#ef44441a;border-color:#ef444433}.workspace{flex:1;overflow:auto;padding:2rem;display:flex;justify-content:center;background:#09090b;position:relative}.canvas-container{position:relative;box-shadow:0 25px 50px -12px #00000040;height:fit-content}.canvas-img{max-width:56rem;width:100%;display:block;object-fit:contain;-webkit-user-select:none;user-select:none;cursor:crosshair}.cut-line{position:absolute;background:var(--danger);z-index:10;box-shadow:0 0 10px var(--danger-glow)}.cut-line:hover{background:var(--danger-hover)}.delete-handle{position:absolute;background:var(--danger);color:#fff;border-radius:9999px;padding:2px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s,transform .2s;border:none;cursor:pointer;top:50%;left:50%;transform:translate(-50%,-50%)}.cut-line:hover .delete-handle{opacity:1}.delete-handle:hover{transform:translate(-50%,-50%) scale(1.25)}.guide-line{position:absolute;border:2px dashed var(--accent);pointer-events:none;z-index:0;opacity:.7}.info-panel{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--bg-panel-transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:1rem;border-radius:.5rem;border:1px solid var(--glass-border);font-size:.75rem;color:var(--fg-secondary);pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}