.color-container{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;position:relative;transition:background-color .3s ease}.color-card{max-width:600px;width:100%;background:#fffffff2;backdrop-filter:blur(10px);border-radius:16px;box-shadow:0 8px 32px #00000026;border:none}.color-title{margin:0!important;color:#1890ff;text-align:center}.color-picker-wrapper{display:flex;justify-content:center;padding:20px 0}.color-info-section{display:flex;flex-direction:column;gap:12px;width:100%}.color-info-row{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:linear-gradient(135deg,#f5f5f5,#fafafa);border-radius:8px;transition:all .2s ease;border:1px solid #e8e8e8}.color-info-row:hover{background:linear-gradient(135deg,#f0f0f0,#f5f5f5);border-color:#d9d9d9;transform:translate(4px)}.color-info-row .color-label{font-weight:600;color:#333;min-width:60px;font-size:14px}.color-info-row .color-value{flex:1;margin:0 16px;font-family:Courier New,monospace;font-size:14px;color:#666;word-break:break-all}.color-info-row .color-actions{display:flex;gap:8px}.fullscreen-tips{text-align:center;padding:20px 24px;background:linear-gradient(135deg,#fffffff2,#ffffffd9);backdrop-filter:blur(10px);border-radius:12px;box-shadow:0 4px 16px #0000001a;border:1px solid rgba(24,144,255,.2);max-width:600px;margin:20px auto 0}.fullscreen-tips .tips-title{font-size:20px;font-weight:700;color:#1890ff;margin-bottom:16px;display:flex;align-items:center;justify-content:center;gap:8px}.fullscreen-tips .tips-content{color:#666;font-size:14px;line-height:1.8}.fullscreen-tips .tips-content p{margin:8px 0}.fullscreen-tips .tips-content strong{color:#1890ff;font-weight:600}.action-btns{display:flex;gap:12px;justify-content:center;margin-top:20px}.fullscreen-btn{background:#fff3;border:1px solid rgba(255,255,255,.4);color:#fff;backdrop-filter:blur(4px);transition:all .3s ease}.fullscreen-btn:hover{background:#ffffff4d;border-color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #ffffff4d}.color-display-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;width:100%;max-width:800px}.hidden{display:none!important}