body{background:#fff;color:#333;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.navbar{border-radius:0;margin-bottom:0}.page-wrap{padding-bottom:36px;padding-top:22px}h1{font-size:30px;margin-bottom:8px;margin-top:0}h1,h3{font-weight:500}h3{font-size:20px;margin-bottom:12px;margin-top:22px}.intro-text{color:#666;line-height:1.7;margin-bottom:18px}.mono{font-family:Menlo,Monaco,Consolas,Courier New,monospace}.section-title{font-size:16px;font-weight:600;margin:0 0 10px}.help-text{color:#777;line-height:1.6;margin-bottom:0;margin-top:6px}.tool-main-row{margin-left:-10px;margin-right:-10px}.tool-main-row>[class*=col-]{padding-left:10px;padding-right:10px}.image-input-row{margin-bottom:12px}.image-toolbar{display:none;margin:10px 0 8px}.image-toolbar .btn{margin-bottom:5px;margin-right:5px}.image-meta{color:#666;font-size:13px;line-height:1.6;margin-bottom:8px}.image-placeholder{background:#fafafa;border:1px dashed #ccc;border-radius:4px;color:#777;padding:12px}.image-box{background:#fafafa;border:1px solid #ddd;border-radius:3px;display:none;max-height:660px;outline:none;overflow:auto;padding:10px;position:relative}.image-box.active{display:block}.image-box.actual-size #sourceImage,.image-box.actual-size .image-stage{max-width:none}.image-stage{display:inline-block;line-height:0;position:relative}#sourceImage,.image-stage{cursor:none;max-width:100%}#sourceImage{-webkit-user-drag:none;display:block;height:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none}.image-cursor{display:none;height:25px;margin-left:-12px;margin-top:-12px;pointer-events:none;position:absolute;width:25px;z-index:2}.image-cursor:after,.image-cursor:before{background:#111;box-shadow:0 0 0 1px hsla(0,0%,100%,.9);content:"";position:absolute}.image-cursor:before{height:25px;left:12px;top:0;width:1px}.image-cursor:after{height:1px;left:0;top:12px;width:25px}.image-cursor.active{display:block}.other-inputs{border-top:1px solid #eee;margin-top:16px;padding-top:14px}.method-box{background:#fafafa;border:1px solid #e5e5e5;border-radius:4px;margin-bottom:10px;padding:12px}.method-title{font-weight:600;margin:0 0 8px}.method-box .form-inline .form-group{margin-bottom:8px;margin-right:8px}input[type=color].color-control{cursor:pointer;height:34px;padding:2px;vertical-align:middle;width:64px}.manual-hex{width:220px}.result-side-inner{background:#fff}.current-color-box,.result-side-inner{border:1px solid #ddd;border-radius:4px;padding:12px}.current-color-box{background:#fafafa;margin:0 0 12px}.selected-preview{background:#2563eb;border:1px solid #bbb;height:46px;margin-right:10px;width:46px}.selected-preview,.selected-value{display:inline-block;vertical-align:middle}.selected-value{font-size:18px;font-weight:600}.selected-actions{display:inline-block;margin-left:10px;vertical-align:middle}.result-title{margin-top:14px}.result-table{margin-bottom:0;margin-top:10px}.result-table td{vertical-align:middle!important}.result-name{font-weight:600;width:90px}.copy-value{margin-left:6px}.enhance-block{border-top:1px solid #eee;margin-top:16px;padding-top:14px}.enhance-head{align-items:baseline;display:flex;gap:8px;justify-content:space-between;margin-bottom:8px}.enhance-head .section-title{margin-bottom:0}.enhance-note{color:#888;font-size:12px;white-space:nowrap}.card-grid{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}.color-card{background:#fff;border:1px solid #e5e5e5;border-radius:4px;overflow:hidden}.color-card:hover{border-color:#cfcfcf}.color-swatch{border-bottom:1px solid rgba(0,0,0,.08);cursor:pointer;height:46px}.color-card-body{padding:7px 8px 8px}.color-card-name{color:#666;font-size:12px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.color-card-row{align-items:center;display:flex;gap:6px;justify-content:space-between;margin-top:2px}.color-card-value{color:#333;font-size:12px;font-weight:600}.color-card-copy{line-height:1.4;padding:1px 6px}.shade-row{background:#fff;border:1px solid #e5e5e5;border-radius:4px;display:flex;overflow:hidden}.shade-item{cursor:pointer;flex:1;height:42px;min-width:0;position:relative}.shade-item:hover:after{background:rgba(0,0,0,.82);border-radius:3px;bottom:100%;color:#fff;content:attr(data-hex);font-size:11px;left:50%;margin-bottom:5px;padding:3px 5px;position:absolute;transform:translateX(-50%);white-space:nowrap;z-index:3}.shade-actions{align-items:center;display:flex;gap:8px;justify-content:space-between;margin-top:8px}.shade-actions .mono{color:#666;font-size:12px}.palette-wrap{padding-bottom:2px}.palette-section{margin-top:10px}.palette-label{color:#666;font-size:12px;font-weight:600;letter-spacing:.02em;margin-bottom:6px;text-transform:uppercase}.ui-tool-box{background:#fafafa;border:1px solid #e5e5e5;border-radius:4px;margin-bottom:10px;padding:10px}.ui-tool-box:last-child{margin-bottom:0}.ui-tool-title{color:#555;font-size:13px;font-weight:600;margin-bottom:8px}.contrast-card{background:#fff;border:1px solid #e5e5e5;border-radius:4px;overflow:hidden}.preview-grid{display:grid;gap:0;grid-template-columns:repeat(2,minmax(0,1fr))}.contrast-preview{border-bottom:1px solid #eee;display:flex;flex-direction:column;font-weight:600;justify-content:center;line-height:1.45;min-height:84px;padding:12px 10px;text-align:center}.contrast-preview:first-child{border-right:1px solid #eee}.preview-label{background:hsla(0,0%,100%,.75);border:1px solid rgba(0,0,0,.08);border-radius:10px;color:#333;display:inline-block;font-size:11px;font-weight:600;line-height:1.2;margin:0 auto 7px;padding:2px 7px}.contrast-preview.dark-label .preview-label{background:rgba(0,0,0,.22);border-color:hsla(0,0%,100%,.22);color:#fff}.contrast-best{align-items:center;background:#fafafa;border-bottom:1px solid #eee;display:flex;gap:8px;justify-content:space-between;padding:8px}.contrast-best-text{color:#555;font-size:12px}.contrast-hint{background:#fff;border-bottom:1px solid #eee;color:#666;font-size:12px;line-height:1.45;padding:7px 8px}.contrast-table{margin:0;width:100%}.contrast-table td{border-top:1px solid #f1f1f1;font-size:12px;padding:6px 8px;vertical-align:middle}.contrast-table tr:first-child td{border-top:0}.contrast-lc,.contrast-ratio{font-weight:600;white-space:nowrap}.contrast-badge{background:#fff;border:1px solid #ddd;border-radius:10px;color:#555;display:inline-block;font-size:11px;line-height:1.2;padding:2px 6px;white-space:nowrap}.contrast-badge.pass{background:#f6fbf6;border-color:#b7d7b7;color:#2f6b2f}.contrast-badge.warn{background:#fffaf0;border-color:#e6d6a8;color:#7a5a00}.contrast-badge.fail{background:#fff6f6;border-color:#e3b4b4;color:#8a3333}.contrast-badge.design{background:#f5f8ff;border-color:#c8d7ef;color:#315a91}.ui-pair-row{align-items:center;background:#fafafa;border-bottom:1px solid #eee;display:flex;gap:8px;justify-content:space-between;padding:7px 8px}.ui-pair-title{color:#555;font-size:12px;line-height:1.4}.ui-pair-values{color:#333;margin-top:2px}.ui-pair-values .mono{font-weight:600}.small-muted{color:#777;font-size:11px}.css-tools .btn{margin-bottom:8px}.css-preview{background:#fff;color:#555;display:block;font-size:12px;line-height:1.5;margin:0;max-height:156px;overflow:auto;padding:8px;white-space:pre}.css-preview,.image-palette-block{border:1px solid #e5e5e5;border-radius:4px}.image-palette-block{background:#fafafa;display:none;margin-top:14px;padding:12px}.image-palette-block.active{display:block}.image-palette-grid{display:grid;gap:8px;grid-template-columns:repeat(4,minmax(0,1fr))}.image-palette-chip{background:#fff;border:1px solid #e5e5e5;border-radius:4px;overflow:hidden}.image-palette-chip:hover{border-color:#ccc}.image-palette-swatch{border-bottom:1px solid rgba(0,0,0,.08);cursor:pointer;height:38px}.image-palette-info{padding:6px;text-align:center}.image-palette-info .mono{display:block;font-size:12px;margin-bottom:5px}.image-palette-empty{color:#777;font-size:13px}.loupe{background:#fff;border:1px solid #999;border-radius:3px;box-shadow:0 4px 18px rgba(0,0,0,.22);display:none;padding:8px;pointer-events:none;position:fixed;width:226px;z-index:9999}#loupeCanvas,.loupe.active{display:block}#loupeCanvas{border:1px solid #ccc;height:204px;image-rendering:pixelated;width:204px}.loupe-text{color:#555;font-size:12px;line-height:1.45;margin-top:6px}.loupe-text strong{color:#333}.privacy{background:#f8f8f8;border-left:4px solid #337ab7;color:#555;margin:22px 0;padding:12px 15px}.content-block{line-height:1.7;margin-top:22px}.footer{border-top:1px solid #eee;color:#777;margin-top:28px;padding:18px 0;text-align:center}.toast-msg{background:rgba(0,0,0,.82);border-radius:3px;bottom:22px;color:#fff;left:50%;padding:9px 14px;position:fixed;transform:translateX(-50%);z-index:10000}.hidden-canvas,.toast-msg{display:none}@media (min-width:992px){.result-side-inner{position:sticky;top:15px}}@media (max-width:991px){.result-side-inner{margin-top:16px}}@media (max-width:767px){h1{font-size:26px}.tool-panel{padding:12px}.image-box{max-height:430px}.loupe{display:none!important}.method-box .form-inline .form-group{display:block;margin-right:0}input[type=color].color-control{display:block;height:42px;margin-top:6px;width:100%}.manual-hex{margin-top:8px;width:100%}.selected-preview{height:42px;width:42px}.selected-value{display:block;font-size:16px;margin-top:8px}.selected-actions{display:block;margin:8px 0 0}.card-grid{grid-template-columns:1fr 1fr}.preview-grid{grid-template-columns:1fr}.contrast-preview:first-child{border-right:0}.enhance-note{display:none}.image-palette-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.left-palette-wrap{background:#fafafa;border:1px solid #e5e5e5;border-radius:4px;margin-top:16px;padding:12px}.left-palette-wrap .card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.left-palette-wrap .color-swatch{height:40px}.left-palette-wrap .palette-section{margin-top:12px}.left-palette-wrap .shade-row{background:#fff}@media (max-width:1199px) and (min-width:992px){.left-palette-wrap .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:767px){.left-palette-wrap .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.privacy{border:0}