:root{--bg-primary:#0a0712;--bg-secondary:#130c22;--bg-card:#a66dff14;--text-primary:#f7f2ff;--text-secondary:#b9a7d6;--text-muted:#8573a6;--accent-blue:#b26cff;--accent-glow:#b26cff73;--border-subtle:#c18fff33;--border-hover:#d8b4ff61;--shadow-sm:0 2px 10px #0a041473;--shadow-md:0 12px 36px #0c051894;--shadow-lg:0 24px 68px #0e061ead;--shadow-glow:0 0 44px #b26cff38;--ease-out:cubic-bezier(.215, .61, .355, 1);--ease-ios:cubic-bezier(.32, .72, 0, 1);--transition-fast:.2s var(--ease-ios);--transition-normal:.35s var(--ease-ios);--transition-slow:.5s var(--ease-ios)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{background:var(--bg-primary);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,SF Pro Text,Inter,sans-serif;overflow-x:hidden}.app-container{background:radial-gradient(ellipse at top, #b26cff33, transparent 50%), radial-gradient(ellipse at bottom right, #7638bd33, transparent 58%), linear-gradient(180deg, var(--bg-primary) 0%, #120a1f 100%);min-height:100vh;transition:opacity var(--transition-normal), transform var(--transition-normal)}.app-container.transitioning{opacity:.95;transform:scale(.995)}.grid-container{max-width:1400px;min-height:100vh;margin:0 auto;padding:60px 24px 40px}.grid-header{text-align:center;margin-bottom:48px;padding-top:20px}.header-content{display:inline-block}.app-title{background:linear-gradient(135deg,#fdf9ff 0%,#d8b3ff 45%,#9a67df 100%);-webkit-text-fill-color:transparent;letter-spacing:-.02em;-webkit-background-clip:text;background-clip:text;justify-content:center;align-items:center;gap:12px;margin-bottom:12px;font-size:clamp(32px,5vw,48px);font-weight:700;display:flex}.title-icon{filter:drop-shadow(0 0 20px #b26cff8c);font-size:1.1em}.app-subtitle{color:var(--text-secondary);letter-spacing:.02em;font-size:clamp(14px,2vw,16px);font-weight:400}.cards-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;max-width:1200px;margin:0 auto;display:grid}.style-card{aspect-ratio:1;cursor:pointer;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:all var(--transition-fast);animation:cardEntrance .5s var(--ease-ios) backwards;box-shadow:var(--shadow-md);background:linear-gradient(160deg,#221338bf,#160c26e6);border:1px solid;border-radius:24px;padding:24px;position:relative;overflow:hidden}.style-card:hover{border-color:var(--border-hover);box-shadow:var(--shadow-lg), var(--shadow-glow);transform:translateY(-4px)scale(1.02)}.style-card:active{transition-duration:80ms;transform:translateY(-2px)scale(.99)}.card-content{z-index:2;text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:10px;height:100%;display:flex;position:relative}.style-previews{justify-content:center;align-items:center;gap:8px;margin-bottom:8px;display:flex}.preview-thumb{background:#ffffff14;border:1px solid #ffffff47;border-radius:10px;width:54px;height:82px;overflow:hidden;box-shadow:0 6px 18px #00000059}.preview-thumb img{object-fit:cover;width:100%;height:100%;display:block}.style-name{text-align:center;letter-spacing:.01em;color:var(--text-primary);font-size:clamp(15px,1.5vw,18px);font-weight:800;line-height:1.4}.style-count{color:var(--text-secondary);letter-spacing:.02em;font-size:12px;font-weight:500}.card-icon{color:#fff;font-size:18px;line-height:1}.card-shine{transition:transform .8s var(--ease-ios);background:linear-gradient(105deg,#0000 40%,#ffffff08 45%,#ffffff0d 50%,#ffffff08 55%,#0000 60%);position:absolute;inset:0;transform:translate(-100%)}.style-card:hover .card-shine{transform:translate(100%)}@keyframes cardEntrance{0%{opacity:0;transform:translateY(30px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.details-container{flex-direction:column;max-width:1100px;min-height:100vh;margin:0 auto;padding:32px 24px 40px;display:flex;position:relative}.back-button{border:1px solid var(--border-subtle);color:var(--text-primary);cursor:pointer;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:all var(--transition-fast);z-index:10;background:#a66dff1f;border-radius:14px;align-items:center;gap:8px;padding:10px 16px;font-size:15px;font-weight:500;display:flex;position:absolute;top:32px;left:24px}.back-button:hover{border-color:var(--border-hover);box-shadow:var(--shadow-md);background:#ba88ff33;transform:translate(-3px)}.back-button:active{transition-duration:80ms;transform:translate(-2px)scale(.98)}.back-button svg{stroke:#fff;transition:transform var(--transition-fast)}.back-button:hover svg{transform:translate(-3px)}.artwork-showcase{flex-direction:column;flex:1;justify-content:center;align-items:center;width:100%;padding:40px 0;display:flex}.artwork-frame{background:var(--bg-secondary);border-radius:32px;justify-content:center;align-items:center;width:100%;max-width:820px;height:420px;margin-bottom:32px;display:flex;position:relative;overflow:hidden;box-shadow:0 30px 80px #0f061eb8,0 0 0 1px #c597ff38}.create-dropzone{text-align:center;width:100%;height:100%;color:var(--text-secondary);background:#0f061ee6;border:1px dashed #c18fff73;border-radius:28px;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:24px;display:flex}.create-dropzone input[type=file],.create-dropzone input[type=text]{width:100%;max-width:320px;margin-top:4px}.artwork-image{object-fit:contain;object-position:center;width:100%;height:100%;transition:transform .7s var(--ease-ios);display:block}.artwork-frame:hover .artwork-image{transform:scale(1.03)}.artwork-gradient-overlay{pointer-events:none;z-index:1;background:linear-gradient(#0000 0% 60%,#0e081bdb 100%);position:absolute;inset:0}.artwork-info{text-align:center;cursor:pointer;max-width:600px;padding:0 20px}.create-form-row{text-align:left;margin-top:12px}.create-form-row label{color:var(--text-secondary);flex-direction:column;gap:6px;font-size:13px;display:flex}.create-form-row input,.create-form-row select,.create-dropzone input{border:1px solid var(--border-subtle);color:var(--text-primary);background:#0a0614e6;border-radius:8px;outline:none;padding:8px 10px}.create-form-row input:focus,.create-form-row select:focus,.create-dropzone input:focus{border-color:var(--border-hover);box-shadow:0 0 0 1px #d8b4ff66}.create-submit-button{color:#fff;cursor:pointer;box-shadow:var(--shadow-md);transition:transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);background:linear-gradient(135deg,#b26cff,#e879f9);border:none;border-radius:999px;margin-top:20px;padding:10px 22px;font-weight:600}.create-submit-button:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}.create-submit-button:active{box-shadow:var(--shadow-sm);transform:translateY(0)}.create-submit-button:disabled{opacity:.65;cursor:not-allowed;transform:none}.create-error{color:#fecaca;margin-top:10px;font-size:13px}.create-success{color:#bbf7d0;margin-top:10px;font-size:13px}.info-content{transition:filter .5s var(--ease-ios), opacity .5s var(--ease-ios)}.info-content.blurred{filter:blur(16px);opacity:.4}.artwork-title{letter-spacing:-.01em;margin-bottom:16px;font-size:clamp(24px,4vw,36px);font-weight:700;line-height:1.25}.artwork-meta{justify-content:center;align-items:center;gap:12px;margin-bottom:20px;font-size:clamp(15px,2vw,17px);display:flex}.artist-name{color:var(--text-primary);font-weight:500}.meta-separator{color:var(--text-muted)}.artwork-year{color:var(--text-secondary);font-weight:400}.style-badge{color:var(--accent-blue);background:#b26cff29;border:1px solid #b26cff59;border-radius:20px;margin-top:8px;padding:8px 20px;font-size:13px;font-weight:600;display:inline-block}.blur-hint{color:var(--text-secondary);pointer-events:none;animation:hintPulse 2s var(--ease-ios) infinite;flex-direction:column;align-items:center;gap:12px;font-size:15px;font-weight:500;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.hint-icon{opacity:.8;font-size:32px}@keyframes hintPulse{0%,to{opacity:.6;transform:translate(-50%,-50%)scale(1)}50%{opacity:1;transform:translate(-50%,-50%)scale(1.05)}}.navigation-controls{justify-content:center;align-items:center;gap:32px;padding:32px 0 20px;display:flex}.nav-button{border:1px solid var(--border-subtle);width:52px;height:52px;color:var(--text-primary);cursor:pointer;transition:all var(--transition-fast);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-md);background:#a66dff1f;border-radius:50%;justify-content:center;align-items:center;display:flex}.nav-button:hover{border-color:var(--border-hover);box-shadow:var(--shadow-lg);background:#ba88ff38;transform:scale(1.08)}.nav-button:active{transition-duration:80ms;transform:scale(.98)}.nav-button svg{stroke:#fff;transition:transform var(--transition-fast)}.nav-button:hover svg{transform:scale(1.1)}.progress-indicator{background:#ffffff1a;border-radius:2px;flex:1;max-width:120px;height:4px;position:relative;overflow:hidden}.progress-bar{background:linear-gradient(90deg, var(--accent-blue), #915eff);width:33%;height:100%;animation:progressPulse 2s var(--ease-ios) infinite;border-radius:2px;position:absolute;top:0;left:0}@keyframes progressPulse{0%,to{opacity:.6}50%{opacity:1}}.empty-state{text-align:center;color:var(--text-secondary);flex-direction:column;flex:1;justify-content:center;align-items:center;padding:100px 20px;display:flex}.empty-icon{opacity:.5;margin-bottom:24px;font-size:64px}.empty-state h3{color:var(--text-primary);margin-bottom:8px;font-size:24px;font-weight:600}.empty-state p{font-size:16px}@media (width<=768px){.grid-container{padding:40px 16px 32px}.cards-grid{grid-template-columns:repeat(2,1fr);gap:16px}.style-card{border-radius:20px;padding:20px 16px}.preview-thumb{border-radius:8px;width:54px;height:82px}.details-container{padding:24px 16px 32px}.back-button{padding:8px 12px;font-size:14px;top:24px;left:16px}.artwork-frame{border-radius:24px;max-width:100%;height:360px}.nav-button{width:44px;height:44px}.artwork-title{font-size:clamp(24px,5vw,32px)}.artwork-meta{font-size:15px}}@media (width<=480px){.cards-grid{grid-template-columns:repeat(2,1fr);gap:12px}.style-previews{gap:6px}.preview-thumb{border-radius:7px;width:54px;height:82px}.artwork-frame{border-radius:18px;height:300px}.artwork-title{font-size:clamp(20px,6vw,28px)}.artwork-meta{gap:8px;font-size:14px}.style-badge{padding:6px 12px;font-size:11px}}.artwork-image.error{opacity:.3;filter:grayscale()blur(2px)}.image-error-overlay{color:var(--text-secondary);z-index:5;background:#0a0a0fe6;flex-direction:column;justify-content:center;align-items:center;gap:12px;font-size:14px;display:flex;position:absolute;inset:0}.error-icon{opacity:.7;font-size:32px}.artwork-image{will-change:transform;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}