:root{--nm-gold:#c9a961;--nm-gold-light:#e8d5a3;--nm-dark:#0a0a0a;--nm-card:#111111;--nm-text:#ffffff;--nm-muted:#888888;--nm-success:#4ade80;--nm-blue:#60a5fa;} *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;} body{font-family:'Segoe UI',Roboto,'Helvetica Neue',-apple-system,BlinkMacSystemFont,sans-serif;background:linear-gradient(135deg,#0a0a0a 0%,#1a1a2e 50%,#16213e 100%);color:var(--nm-text);min-height:100vh;line-height:1.6;overflow-x:hidden;} #nm-color-studio{max-width:1600px;margin:0 auto;padding:20px;position:relative;} @media (min-width:768px){#nm-color-studio{padding:40px 20px;}} .nm-header{text-align:center;margin-bottom:30px;position:relative;} @media (min-width:768px){.nm-header{margin-bottom:40px;}} .nm-header::before{content:'';position:absolute;top:-100px;left:50%;transform:translateX(-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(201,169,97,0.15) 0%,transparent 70%);pointer-events:none;z-index:0;} .nm-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(201,169,97,0.1);border:1px solid rgba(201,169,97,0.3);color:var(--nm-gold);padding:8px 20px;border-radius:50px;font-size:0.85rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:20px;position:relative;z-index:1;} .nm-header h1{font-size:2rem;font-weight:300;margin-bottom:12px;position:relative;z-index:1;letter-spacing:-1px;} @media (min-width:768px){.nm-header h1{font-size:3rem;}} .nm-header h1 strong{color:var(--nm-gold);font-weight:600;} .nm-subtitle{color:rgba(255,255,255,0.7);font-size:1rem;max-width:700px;margin:0 auto;font-weight:300;padding:0 20px;} @media (min-width:768px){.nm-subtitle{font-size:1.1rem;}} .nm-workspace{display:grid;grid-template-columns:1fr;gap:20px;position:relative;z-index:1;} @media (min-width:1200px){.nm-workspace{grid-template-columns:1fr 380px;gap:30px;}} .nm-preview-container{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.08);border-radius:24px;padding:20px;backdrop-filter:blur(10px);box-shadow:0 25px 50px rgba(0,0,0,0.5);position:relative;order:1;} @media (min-width:768px){.nm-preview-container{padding:25px;}} @media (min-width:1200px){.nm-preview-container{order:0;position:sticky;top:20px;height:fit-content;}} .nm-scene-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;flex-wrap:wrap;gap:10px;} .nm-scene-title{font-size:1rem;color:rgba(255,255,255,0.9);font-weight:500;display:flex;align-items:center;gap:8px;} .nm-scene-controls{display:flex;gap:8px;flex-wrap:wrap;} .nm-scene-btn{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.7);padding:8px 14px;border-radius:8px;cursor:pointer;font-size:0.85rem;transition:all 0.3s;display:inline-flex;align-items:center;gap:6px;touch-action:manipulation;white-space:nowrap;} .nm-scene-btn:hover{background:rgba(201,169,97,0.2);border-color:var(--nm-gold);color:var(--nm-gold);} .nm-scene-btn:active{transform:scale(0.95);} #canvas-container{width:100%;height:400px;position:relative;border-radius:16px;overflow:hidden;background:linear-gradient(to bottom,#2a2a3a,#1a1a2a);box-shadow:inset 0 2px 20px rgba(0,0,0,0.05);/* 轻微内阴影增加层次感 */ cursor:grab;} #canvas-container:active{cursor:grabbing;} @media (min-width:768px){#canvas-container{height:450px;}} @media (min-width:1200px){#canvas-container{height:500px;}} #canvas-container:fullscreen{height:100vh;border-radius:0;} .preview-badge{position:absolute;top:15px;left:15px;background:rgba(0,0,0,0.7);color:var(--nm-gold);padding:6px 12px;border-radius:20px;font-size:0.7rem;font-weight:700;backdrop-filter:blur(4px);border:1px solid rgba(201,169,97,0.4);pointer-events:none;z-index:10;letter-spacing:1px;text-transform:uppercase;} .nm-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--nm-gold);font-size:16px;letter-spacing:2px;z-index:10;display:flex;align-items:center;gap:12px;} .nm-spinner{width:20px;height:20px;border:2px solid rgba(201,169,97,0.3);border-top-color:var(--nm-gold);border-radius:50%;animation:spin 1s linear infinite;} @keyframes spin{to{transform:rotate(360deg);}} .nm-view-hint{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.6);color:rgba(255,255,255,0.8);padding:6px 14px;border-radius:20px;font-size:0.75rem;pointer-events:none;opacity:0;transition:opacity 0.3s;z-index:10;backdrop-filter:blur(4px);white-space:nowrap;} #canvas-container:hover .nm-view-hint{opacity:1;} .nm-palette-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px;padding:15px;background:rgba(0,0,0,0.3);border-radius:12px;border:1px solid rgba(255,255,255,0.05);} @media (min-width:640px){.nm-palette-summary{grid-template-columns:repeat(7,1fr);}} .nm-palette-item{text-align:center;cursor:pointer;transition:transform 0.2s;padding:5px;border-radius:8px;} .nm-palette-item:hover{transform:translateY(-2px);background:rgba(255,255,255,0.05);} .nm-palette-swatch{width:100%;height:40px;border-radius:8px;margin-bottom:6px;border:2px solid rgba(255,255,255,0.1);transition:all 0.3s;position:relative;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.3);} .nm-palette-item:hover .nm-palette-swatch{border-color:var(--nm-gold);box-shadow:0 4px 12px rgba(201,169,97,0.3);transform:scale(1.05);} .nm-palette-label{font-size:0.65rem;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:0.5px;font-weight:600;} .nm-palette-value{font-size:0.7rem;color:#fff;font-weight:500;margin-top:2px;} .nm-details-panel{background:rgba(201,169,97,0.05);border:1px solid rgba(201,169,97,0.2);border-radius:16px;padding:20px;margin-top:20px;} .nm-details-title{color:var(--nm-gold);font-size:0.9rem;font-weight:600;margin-bottom:12px;text-transform:uppercase;letter-spacing:1px;display:flex;align-items:center;gap:8px;} .nm-details-text{color:rgba(255,255,255,0.8);font-size:0.9rem;line-height:1.6;} .nm-details-list{list-style:none;margin-top:12px;} .nm-details-list li{padding:6px 0;color:rgba(255,255,255,0.7);font-size:0.85rem;display:flex;align-items:flex-start;gap:8px;} .nm-details-list li::before{content:'✓';color:var(--nm-gold);font-weight:bold;font-size:0.8rem;} .nm-controls-panel{display:flex;flex-direction:column;gap:20px;max-height:none;overflow-y:visible;order:2;} @media (min-width:1200px){.nm-controls-panel{max-height:calc(100vh - 40px);overflow-y:auto;padding-right:10px;order:1;}} .nm-controls-panel::-webkit-scrollbar{width:6px;} .nm-controls-panel::-webkit-scrollbar-track{background:rgba(255,255,255,0.05);border-radius:3px;} .nm-controls-panel::-webkit-scrollbar-thumb{background:rgba(201,169,97,0.3);border-radius:3px;} .nm-presets-container,.nm-custom-container{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:20px;padding:20px;} @media (min-width:768px){.nm-presets-container,.nm-custom-container{padding:24px;}} .nm-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:10px;} .nm-section-title{font-size:1rem;font-weight:600;color:#fff;display:flex;align-items:center;gap:8px;} .nm-section-subtitle{font-size:0.8rem;color:rgba(255,255,255,0.5);margin-top:4px;} .nm-preset-grid{display:grid;grid-template-columns:1fr;gap:12px;} @media (min-width:640px) and (max-width:1199px){.nm-preset-grid{grid-template-columns:repeat(2,1fr);}} .nm-preset-card{background:rgba(255,255,255,0.02);border:2px solid rgba(255,255,255,0.06);border-radius:16px;padding:16px;cursor:pointer;transition:all 0.3s ease;position:relative;overflow:hidden;touch-action:manipulation;} .nm-preset-card:hover{background:rgba(255,255,255,0.05);transform:translateY(-2px);border-color:rgba(201,169,97,0.3);box-shadow:0 8px 24px rgba(0,0,0,0.4);} .nm-preset-card:active{transform:scale(0.98);} .nm-preset-card.active{border-color:var(--nm-gold);background:rgba(201,169,97,0.08);box-shadow:0 4px 20px rgba(201,169,97,0.15);} .nm-preset-strip{display:flex;height:32px;border-radius:8px;overflow:hidden;margin-bottom:12px;box-shadow:0 2px 8px rgba(0,0,0,0.3);} .nm-preset-strip-color{flex:1;position:relative;transition:flex 0.3s;} .nm-preset-card:hover .nm-preset-strip-color{flex:1.2;} .nm-preset-strip-color:hover::after{content:attr(data-label);position:absolute;bottom:2px;left:50%;transform:translateX(-50%);font-size:0.6rem;color:rgba(255,255,255,0.9);text-shadow:0 1px 2px rgba(0,0,0,0.8);white-space:nowrap;} .nm-preset-info h3{font-size:0.95rem;color:#fff;margin-bottom:4px;font-weight:600;} .nm-preset-info p{font-size:0.8rem;color:rgba(255,255,255,0.6);line-height:1.4;} .nm-preset-meta{display:flex;gap:8px;margin-top:8px;font-size:0.75rem;color:rgba(255,255,255,0.5);flex-wrap:wrap;} .nm-preset-tag{background:rgba(201,169,97,0.1);color:var(--nm-gold);padding:2px 8px;border-radius:4px;border:1px solid rgba(201,169,97,0.3);font-size:0.7rem;} .nm-preset-check{position:absolute;top:12px;right:12px;width:24px;height:24px;background:var(--nm-gold);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#000;font-size:0.9rem;opacity:0;transform:scale(0);transition:all 0.3s ease;} .nm-preset-card.active .nm-preset-check{opacity:1;transform:scale(1);} .nm-color-section{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,0.05);transition:background 0.3s;border-radius:12px;padding:12px;margin-left:-12px;margin-right:-12px;} .nm-color-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:12px;} .nm-color-section.highlight{background:rgba(201,169,97,0.1);} .nm-color-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;} .nm-color-title{font-size:0.9rem;font-weight:600;color:rgba(255,255,255,0.9);display:flex;align-items:center;gap:8px;} .nm-color-picker-wrapper{display:flex;align-items:center;gap:8px;} .nm-color-input{width:44px;height:44px;border:none;border-radius:8px;cursor:pointer;background:none;overflow:hidden;padding:0;} .nm-color-input::-webkit-color-swatch-wrapper{padding:0;} .nm-color-input::-webkit-color-swatch{border:2px solid rgba(255,255,255,0.2);border-radius:6px;width:100%;height:100%;} .nm-hex-input{width:80px;padding:8px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:6px;color:#fff;font-family:'Courier New',monospace;font-size:0.8rem;text-transform:uppercase;} .nm-hex-input:focus{outline:none;border-color:var(--nm-gold);} .nm-quick-colors{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;} .nm-quick-color{width:28px;height:28px;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:all 0.2s;position:relative;box-shadow:0 2px 4px rgba(0,0,0,0.3);} .nm-quick-color:hover{transform:scale(1.15);z-index:2;border-color:rgba(255,255,255,0.5);} .nm-quick-color.active{border-color:var(--nm-gold);box-shadow:0 0 0 2px rgba(201,169,97,0.3);} .nm-quick-color.active::after{content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:bold;text-shadow:0 1px 2px rgba(0,0,0,0.8);} .nm-download-indicator{position:fixed;top:20px;right:20px;padding:12px 24px;border-radius:8px;font-weight:600;font-size:0.9rem;transform:translateX(200%);transition:transform 0.3s ease;z-index:1000;backdrop-filter:blur(10px);box-shadow:0 4px 12px rgba(0,0,0,0.3);display:flex;align-items:center;gap:8px;background:rgba(201,169,97,0.95);color:#000;} .nm-download-indicator.show{transform:translateX(0);} .nm-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:20px;} .nm-btn{padding:12px;border-radius:10px;font-size:0.85rem;font-weight:600;cursor:pointer;transition:all 0.3s;text-align:center;border:none;touch-action:manipulation;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;} @media (min-width:768px){.nm-btn{padding:14px;font-size:0.9rem;}} .nm-btn-primary{background:linear-gradient(135deg,var(--nm-gold) 0%,var(--nm-gold-light) 100%);color:#000;grid-column:span 1;} .nm-btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(201,169,97,0.3);} .nm-btn-secondary{background:rgba(255,255,255,0.05);color:#fff;border:1px solid rgba(255,255,255,0.2);} .nm-btn-secondary:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.4);} .nm-btn-camera{background:rgba(59,130,246,0.15);color:var(--nm-blue);border:1px solid var(--nm-blue);} .nm-btn-camera:hover{background:rgba(59,130,246,0.25);transform:translateY(-2px);} .nm-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:1000;align-items:center;justify-content:center;backdrop-filter:blur(5px);padding:20px;} .nm-modal.active{display:flex;} .nm-modal-content{background:linear-gradient(145deg,#1a1a2e 0%,#16213e 100%);border:1px solid rgba(201,169,97,0.3);border-radius:24px;padding:30px;max-width:500px;width:100%;max-height:85vh;overflow-y:auto;position:relative;} @media (min-width:768px){.nm-modal-content{padding:40px;}} .nm-modal-close{position:absolute;top:20px;right:20px;background:none;border:none;color:rgba(255,255,255,0.6);font-size:1.5rem;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all 0.3s;} .nm-modal-close:hover{background:rgba(255,255,255,0.1);color:#fff;} .nm-form-group{margin-bottom:20px;} .nm-form-group label{display:block;margin-bottom:8px;font-size:0.9rem;color:rgba(255,255,255,0.8);font-weight:500;} .nm-form-group input,.nm-form-group textarea,.nm-form-group select{width:100%;padding:12px 16px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:10px;color:#fff;font-size:1rem;transition:all 0.3s;} .nm-form-group input:focus,.nm-form-group textarea:focus,.nm-form-group select:focus{outline:none;border-color:var(--nm-gold);background:rgba(255,255,255,0.08);} .nm-ref-display{background:rgba(201,169,97,0.1);border:1px solid rgba(201,169,97,0.3);border-radius:8px;padding:12px;text-align:center;font-family:'Courier New',monospace;font-size:1.1rem;color:var(--nm-gold);margin-bottom:20px;letter-spacing:1px;} @media (max-width:639px){.nm-palette-summary{grid-template-columns:repeat(4,1fr);gap:8px;padding:12px;} .nm-scene-btn span{display:none;} .nm-scene-btn{padding:8px;}}