:root{--bg:#f5f7fa;--card:#fff;--border:#e1e5ea;--text:#18202a;--muted:#667085;--primary:#111827;--primary2:#374151;--danger:#dc2626;--success:#15803d}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text)}
.container{width:min(1920px,calc(100% - 28px));margin:38px auto}
.header{text-align:center;margin-bottom:24px}.header h1{margin:0 0 8px;font-size:clamp(28px,5vw,42px);line-height:1.12}.header p{margin:0;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:28px;box-shadow:0 12px 36px rgba(0,0,0,.055)}
.preview{height:100px;border-radius:14px;position:relative;overflow:hidden;display:grid;place-items:center;margin-bottom:24px;background-color:#ddd;background-image:linear-gradient(45deg,#ddd 25%,transparent 25%),linear-gradient(-45deg,#ddd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ddd 75%),linear-gradient(-45deg,transparent 75%,#ddd 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}
.preview-color{position:absolute;inset:0}.preview-content{position:relative;text-align:center;color:#fff;text-shadow:0 2px 5px rgba(0,0,0,.65)}.preview-hex{font-size:clamp(26px,5vw,40px);font-weight:800}.preview-rgba{margin-top:6px;font:14px monospace}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px; margin-bottom: 18px;}.panel{border:1px solid var(--border);border-radius:12px;padding:17px} .panel h2 {font-size:20px; margin: 0 0 12px;} .panel-title{font-weight:800;margin-bottom:12px;font-size:14px}
.input-line{display:flex;gap:12px;align-items:center}.input-line input[type=text]{flex:1}
input[type=text],input[type=number]{width:100%;height:45px;border:1px solid var(--border);border-radius:8px;padding:0 12px;outline:none;background:#fff;color:var(--text)}input:focus{border-color:#9ca3af;box-shadow:0 0 0 3px rgba(156,163,175,.14)}
.color-picker-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 76px}.color-picker{width:58px;height:58px;padding:0;border:3px solid #fff;border-radius:50%;overflow:hidden;cursor:pointer;box-shadow:0 0 0 1px #cfd4dc,0 3px 8px rgba(0,0,0,.1)}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:0;border-radius:50%}.color-picker::-moz-color-swatch{border:0;border-radius:50%}.picker-hint{font-size:11px;color:var(--muted);white-space:nowrap}
.fields{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.field label{display:block;font-size:11px;color:var(--muted);font-weight:700;margin-bottom:5px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}button{border:0;border-radius:8px;padding:11px 16px;cursor:pointer;font-weight:700}.primary{background:var(--primary);color:#fff}.primary:hover{background:var(--primary2)}.secondary{background:#edf0f3;color:#273142}.secondary:hover{background:#e1e5e9}
.outputs{margin-top:4px}.outputs h2{font-size:20px;margin:0 0 12px}.output-grid{display:grid;grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr);  gap:10px; margin-top:14px; }.output{border:1px solid var(--border);border-radius:10px;padding:13px}.output-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:7px}.output-head span{font-size:11px;color:var(--muted);font-weight:800;text-transform:uppercase}.copy{padding:5px 9px;background:#edf0f3;color:#374151;font-size:11px}.output-value{font:14px monospace;background:#f8fafc;border-radius:7px;padding:10px;word-break:break-all}.message{min-height:20px;margin-top:10px;font-size:13px}.error{color:var(--danger)}.success{color:var(--success)}
.info{margin-top:24px;color:var(--muted);line-height:1.7}.info h2{color:var(--text);font-size:22px}.footer{text-align:center;color:var(--muted);font-size:12px;margin:18px 0 30px}
@media(max-width:760px){.grid,.output-grid{grid-template-columns:1fr}}
@media(max-width:520px){.card{padding:18px}.fields{grid-template-columns:repeat(2,1fr)}.preview{height:155px}.actions button{flex:1}.container{margin:22px auto}}

/* v2 picker refinement */
.color-picker-control,
.picker-wrap {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
}
.color-picker-control input[type="color"],
.color-picker {
    width:58px !important;
    height:58px !important;
    padding:0 !important;
    border:3px solid #fff !important;
    border-radius:50% !important;
    overflow:hidden;
    cursor:pointer;
    box-shadow:0 0 0 1px #cfd4dc,0 3px 8px rgba(0,0,0,.12);
}
.color-picker-control input[type="color"]::-webkit-color-swatch-wrapper,
.color-picker::-webkit-color-swatch-wrapper {padding:0}
.color-picker-control input[type="color"]::-webkit-color-swatch,
.color-picker::-webkit-color-swatch,
.color-picker-control input[type="color"]::-moz-color-swatch,
.color-picker::-moz-color-swatch {border:0;border-radius:50%}
.color-picker-hint,
.picker-hint {font-size:11px;color:#667085;white-space:nowrap}
.tool-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 0 22px;margin-bottom:22px;border-bottom:1px solid #e1e5ea}
.tool-links{display:flex;gap:12px;flex-wrap:wrap}
.tool-links a{font-size:12px;color:#667085;text-decoration:none}
.tool-links a:hover{color:#111827}

.code-panel{border:1px solid #e1e5ea;border-radius:12px;padding:17px;margin-top:14px}.code-panel.primary-input{border:2px solid #111827;background:#fbfcfe}.code-label-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}.code-label{font-size:14px;font-weight:900}.primary-badge{font-size:10px;font-weight:900;text-transform:uppercase;background:#111827;color:#fff;border-radius:999px;padding:4px 7px}.code-hint{font-size:12px;color:#667085;margin:0 0 9px;line-height:1.5}.code-input{width:100%;height:48px;border:1px solid #d7dce3;border-radius:8px;padding:0 13px;font:14px monospace;background:#fff;color:#17202a;outline:0}.code-input:focus{border-color:#111827;box-shadow:0 0 0 3px rgba(17,24,39,.1)}

/* v5 layout refinement */
.full-width-section {
    width: 100%;
    margin-top: 0;
}
.bottom-actions {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--border, #e1e5ea);
}
.bottom-actions button {
    min-width: 120px;
}
@media (max-width: 520px) {
    .bottom-actions {
        justify-content: stretch;
    }
    .bottom-actions button {
        flex: 1;
        min-width: 0;
    }
}