.tool-page-header{max-width:1200px;margin:0 auto 2rem;padding:2rem}.tool-title-section{gap:1.5rem;padding:2rem;background:var(--bg-secondary);border:2px solid var(--accent-cyan);margin-top:1rem}.tool-icon-large,.tool-title-section{display:flex;align-items:center;border-radius:12px}.tool-icon-large{font-size:4rem;width:80px;height:80px;justify-content:center;background:var(--bg-tertiary);flex-shrink:0}.tool-title{font-family:Press Start\ 2P,cursive;font-size:1.8rem;color:var(--accent-cyan);margin:0 0 .5rem}.tool-subtitle{color:var(--text-secondary);font-size:1rem;margin:0}.tool-container{max-width:1200px;margin:0 auto;padding:0 2rem 4rem}.color-picker-section{background:var(--bg-secondary);border:2px solid var(--accent-cyan);padding:2rem}.color-display,.color-picker-section{border-radius:12px;margin-bottom:2rem}.color-display{width:100%;height:200px;position:relative;cursor:pointer;border:2px solid var(--border-color);display:flex;align-items:center;justify-content:center}.color-input{width:100px;height:100px;border:4px solid #fff;border-radius:50%;cursor:pointer;box-shadow:0 4px 20px rgba(0,0,0,.3)}.color-values{display:grid;grid-gap:1.5rem;gap:1.5rem}.color-value-item{display:flex;flex-direction:column;gap:.75rem}.section-header{display:flex;justify-content:space-between;align-items:center}.section-label{font-family:Noto Sans TC,sans-serif;font-weight:700;color:var(--accent-cyan);font-size:.95rem;text-transform:uppercase;letter-spacing:1px}.color-value-input{width:100%;padding:1rem;background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-family:IBM Plex Mono,monospace;font-size:1rem;font-weight:600}.color-value-input:focus{outline:none;border-color:var(--accent-cyan)}.preset-colors{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;padding:1.5rem;margin-bottom:2rem}.preset-colors h4{margin:0 0 1rem;color:var(--text-primary)}.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));grid-gap:1rem;gap:1rem}.preset-color-btn{width:100%;aspect-ratio:1;border:2px solid var(--border-color);border-radius:8px;cursor:pointer;transition:all .3s ease}.preset-color-btn:hover{transform:scale(1.1);border-color:var(--accent-cyan);box-shadow:0 0 15px rgba(0,255,249,.5)}.copy-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:transparent;border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-size:.85rem;cursor:pointer;transition:all .3s ease}.copy-btn:hover{border-color:var(--accent-cyan);color:var(--accent-cyan);background:rgba(0,255,249,.1)}.tool-info{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;padding:2rem}.tool-info h3{font-family:Noto Sans TC,sans-serif;color:var(--accent-cyan);font-size:1.1rem;margin:0 0 1rem}.tool-info ul{list-style:none;padding:0;margin:0 0 2rem}.tool-info ul:last-child{margin-bottom:0}.tool-info li{padding:.5rem 0 .5rem 1.5rem;position:relative;color:var(--text-secondary);line-height:1.6}.tool-info li:before{content:"→";position:absolute;left:0;color:var(--accent-cyan);font-weight:700}.tool-info strong{color:var(--text-primary)}@media (max-width:768px){.tool-title-section{flex-direction:column;align-items:flex-start}.tool-title{font-size:1.3rem}}