*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background: var(--bg);
    color: var(--text);
    font-family: "Inter", sans-serif;
    overflow-x: hidden;
}

.hero-bg{

    position: absolute;

    width: 700px;
    height: 700px;

    background: radial-gradient(
        circle,
        rgba(99,102,241,.30),
        transparent 70%
    );

    top:-250px;
    left:50%;

    transform:translateX(-50%);

    filter:blur(60px);

    z-index:-1;

}

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    color:white;

    font-weight:700;

    font-size:1.2rem;

}

.logo-icon{

    width:42px;

    height:42px;

    display:grid;

    place-items:center;

    border-radius:12px;

    background:var(--primary);

}

.nav-links{

    display:flex;

    gap:30px;

}

.nav-links a{

    text-decoration:none;

    color:var(--text-light);

    transition:.2s;

}

.nav-links a:hover{

    color:white;

}


.theme-btn{

    width:45px;

    height:45px;

    border:none;

    border-radius:12px;

    background:var(--surface);

    cursor:pointer;

    color:white;

}

.badge{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(99,102,241,.15);

    border:1px solid rgba(99,102,241,.4);

    margin-bottom:30px;

}


.container{

    width:min(90%,var(--container));

    margin:auto;

}

header{

    border-bottom:1px solid var(--border);

}

nav{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:80px;

}

.hero{

    text-align:center;

    padding:100px 0;

}

.hero h2{

    font-size:3.5rem;

    margin-bottom:20px;

}

.hero p{

    color:var(--text-light);

    margin-bottom:40px;

    font-size:1.2rem;

}

.search-box{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

}



.search-hint{

    color:var(--text-light);

    font-size:.85rem;

}



.search-hint kbd{

    display:inline-block;

    padding:3px 8px;

    border-radius:6px;

    background:#111827;

    border:1px solid var(--border);

    font-family:inherit;

    font-size:.8rem;

}



.section-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    margin-bottom:24px;

}



.section-header p{

    color:var(--text-light);

    margin-top:8px;

}



.category-filters{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin-bottom:28px;

}



.category-filter{

    padding:10px 16px;

    border-radius:999px;

    border:1px solid var(--border);

    background:#111827;

    color:var(--text-light);

    cursor:pointer;

    font-weight:600;

    font-size:.85rem;

    transition:.2s;

}



.category-filter:hover{

    color:white;

    border-color:var(--primary);

}



.category-filter.is-active{

    background:rgba(99,102,241,.18);

    border-color:var(--primary);

    color:white;

}

.category-filter--fav.is-active{
    background:rgba(245,158,11,.16);
    border-color:rgba(245,158,11,.45);
    color:#FBBF24;
}



.tool-category{

    display:inline-block;

    margin-bottom:10px;

    font-size:.75rem;

    font-weight:600;

    letter-spacing:.5px;

    text-transform:uppercase;

    color:#818CF8;

}



.tool-empty-state{

    padding:40px 20px;

    border:none;

    background:transparent;

}



.empty-state{

    text-align:center;

    padding:70px 20px;

    background:rgba(30,41,59,.45);

    border:1px dashed var(--border);

    border-radius:22px;

}



.empty-state-icon{

    font-size:2.5rem;

    display:block;

    margin-bottom:16px;

}



.empty-state h4{

    margin-bottom:10px;

    font-size:1.4rem;

}



.empty-state p{

    color:var(--text-light);

}

.search-box input{

    width:700px;
    max-width:100%;

    padding:20px 24px;

    background:#111827;

    border:1px solid var(--border);

    border-radius:18px;

    color:white;

    font-size:1rem;

    transition:.25s;

}

.search-box input:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 5px rgba(99,102,241,.15);

}

.tools{

    padding-bottom:100px;

}

.tools h3{

    margin-bottom:30px;

    font-size:2rem;

}

.tool-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

    padding-right:44px;

}

.tool-fav-btn{
    position:absolute;
    top:22px;
    right:22px;
    z-index:2;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    padding:0;
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    background:rgba(15,23,42,.75);
    color:#94A3B8;
    cursor:pointer;
    transition:color .2s, border-color .2s, background .2s;
}

.tool-fav-btn:hover{
    color:#FBBF24;
    border-color:rgba(245,158,11,.4);
    background:rgba(245,158,11,.1);
}

.tool-fav-btn:focus-visible{
    outline:2px solid rgba(245,158,11,.7);
    outline-offset:2px;
}

.tool-fav-btn.is-active{
    color:#FBBF24;
    border-color:rgba(245,158,11,.45);
    background:rgba(245,158,11,.14);
}

.tool-fav-btn__icon{
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.75;
    stroke-linejoin:round;
}

.tool-fav-btn.is-active .tool-fav-btn__icon{
    fill:currentColor;
    stroke:currentColor;
}

.tool-icon{

    width:55px;
    height:55px;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        var(--primary),
        #8B5CF6
    );

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.3rem;

    font-weight:700;

    transition:.3s;

}

.tool-tags{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin-top:25px;

}

.tool-tags span{

    padding:8px 12px;

    border-radius:999px;

    background:#111827;

    color:var(--text-light);

    font-size:.8rem;

}

.tool-card:hover .tool-icon{

    transform:scale(1.12) rotate(6deg);

}

.tool-badge{

    font-size:.75rem;

    padding:6px 10px;

    border-radius:999px;

    background:rgba(16,185,129,.15);

    color:#34D399;

    border:1px solid rgba(16,185,129,.3);

}

.tool-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:25px;

}

.tool-card{

    position:relative;

    background:rgba(30,41,59,.55);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.06);

    border-radius:20px;

    padding:30px;

    transition:.3s;

}

.tool-card__link{

    display:block;

    text-decoration:none;

    color:inherit;

    cursor:pointer;

}

.tool-card:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

    box-shadow:0 20px 50px rgba(99,102,241,.18);

}

.tool-card h4{

    margin-bottom:15px;

}

.tool-card p{

    color:var(--text-light);

}

footer{

    border-top:1px solid var(--border);

    padding:35px;

    text-align:center;

    color:var(--text-light);

}

textarea{

    width:100%;

    height:400px;

    margin-top:40px;

    background:#111827;

    color:white;

    border:1px solid var(--border);

    border-radius:16px;

    padding:20px;

    resize:vertical;

    font-size:15px;

    font-family:monospace;

}

.button-row{

    display:flex;

    gap:15px;

    margin-top:25px;

    flex-wrap:wrap;

}

.button-row button{

    padding:14px 22px;

    background:var(--primary);

    color:white;

    border:none;

    border-radius:12px;

    cursor:pointer;

    transition:.2s;

}

.button-row button:hover{

    background:var(--primary-hover);

}

.tool-page{

    padding:70px 0;

}


.tool-title{

    text-align:center;

    margin-bottom:45px;

}


.tool-title h1{

    font-size:3rem;

    margin-bottom:15px;

}



.tool-title p{

    color:var(--text-light);

}



.toolbar{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    flex-wrap:wrap;

    margin-bottom:35px;

}



.btn{

    padding:13px 22px;

    border-radius:14px;

    border:none;

    cursor:pointer;

    font-weight:600;

    transition:.2s;

}



.btn:hover{

    transform:translateY(-2px);

}



.btn input{

    display:none;

}



.primary{

    background:#6366F1;

    color:white;

}



.secondary{

    background:#1E293B;

    color:white;

    border:1px solid #334155;

}



.danger{

    background:#DC2626;

    color:white;

}




.json-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;

}



.editor-card{

    background:#1E293B;

    border:1px solid #334155;

    border-radius:22px;

    padding:20px;

    height:650px;

    display:flex;

    flex-direction:column;

}



.editor-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:36px;

    margin-bottom:15px;

}



.editor-header h3{

    color:#94A3B8;

    font-size:.85rem;

    letter-spacing:1px;

    margin: 0;

}



.editor-header button{

    background:#6366F1;

    color:white;

    border:none;

    padding:6px 14px;

    height:30px;

    border-radius:8px;

    cursor:pointer;

    font-size:0.85rem;

}


.editor{

    flex:1;

    min-height:0;

}

.status-bar{

    margin-bottom:20px;

    padding:14px 18px;

    border-radius:12px;

    background:#111827;

    border:1px solid #334155;

    color:#94A3B8;

    font-weight:500;

    transition:.25s;

}

.status-bar.success{

    color:#4ADE80;

    border-color:#4ADE80;

}

.status-bar.error{

    color:#F87171;

    border-color:#F87171;

}


#toast {

    position:fixed;

    top:30px;

    right:30px;

    background:#22C55E;

    color:white;

    padding:14px 22px;

    border-radius:14px;

    font-weight:600;

    opacity:0;

    transform:translateY(-20px);

    pointer-events:none;

    transition:.3s;

    box-shadow:
    0 10px 30px rgba(0,0,0,.3);

    z-index:9999;

}


#toast.show {

    opacity:1;

    transform:translateY(0);

}

.tool-back-btn{

    font-size:.9rem;

    padding:10px 16px;

    text-decoration:none;

}



.gradient-type-switch,
.radial-shape-switch{

    display:flex;

    gap:10px;

    justify-content:center;

    flex-wrap:wrap;

    margin-bottom:22px;

}



.gradient-type-switch .btn.is-active,
.radial-shape-switch .btn.is-active{

    background:var(--primary);

    border-color:var(--primary);

    color:white;

}



.radial-shape-switch{

    margin-bottom:18px;

}



.control-label{

    display:flex;

    align-items:center;

    color:var(--text-light);

    font-weight:600;

    margin-right:6px;

}



#radialControl label{

    display:block;

    margin:18px 0 10px;

    font-weight:600;

}



#radialControl label:first-of-type{

    margin-top:0;

}



.uuid-panel{

    background:#1E293B;

    border:1px solid #334155;

    border-radius:22px;

    padding:20px;

}



.uuid-list{

    display:flex;

    flex-direction:column;

    gap:12px;

    max-height:520px;

    overflow-y:auto;

}



.uuid-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    background:#0F172A;

    border:1px solid #334155;

    border-radius:14px;

    padding:14px 16px;

}



.uuid-value{

    font-family:"JetBrains Mono",monospace;

    color:#E2E8F0;

    font-size:.95rem;

    word-break:break-all;

}



.uuid-copy-btn{

    flex-shrink:0;

    padding:8px 14px;

}



.uuid-bulk-label{

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--text-light);

    font-weight:600;

}



.uuid-bulk-label input{

    width:72px;

    padding:10px 12px;

    border-radius:12px;

    border:1px solid #334155;

    background:#111827;

    color:white;

    font-weight:600;

}



.jwt-input-card{

    background:#1E293B;

    border:1px solid #334155;

    border-radius:22px;

    padding:20px;

    margin-bottom:25px;

}



.jwt-input-card label{

    display:block;

    margin-bottom:12px;

    color:#94A3B8;

    font-size:.85rem;

    letter-spacing:1px;

    font-weight:600;

}



.jwt-input-card textarea{

    width:100%;

    min-height:120px;

    margin-top:0;

    background:#0F172A;

    border:1px solid #334155;

    border-radius:14px;

    padding:16px;

    color:#E2E8F0;

    font-family:"JetBrains Mono",monospace;

    font-size:.9rem;

    resize:vertical;

}



.jwt-output-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}



.jwt-output-card{

    background:#1E293B;

    border:1px solid #334155;

    border-radius:22px;

    padding:20px;

    min-height:220px;

}



.jwt-signature-card{

    grid-column:1 / -1;

}



.jwt-output-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:14px;

}



.jwt-output-header h3{

    color:#94A3B8;

    font-size:.85rem;

    letter-spacing:1px;

}



.jwt-output{

    margin:0;

    white-space:pre-wrap;

    word-break:break-word;

    color:#E2E8F0;

    font-family:"JetBrains Mono",monospace;

    font-size:.88rem;

    line-height:1.6;

}



.jwt-signature{

    color:#94A3B8;

}



.gradient-toolbar{

    margin-bottom:30px;

}



.gradient-workspace{

    display:grid;

    grid-template-columns:minmax(0,1.35fr) minmax(320px,0.85fr);

    grid-template-areas:
        "preview controls"
        "output controls";

    gap:24px;

    align-items:start;

}



.gradient-preview-area{

    grid-area:preview;

    min-width:0;

}



.gradient-controls-column{

    grid-area:controls;

    min-width:0;

}



.gradient-output-area{

    grid-area:output;

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:18px;

}



.gradient-controls-sticky{

    position:sticky;

    top:var(--sticky-offset);

    display:flex;

    flex-direction:column;

    gap:18px;

}



.gradient-mode-panel{

    background:#1E293B;

    border:1px solid #334155;

    border-radius:18px;

    padding:18px 20px;

}



.gradient-panel-label{

    display:block;

    margin-bottom:12px;

    color:#94A3B8;

    font-size:.8rem;

    font-weight:700;

    letter-spacing:.6px;

    text-transform:uppercase;

}



.gradient-mode-panel .gradient-type-switch{

    margin-bottom:0;

    justify-content:flex-start;

}



.gradient-controls-column .gradient-controls,
.gradient-controls-column .gradient-angle-control{

    margin-top:0;

}



.gradient-output-area .css-output,
.gradient-output-area .gradient-export-panel{

    margin-top:0;

}



.gradient-presets{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    justify-content:center;

}



.gradient-tool-preview{

    width:100%;

    height:320px;

    border-radius:30px;

    margin:0 auto 18px;

    box-shadow:

    0 25px 70px rgba(0,0,0,.35);

    transition:background .25s ease;

}



.gradient-bar{

    position:relative;

    height:56px;

    margin-bottom:30px;

    border-radius:18px;

    border:1px solid rgba(255,255,255,.08);

    background:#0F172A;

    cursor:crosshair;

    overflow:visible;

}



.gradient-bar-track{

    position:absolute;

    inset:8px;

    border-radius:12px;

    transition:background .2s ease;

    overflow:visible;

}



.gradient-bar-handle{

    position:absolute;

    top:50%;

    width:22px;

    height:22px;

    margin-top:-11px;

    border:3px solid white;

    border-radius:50%;

    transform:translateX(-50%);

    cursor:grab;

    box-shadow:0 4px 14px rgba(0,0,0,.45);

    transition:transform .15s ease, box-shadow .15s ease;

    z-index:2;

}



.gradient-bar-handle:hover,
.gradient-bar-handle.is-active{

    transform:translateX(-50%) scale(1.15);

    box-shadow:0 0 0 4px rgba(99,102,241,.35);

}



.gradient-bar-handle:active{

    cursor:grabbing;

}



.gradient-controls,
.gradient-angle-control{

    background:#1E293B;

    border:1px solid #334155;

    border-radius:22px;

    padding:25px;

    margin-top:25px;

}



.gradient-angle-control label{

    display:block;

    margin-bottom:15px;

    font-weight:600;

}



.gradient-angle-control input[type="range"]{

    width:100%;

    accent-color:var(--primary);

}



#colorStops{

    display:flex;

    flex-direction:column;

    gap:15px;

}



.gradient-color-card{

    display:flex;

    align-items:center;

    gap:20px;

    background:#0F172A;

    padding:15px;

    border-radius:16px;

    border:1px solid transparent;

    cursor:pointer;

    transition:border-color .2s ease, background .2s ease;

}



.gradient-color-card.is-active{

    border-color:rgba(99,102,241,.55);

    background:#111827;

}



.gradient-color-picker{

    width:80px;

    height:80px;

    border:none;

    cursor:pointer;

}



.gradient-color-info{

    flex:1;

    display:flex;

    flex-direction:column;

    gap:10px;

}



.gradient-color-hex{

    font-family:"JetBrains Mono",monospace;

    font-size:.9rem;

    letter-spacing:.5px;

}



.gradient-position-value{

    color:var(--text-light);

    font-size:.85rem;

}



.gradient-position-slider{

    width:100%;

}



.gradient-remove{

    background:#EF4444;

    color:white;

    border:none;

    border-radius:50%;

    width:30px;

    height:30px;

    cursor:pointer;

}



#addColor{

    margin-top:20px;

}



.css-output{

    margin-top:0;

    background:#020617;

    border:1px solid #334155;

    border-radius:18px;

    padding:20px;

    display:flex;

    flex-direction:column;

    gap:16px;

}



.css-output-controls,
.css-output-actions{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

}



.css-format-switch{

    margin-bottom:0;

}



.css-output pre{

    color:#4ADE80;

    font-family:"JetBrains Mono",monospace;

    margin:0;

    word-break:break-word;

    white-space:pre-wrap;

    max-height:180px;

    overflow:auto;

}



.editor-loading-wrap{

    position:relative;

}



.editor-loading{

    position:absolute;

    inset:0;

    display:grid;

    place-items:center;

    background:rgba(15,23,42,.82);

    border:1px solid #334155;

    border-radius:22px;

    z-index:5;

    color:var(--text-light);

    font-weight:600;

}



.editor-loading[hidden],
.editor-loading.is-hidden{

    display:none !important;

}



.indent-select-label{

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--text-light);

    font-weight:600;

}



.indent-select{

    padding:10px 12px;

    border-radius:12px;

    border:1px solid #334155;

    background:#111827;

    color:white;

}



.toggle-option{

    display:flex;

    align-items:center;

    gap:8px;

    color:var(--text-light);

    font-weight:600;

    cursor:pointer;

}



.uuid-options,
.base64-options{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:20px;

}



.uuid-shortcut-hint,
.base64-note{

    color:var(--text-light);

    font-size:.85rem;

}



.jwt-algorithm-label{

    margin-bottom:16px;

    font-family:"JetBrains Mono",monospace;

    color:#818CF8;

    font-weight:600;

}



.jwt-banner{

    margin-bottom:16px;

    padding:14px 18px;

    border-radius:12px;

    font-weight:600;

}



.jwt-banner-expired,
.jwt-banner-notYetValid{

    background:rgba(239,68,68,.12);

    border:1px solid rgba(239,68,68,.35);

    color:#FCA5A5;

}



.jwt-claims-summary{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:20px;

}



.jwt-claim-chip{

    display:flex;

    flex-direction:column;

    gap:4px;

    min-width:140px;

    padding:10px 14px;

    border-radius:12px;

    background:#111827;

    border:1px solid #334155;

}



.jwt-claim-key{

    font-size:.75rem;

    letter-spacing:.5px;

    text-transform:uppercase;

    color:#818CF8;

    font-weight:700;

}



.jwt-claim-value{

    font-family:"JetBrains Mono",monospace;

    font-size:.82rem;

    color:#E2E8F0;

    word-break:break-word;

}



.base64-dropzone{

    margin-bottom:20px;

    padding:28px;

    border:1px dashed #334155;

    border-radius:18px;

    text-align:center;

    color:var(--text-light);

    background:rgba(15,23,42,.55);

    transition:.2s;

}



.base64-dropzone.is-dragover{

    border-color:var(--primary);

    color:white;

    background:rgba(99,102,241,.12);

}



.base64-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}



.base64-panel{

    background:#1E293B;

    border:1px solid #334155;

    border-radius:22px;

    padding:20px;

    display:flex;

    flex-direction:column;

    gap:12px;

}



.base64-panel label{

    color:#94A3B8;

    font-size:.85rem;

    letter-spacing:1px;

    font-weight:600;

}



.base64-panel textarea{

    width:100%;

    min-height:320px;

    margin-top:0;

    background:#0F172A;

    border:1px solid #334155;

    border-radius:14px;

    padding:16px;

    color:#E2E8F0;

    font-family:"JetBrains Mono",monospace;

    font-size:.9rem;

    resize:vertical;

}



.timestamp-input-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:16px;

    margin-bottom:24px;

}



.timestamp-input-card{

    background:#1E293B;

    border:1px solid #334155;

    border-radius:18px;

    padding:16px;

    display:flex;

    flex-direction:column;

    gap:10px;

}



.timestamp-input-card label{

    color:#94A3B8;

    font-size:.85rem;

    font-weight:600;

}



.timestamp-input-card input{

    width:100%;

    padding:12px 14px;

    border-radius:12px;

    border:1px solid #334155;

    background:#0F172A;

    color:white;

    font-family:"JetBrains Mono",monospace;

}



.timestamp-results{

    background:#1E293B;

    border:1px solid #334155;

    border-radius:22px;

    padding:10px;

}



.timestamp-result-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    padding:14px 16px;

    border-bottom:1px solid #334155;

}



.timestamp-result-row:last-child{

    border-bottom:none;

}



.timestamp-label{

    display:block;

    color:#94A3B8;

    font-size:.8rem;

    margin-bottom:6px;

    text-transform:uppercase;

    letter-spacing:.5px;

}



.timestamp-value{

    font-family:"JetBrains Mono",monospace;

    color:#E2E8F0;

    word-break:break-word;

}



.timestamp-relative-row .timestamp-value{

    color:#4ADE80;

}



.gradient-type-switch .btn.is-active,
.radial-shape-switch .btn.is-active,
.css-format-switch .btn.is-active,
.base64-mode-switch .btn.is-active,
[data-base64-mode].is-active{

    background:var(--primary);

    border-color:var(--primary);

    color:white;

}



.base64-mode-switch{

    display:flex;

    gap:8px;

}



.mode-badge{

    display:inline-flex;

    align-items:center;

    padding:8px 14px;

    border-radius:999px;

    font-weight:700;

    font-size:.85rem;

}



.mode-badge-encode{

    background:rgba(99,102,241,.18);

    border:1px solid rgba(99,102,241,.45);

    color:#A5B4FC;

}



.mode-badge-decode{

    background:rgba(16,185,129,.15);

    border:1px solid rgba(16,185,129,.4);

    color:#34D399;

}



.gradient-export-panel{

    margin-top:0;

    background:#1E293B;

    border:1px solid #334155;

    border-radius:22px;

    padding:22px;

}



.gradient-export-header{

    margin-bottom:20px;

}



.gradient-export-header h3{

    margin-bottom:8px;

}



.gradient-export-header p{

    color:var(--text-light);

}



.gradient-export-controls{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    align-items:flex-end;

}



.gradient-export-controls label{

    display:flex;

    flex-direction:column;

    gap:8px;

    color:var(--text-light);

    font-weight:600;

    font-size:.85rem;

}



.gradient-export-controls label[hidden]{

    display:none !important;

}



.gradient-export-controls select,
.gradient-export-controls input{

    min-width:150px;

    padding:12px 14px;

    border-radius:12px;

    border:1px solid #334155;

    background:#0F172A;

    color:white;

}



/* =====================================
   PHASE 1 TOOLS
===================================== */

.password-panel,
.color-fields-panel,
.qr-controls-panel,
.compressor-controls{

    background:#1E293B;

    border:1px solid #334155;

    border-radius:22px;

    padding:24px;

}



.password-output-wrap{

    background:#0F172A;

    border:1px solid #334155;

    border-radius:16px;

    padding:20px;

    margin-bottom:20px;

}



.password-output{

    display:block;

    font-family:"JetBrains Mono",monospace;

    font-size:1.2rem;

    word-break:break-all;

    color:#E2E8F0;

}



.password-strength{

    margin-bottom:22px;

}



.password-strength-header{

    display:flex;

    justify-content:space-between;

    margin-bottom:10px;

    color:var(--text-light);

}



.password-strength-bar{

    height:10px;

    border-radius:999px;

    background:#111827;

    overflow:hidden;

}



.password-strength-fill{

    height:100%;

    width:0;

    border-radius:999px;

    transition:width .25s ease, background .25s ease;

}



.strength-very-weak{ background:#EF4444; }
.strength-weak{ background:#F97316; }
.strength-fair{ background:#EAB308; }
.strength-good{ background:#84CC16; }
.strength-strong{ background:#22C55E; }
.strength-very-strong{ background:#10B981; }



.password-options{

    display:grid;

    gap:14px;

}



.password-option-row{

    display:flex;

    flex-direction:column;

    gap:10px;

    color:var(--text-light);

    font-weight:600;

}



.color-converter-layout,
.qr-layout,
.compressor-compare{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:24px;

}



.color-swatch-card{

    background:#1E293B;

    border:1px solid #334155;

    border-radius:22px;

    padding:24px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:16px;

}



.color-swatch{

    width:100%;

    aspect-ratio:1;

    max-width:280px;

    border-radius:24px;

    box-shadow:0 20px 50px rgba(0,0,0,.35);

}



.color-picker-input{

    width:100%;

    max-width:280px;

    height:56px;

    border:none;

    cursor:pointer;

    background:transparent;

}



.color-swatch-hint{

    color:var(--text-light);

    text-align:center;

}



.color-field-row{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-bottom:18px;

}



.color-field-row label{

    color:#94A3B8;

    font-size:.85rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

}



.color-field-actions,
.color-rgb-grid,
.color-hsl-grid{

    display:flex;

    gap:10px;

    align-items:center;

}



.color-field-actions input,
.color-rgb-grid input,
.color-hsl-grid input,
.qr-controls-panel textarea,
.qr-controls-panel select,
.compressor-controls input,
.compressor-controls select{

    flex:1;

    padding:12px 14px;

    border-radius:12px;

    border:1px solid #334155;

    background:#0F172A;

    color:white;

    font-family:"JetBrains Mono",monospace;

}



.color-css-preview{

    margin-top:10px;

    padding-top:18px;

    border-top:1px solid #334155;

    display:flex;

    flex-direction:column;

    gap:12px;

}



.color-css-preview code{

    font-family:"JetBrains Mono",monospace;

    color:#4ADE80;

}



.qr-preview-card{

    background:#1E293B;

    border:1px solid #334155;

    border-radius:22px;

    padding:24px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

}



.qr-canvas-wrap{

    background:white;

    border-radius:18px;

    padding:18px;

    min-height:220px;

    display:grid;

    place-items:center;

}



.qr-canvas-wrap canvas{

    max-width:100%;

    height:auto;

}



.qr-size-label{

    color:var(--text-light);

}



.qr-controls-panel label{

    display:block;

    margin-bottom:8px;

    color:#94A3B8;

    font-size:.85rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

}



.qr-controls-panel textarea{

    width:100%;

    min-height:120px;

    margin-bottom:16px;

    resize:vertical;

}



.qr-color-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;

    margin-top:16px;

}



.qr-color-row label{

    display:flex;

    flex-direction:column;

    gap:8px;

}



.compressor-dropzone{

    margin-bottom:20px;

    padding:28px;

    border:1px dashed #334155;

    border-radius:18px;

    text-align:center;

    color:var(--text-light);

    background:rgba(15,23,42,.55);

}



.compressor-dropzone.is-dragover{

    border-color:var(--primary);

    color:white;

    background:rgba(99,102,241,.12);

}



.compressor-controls{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:16px;

    margin-bottom:24px;

}



.compressor-controls label{

    display:flex;

    flex-direction:column;

    gap:8px;

    color:var(--text-light);

    font-weight:600;

}



.compressor-card{

    background:#1E293B;

    border:1px solid #334155;

    border-radius:22px;

    padding:20px;

}



.compressor-card h3{

    margin-bottom:14px;

    color:#94A3B8;

    font-size:.85rem;

    letter-spacing:1px;

}



.compressor-card img{

    width:100%;

    border-radius:14px;

    margin-bottom:12px;

    background:#0F172A;

}



.compressor-meta{

    color:var(--text-light);

    font-family:"JetBrains Mono",monospace;

    font-size:.85rem;

}



.compressor-savings{

    margin-top:20px;

    padding:16px 20px;

    border-radius:14px;

    background:rgba(34,197,94,.12);

    border:1px solid rgba(34,197,94,.35);

    color:#4ADE80;

    text-align:center;

}





/* =====================================
   RESPONSIVE
===================================== */


@media(max-width:1100px){


.gradient-workspace{

    grid-template-columns:1fr;

    grid-template-areas:
        "preview"
        "controls"
        "output";

}



.gradient-controls-sticky{

    position:static;

}



.gradient-tool-preview{

    height:360px;

}


}



@media(max-width:900px){


.json-container{

    grid-template-columns:1fr;

}



.base64-container{

    grid-template-columns:1fr;

}



.timestamp-input-grid{

    grid-template-columns:1fr;

}



.color-converter-layout,
.qr-layout,
.compressor-compare{

    grid-template-columns:1fr;

}



.compressor-controls{

    grid-template-columns:1fr;

}



.jwt-output-grid{

    grid-template-columns:1fr;

}


}



@media(max-width:700px){


.uuid-row{

    flex-direction:column;

    align-items:stretch;

}



.uuid-copy-btn{

    width:100%;

}



.gradient-export-controls{

    flex-direction:column;

    align-items:stretch;

}



.gradient-export-controls select,
.gradient-export-controls input,
.gradient-export-controls .btn{

    width:100%;

    min-width:0;

}



.gradient-toolbar{

    flex-direction:column;

    align-items:stretch;

}



.gradient-presets{

    justify-content:flex-start;

}



.gradient-color-card{

    flex-direction:column;

    align-items:stretch;

}



.gradient-bar{

    height:48px;

}



.css-output{

    flex-direction:column;

    align-items:stretch;

}



.timestamp-result-row{

    flex-direction:column;

    align-items:stretch;

}



.timestamp-result-row .btn{

    width:100%;

}



.css-output-actions{

    width:100%;

}



.css-output-actions .btn{

    width:100%;

}



.hero h2{

    font-size:2.5rem;

}


}



/* =====================================
   PREMIUM QR GENERATOR
===================================== */

.qr-premium-layout{

    display:grid;

    grid-template-columns:minmax(0,1fr) minmax(360px,.9fr);

    grid-template-areas:
        "preview controls"
        "export controls";

    gap:28px;

    align-items:start;

}



.qr-preview-card{

    min-height:560px;

    justify-content:center;

}

.qr-preview-area{

    grid-area:preview;

    min-width:0;

}



.qr-export-area{

    grid-area:export;

    min-width:0;

    background:#1E293B;

    border:1px solid #334155;

    border-radius:22px;

    padding:24px;

}



.qr-canvas-wrap{

    width:min(100%,480px);

    aspect-ratio:1;

    padding:24px;

}



.qr-canvas-wrap canvas,
.qr-canvas-wrap svg{

    width:100% !important;

    height:100% !important;

    object-fit:contain;

}



.qr-static-note{

    color:#4ADE80;

    font-size:.85rem;

    text-align:center;

}



.qr-controls-sticky{

    grid-area:controls;

    position:sticky;

    top:var(--sticky-offset);

    display:flex;

    flex-direction:column;

    gap:20px;

}



.qr-control-group{

    padding-bottom:20px;

    border-bottom:1px solid #334155;

}



.qr-control-group:last-child{

    padding-bottom:0;

    border-bottom:none;

}

.qr-preview-area > .qr-control-group{

    margin-bottom:20px;

    padding:24px;

    border:1px solid #334155;

    border-radius:22px;

    background:#1E293B;

}



.qr-export-area .qr-control-group{

    padding:0;

    border:none;

}



.qr-control-group h3{

    margin-bottom:14px;

    color:#E2E8F0;

    font-size:1rem;

}



.qr-content-types{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:16px;

}



.qr-content-types .btn{

    padding:9px 12px;

    font-size:.8rem;

}



.qr-content-types .btn.is-active{

    background:var(--primary);

    border-color:var(--primary);

    color:white;

}



#contentFields{

    display:flex;

    flex-direction:column;

    gap:12px;

}



#contentFields label,
.qr-control-group > label{

    display:flex;

    flex-direction:column;

    gap:8px;

    color:#94A3B8;

    font-size:.85rem;

    font-weight:600;

}



#contentFields input,
#contentFields textarea,
#contentFields select,
.qr-control-group > label input:not([type="checkbox"]):not([type="range"]),
.qr-control-group > label select{

    width:100%;

    padding:12px 14px;

    border:1px solid #334155;

    border-radius:12px;

    background:#0F172A;

    color:white;

    font-family:"Inter",sans-serif;

}



#contentFields textarea{

    min-height:90px;

    resize:vertical;

}



.qr-color-row{

    grid-template-columns:repeat(3,1fr);

}



.qr-warning{

    margin-top:14px;

    padding:12px 14px;

    border:1px solid rgba(234,179,8,.4);

    border-radius:12px;

    background:rgba(234,179,8,.1);

    color:#FDE68A;

    font-size:.85rem;

    line-height:1.45;

}



.qr-logo-upload{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:80px;

    padding:16px;

    border:1px dashed #475569;

    border-radius:14px;

    color:#94A3B8;

    cursor:pointer;

    text-align:center;

}



.qr-logo-upload input{

    display:none;

}



.qr-logo-preview{

    display:flex;

    align-items:center;

    gap:12px;

    margin:12px 0;

    padding:10px;

    border-radius:12px;

    background:#0F172A;

}



.qr-logo-preview img{

    width:46px;

    height:46px;

    object-fit:contain;

    border-radius:8px;

    background:white;

}



.qr-logo-preview .btn{

    margin-left:auto;

    padding:8px 12px;

}

.qr-export-actions{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    margin-top:18px;

}



@media(max-width:900px){

    .qr-premium-layout{

        grid-template-columns:1fr;

        grid-template-areas:
            "preview"
            "controls"
            "export";

    }

    .qr-controls-sticky{

        position:static;

    }

}



@media(max-width:700px){

    .qr-preview-card{

        min-height:unset;

    }

    .qr-canvas-wrap{

        padding:16px;

    }

    .qr-color-row{

        grid-template-columns:1fr;

    }

}

/* ===== Shared tool layout system ===== */

.tool-workspace{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(280px,360px);
    gap:24px;
    align-items:start;
}

/* Tools without a right-side controls panel */
.tool-workspace--solo{
    grid-template-columns:minmax(0,1fr);
    max-width:720px;
    margin-inline:auto;
    width:100%;
}

.tool-preview-area{
    display:flex;
    flex-direction:column;
    gap:20px;
    min-width:0;
}

.tool-controls-panel{
    display:flex;
    flex-direction:column;
    gap:0;
    padding:20px;
    border-radius:var(--radius-lg);
    border:1px solid var(--border);
    background:var(--bg-elevated);
}

.tool-controls-sticky{
    position:sticky;
    top:var(--sticky-offset);
    max-height:calc(100vh - 48px);
    overflow:auto;
}

.tool-control-group{
    padding:18px 0;
    border-bottom:1px solid var(--border);
}

.tool-control-group:first-child{
    padding-top:0;
}

.tool-control-group:last-child{
    padding-bottom:0;
    border-bottom:none;
}

.tool-control-group h3{
    margin:0 0 14px;
    color:#E2E8F0;
    font-size:1rem;
    font-weight:600;
}

.tool-panel-label,
.gradient-panel-label{
    display:block;
    margin-bottom:12px;
    color:var(--text-muted);
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.6px;
    text-transform:uppercase;
}

.tool-field{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:12px;
}

.tool-field:last-child{
    margin-bottom:0;
}

.tool-field__label{
    color:var(--text-muted);
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.tool-field__input,
.tool-field input:not([type="checkbox"]):not([type="range"]):not([type="color"]),
.tool-field select,
.tool-field textarea{
    width:100%;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:var(--input-radius);
    background:var(--input-bg);
    color:var(--text);
    font-family:"Inter",sans-serif;
    font-size:.95rem;
}

.tool-field textarea{
    min-height:90px;
    resize:vertical;
}

.tool-field input[type="color"]{
    width:48px;
    height:40px;
    padding:4px;
    border:1px solid var(--border);
    border-radius:var(--input-radius);
    background:var(--input-bg);
    cursor:pointer;
}

.tool-field__range{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:12px;
}

.tool-field__range:last-child{
    margin-bottom:0;
}

.tool-field__range-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    color:var(--text-muted);
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.tool-field__range-header em,
.tool-field__value{
    font-style:normal;
    color:var(--text);
    font-variant-numeric:tabular-nums;
    letter-spacing:0;
    text-transform:none;
    font-weight:600;
}

.tool-field__range input[type="range"]{
    width:100%;
}

.tool-field-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.tool-field-row .tool-field{
    margin-bottom:0;
}

.tool-preview-stage{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:320px;
    padding:40px 24px;
    border-radius:var(--radius-lg);
    border:1px solid var(--border);
    background:
        linear-gradient(135deg, rgba(99,102,241,0.12), transparent 55%),
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.04), transparent 40%),
        var(--bg-elevated);
}

.tool-output,
.css-output.tool-output{
    margin:0;
}

@media(max-width:900px){
    .tool-workspace{
        grid-template-columns:1fr;
    }

    .tool-controls-sticky{
        position:static;
        max-height:none;
    }

    .tool-field-row{
        grid-template-columns:1fr;
    }
}

/* ===== Phase 2 tool-specific ===== */

.shadow-preview-box{
    width:min(220px, 55vw);
    height:140px;
    border-radius:18px;
    background:linear-gradient(145deg, #818cf8, #6366f1);
}

.shadow-layer-list{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.shadow-layer-card{
    padding:14px;
    border-radius:var(--radius-md);
    border:1px solid var(--border);
    background:var(--bg);
    display:flex;
    flex-direction:column;
    gap:4px;
    cursor:pointer;
    transition:border-color .15s ease;
}

.shadow-layer-card.is-active{
    border-color:rgba(99,102,241,0.55);
}

.shadow-layer-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
}

.shadow-remove{
    padding:4px 10px;
    min-width:auto;
}

.shadow-layer-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-top:8px;
}

.shadow-color-label{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:10px;
    color:var(--text-muted);
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.browser-tab-mockup{
    border-radius:var(--radius-lg);
    border:1px solid var(--border);
    overflow:hidden;
    background:var(--bg-elevated);
}

.browser-tab-bar{
    display:flex;
    align-items:flex-end;
    gap:8px;
    padding:12px 12px 0;
    background:#1a1b22;
    min-height:48px;
}

.browser-tab{
    display:inline-flex;
    align-items:center;
    gap:8px;
    max-width:220px;
    padding:10px 14px;
    border-radius:10px 10px 0 0;
    background:#2a2b35;
    color:var(--text);
    font-size:0.85rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.browser-tab-icon{
    width:16px;
    height:16px;
    flex-shrink:0;
    border-radius:3px;
}

.browser-tab-body{
    padding:28px 24px;
    color:var(--text-muted);
    border-top:1px solid var(--border);
}

.favicon-canvas-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    padding:28px;
    border-radius:var(--radius-lg);
    border:1px solid var(--border);
    background:var(--bg-elevated);
}

#faviconCanvas{
    width:160px;
    height:160px;
    border-radius:12px;
    box-shadow:0 12px 40px rgba(0,0,0,0.35);
}

.favicon-size-label{
    margin:0;
    font-size:0.85rem;
    color:var(--text-muted);
}

.favicon-emoji-presets{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}

.favicon-emoji-presets .btn{
    padding:10px 8px;
}

.meta-preview-block{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.google-preview{
    padding:18px 20px;
    border-radius:var(--radius-md);
    border:1px solid var(--border);
    background:#fff;
    color:#202124;
}

.google-url{
    font-size:0.8rem;
    color:#202124;
    margin-bottom:4px;
}

.google-title{
    font-size:1.25rem;
    color:#1a0dab;
    line-height:1.3;
    margin-bottom:4px;
}

.google-desc{
    font-size:0.9rem;
    color:#4d5156;
    line-height:1.45;
}

.og-preview{
    border-radius:var(--radius-md);
    border:1px solid var(--border);
    overflow:hidden;
    background:#fff;
    max-width:520px;
}

.og-image{
    display:block;
    width:100%;
    aspect-ratio:1.91 / 1;
    object-fit:cover;
    background:#e4e6eb;
}

.og-body{
    padding:12px 14px 14px;
    border-top:1px solid #e4e6eb;
}

.og-domain{
    font-size:0.72rem;
    color:#606770;
    letter-spacing:0.02em;
    margin-bottom:4px;
}

.og-title{
    font-size:1rem;
    font-weight:600;
    color:#1d2129;
    margin-bottom:4px;
}

.og-desc{
    font-size:0.85rem;
    color:#606770;
    line-height:1.4;
}

.twitter-preview{
    border-radius:16px;
    border:1px solid #2f3336;
    overflow:hidden;
    background:#000;
    max-width:520px;
    color:#e7e9ea;
}

.twitter-preview .tw-image{
    display:block;
    width:100%;
    aspect-ratio:1.91 / 1;
    object-fit:cover;
    background:#16181c;
}

.twitter-preview.is-summary{
    display:grid;
    grid-template-columns:120px 1fr;
}

.twitter-preview.is-summary .tw-image{
    aspect-ratio:1;
    height:100%;
}

.tw-body{
    padding:12px 14px 14px;
}

.tw-title{
    font-weight:700;
    margin-bottom:4px;
}

.tw-desc{
    font-size:0.85rem;
    color:#8b98a5;
    margin-bottom:6px;
    line-height:1.4;
}

.tw-domain{
    font-size:0.8rem;
    color:#8b98a5;
}

.aspect-box{
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    border:2px solid rgba(129,140,248,0.7);
    background:rgba(99,102,241,0.18);
    color:var(--text);
    font-weight:600;
    transition:width .2s ease, height .2s ease;
}

.aspect-shape-preview{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:16px;
}

.aspect-stage-hint{
    margin:0;
    color:var(--text-muted);
    font-size:.9rem;
}

.aspect-crop-workspace{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.aspect-crop-workspace[hidden],
.aspect-shape-preview[hidden]{
    display:none !important;
}

.aspect-crop-frame{
    position:relative;
    overflow:hidden;
    border-radius:12px;
    touch-action:none;
    box-shadow:0 12px 40px rgba(0,0,0,.35);
}

.aspect-crop-image{
    display:block;
    max-width:100%;
    user-select:none;
    pointer-events:none;
}

.aspect-crop-box{
    position:absolute;
    box-sizing:border-box;
    border:2px solid #A5B4FC;
    border-radius:4px;
    box-shadow:var(--crop-shadow, 0 0 0 9999px rgba(2, 6, 23, 0.62));
    cursor:grab;
    display:flex;
    align-items:flex-start;
    justify-content:flex-end;
    padding:6px;
}

.aspect-crop-box.is-dragging{
    cursor:grabbing;
}

.aspect-crop-label{
    background:rgba(15,23,42,.85);
    color:#E2E8F0;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    padding:3px 7px;
    border-radius:6px;
    pointer-events:none;
}

.aspect-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.aspect-stat{
    padding:16px;
    border-radius:var(--radius-md);
    border:1px solid var(--border);
    background:var(--bg-elevated);
    display:flex;
    flex-direction:column;
    gap:6px;
}

.aspect-stat-label{
    font-size:0.8rem;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:.4px;
    font-weight:700;
}

.aspect-stat strong{
    font-size:1.05rem;
}

.aspect-dimension-row{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:10px;
    align-items:end;
}

.aspect-dimension-field{
    margin-bottom:0;
}

.aspect-dimension-lock{
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    margin-bottom:2px;
    padding:0;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--bg-elevated);
    color:var(--text-light);
    cursor:pointer;
    transition:border-color .2s ease, color .2s ease, background .2s ease;
}

.aspect-dimension-lock:hover{
    color:var(--text);
    border-color:rgba(148,163,184,.45);
}

.aspect-dimension-lock.is-active{
    color:#A5B4FC;
    border-color:rgba(99,102,241,.45);
    background:rgba(99,102,241,.12);
}

.aspect-dimension-lock__icon{
    display:block;
}

.aspect-dimension-lock__icon--unlocked{
    display:none;
}

.aspect-dimension-lock:not(.is-active) .aspect-dimension-lock__icon--locked{
    display:none;
}

.aspect-dimension-lock:not(.is-active) .aspect-dimension-lock__icon--unlocked{
    display:block;
}

.tool-control-hint{
    margin:-4px 0 12px;
    color:var(--text-light);
    font-size:.85rem;
    line-height:1.45;
}

.toolbar input[type="file"]{
    display:none;
}

@media(max-width:900px){
    .aspect-stats{
        grid-template-columns:1fr;
    }

    .twitter-preview.is-summary{
        grid-template-columns:1fr;
    }
}

.color-field-row.tool-field{
    margin-bottom:18px;
}

.color-field-actions .tool-field__input,
.color-rgb-grid .tool-field__input,
.color-hsl-grid .tool-field__input{
    flex:1;
}

/* ===== Shared Download dropdown ===== */

.tool-download{
    position:relative;
    display:inline-flex;
    vertical-align:middle;
}

.tool-download__toggle{
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.tool-download__caret{
    font-size:.75rem;
    opacity:.85;
    line-height:1;
}

.tool-download__menu{
    position:absolute;
    top:calc(100% + 8px);
    left:50%;
    transform:translateX(-50%);
    z-index:40;
    min-width:148px;
    padding:6px;
    border-radius:12px;
    border:1px solid var(--border);
    background:var(--surface);
    box-shadow:0 16px 40px rgba(0,0,0,.45);
    display:flex;
    flex-direction:column;
    gap:2px;
}

.tool-download__menu[hidden]{
    display:none !important;
}

.tool-download__item{
    appearance:none;
    border:none;
    background:transparent;
    color:var(--text);
    text-align:left;
    padding:10px 12px;
    border-radius:8px;
    font:inherit;
    font-size:.9rem;
    font-weight:600;
    cursor:pointer;
}

.tool-download__item:hover,
.tool-download__item:focus-visible{
    background:rgba(99,102,241,.18);
    outline:none;
}

.toolbar .tool-download{
    vertical-align:middle;
}

.qr-export-actions .tool-download,
.gradient-export-controls .tool-download{
    width:100%;
}

.qr-export-actions .tool-download__toggle,
.gradient-export-controls .tool-download__toggle{
    width:100%;
    justify-content:center;
}

.qr-export-actions .tool-download__menu,
.gradient-export-controls .tool-download__menu{
    left:0;
    right:0;
    transform:none;
    min-width:100%;
}

.favicon-upload{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.favicon-upload-row{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
}

.favicon-upload-preview{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px;
    border-radius:var(--radius-md);
    border:1px solid var(--border);
    background:var(--bg);
}

.favicon-upload-preview img{
    width:40px;
    height:40px;
    object-fit:contain;
    border-radius:8px;
    background:#fff;
}

.favicon-upload-preview[hidden],
.favicon-image-controls[hidden]{
    display:none !important;
}

.favicon-upload input[type="file"]{
    display:none;
}

.compressor-controls{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:16px 20px;
    padding:18px;
    margin-bottom:20px;
    border-radius:var(--radius-lg);
    border:1px solid var(--border);
    background:var(--bg-elevated);
}

.compressor-controls .tool-field{
    margin-bottom:0;
}

.compressor-controls .tool-field__range{
    margin-bottom:0;
}

/* ===== SEO / Homepage hero ===== */
.hero-brand{
    font-size:clamp(2.8rem,6vw,4.2rem);
    line-height:1.05;
    margin:0 0 12px;
    font-weight:700;
    letter-spacing:-0.03em;
}

.hero-tagline{
    font-size:clamp(1.35rem,3vw,1.85rem);
    line-height:1.25;
    margin:0 0 18px;
    color:var(--text);
    font-weight:600;
}

.tool-seo-intro{
    max-width:720px;
    margin-left:auto;
    margin-right:auto;
    color:var(--text-light);
    line-height:1.6;
}

.seo-tool-links{
    margin-top:24px;
    display:grid;
    gap:8px;
    color:var(--text-light);
}

/* ===== Landing header + hero (Kitnax) ===== */

.landing{
    font-family:"Inter",sans-serif;
}

.brand{
    display:inline-flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:var(--text);
}

.brand__logo{
    display:block;
    height:auto;
    width:auto;
    max-height:36px;
    flex-shrink:0;
}

.brand--header .brand__logo{
    max-height:32px;
}

.brand--header .brand__icon{
    width:34px;
    height:34px;
}

.brand--header{
    gap:0;
}

.brand__icon{
    display:block;
    border-radius:8px;
    flex-shrink:0;
}

.brand__name{
    font-family:"Instrument Sans", "Inter", sans-serif;
    font-weight:700;
    font-size:1rem;
    letter-spacing:-0.03em;
}

.brand--footer .brand__name{
    font-size:.95rem;
}

.brand__mark{
    display:block;
    border-radius:10px;
    flex-shrink:0;
}

.brand__wordmark{
    font-family:"Instrument Sans", "Inter", sans-serif;
    font-weight:700;
    font-size:1.15rem;
    letter-spacing:-0.03em;
}

.brand--footer .brand__wordmark{
    font-size:1rem;
}

.site-header{
    position:sticky;
    top:0;
    z-index:50;
    backdrop-filter:blur(14px);
    background:rgba(15,23,42,.72);
    border-bottom:1px solid transparent;
    transition:border-color .25s ease, background .25s ease;
}

.landing .site-header{
    border-bottom-color:rgba(51,65,85,.55);
}

.site-header--tool{
    border-bottom:1px solid var(--border);
    background:rgba(15,23,42,.9);
}

.site-header__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:72px;
}

.site-nav{
    display:flex;
    align-items:center;
    gap:18px;
}

.site-nav a{
    color:var(--text-light);
    text-decoration:none;
    font-size:.95rem;
    font-weight:500;
    transition:color .2s ease;
}

.site-nav a:hover{
    color:var(--text);
}

.tool-header-link{
    color:var(--text-light);
    text-decoration:none;
    font-size:.9rem;
    font-weight:500;
}

.tool-header-link:hover{
    color:var(--text);
}

.landing-hero{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    display:flex;
    align-items:flex-start;
    padding:56px 0 48px;
}

.landing-hero__glow{
    position:absolute;
    inset:-20% 10% auto;
    height:420px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(99,102,241,.28), transparent 58%),
        radial-gradient(ellipse at 20% 40%, rgba(14,165,233,.12), transparent 45%);
    pointer-events:none;
    z-index:0;
    animation:heroGlow 8s ease-in-out infinite alternate;
}

.landing-hero__grid{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(148,163,184,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,.06) 1px, transparent 1px);
    background-size:56px 56px;
    mask-image:radial-gradient(ellipse at 50% 30%, black 10%, transparent 70%);
    pointer-events:none;
    z-index:0;
    opacity:.7;
}

.landing-hero__content{
    position:relative;
    z-index:1;
    max-width:min(100%, 640px);
}

.landing-hero__title{
    margin:0;
    font-size:inherit;
    font-weight:inherit;
    line-height:inherit;
}

.landing-hero__logo{
    display:block;
    width:min(100%, 380px);
    height:auto;
    margin:0 0 22px;
    animation:heroRise .75s ease both;
}

.landing-hero__slogan{
    margin:0 0 28px;
    font-family:"Instrument Sans", "Inter", sans-serif;
    font-size:clamp(1.85rem, 4.2vw, 2.85rem);
    font-weight:600;
    line-height:1.12;
    letter-spacing:-0.03em;
    animation:heroRise .75s .08s ease both;
}

.landing-hero__slogan span{
    display:block;
    background:linear-gradient(165deg, #5eead4 0%, #7c8cff 48%, #c084fc 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.landing-hero__eyebrow{
    display:inline-block;
    margin:0 0 28px;
    padding:8px 14px;
    border:1px solid rgba(148,163,184,.22);
    border-radius:999px;
    color:#CBD5E1;
    font-size:.8rem;
    font-weight:500;
    letter-spacing:.08em;
    text-transform:uppercase;
    animation:heroRise .7s ease both;
}

.landing-hero__brand{
    margin:0 0 18px;
    font-family:"Instrument Sans", "Inter", sans-serif;
    font-size:clamp(3.4rem, 9vw, 5.6rem);
    font-weight:700;
    letter-spacing:-0.045em;
    line-height:.95;
    color:var(--text);
    animation:heroRise .75s .05s ease both;
}

.landing-hero__headline{
    margin:0 0 18px;
    font-family:"Instrument Sans", "Inter", sans-serif;
    font-size:clamp(1.45rem, 3.4vw, 2rem);
    font-weight:600;
    letter-spacing:-0.025em;
    line-height:1.25;
    color:#E2E8F0;
    animation:heroRise .75s .12s ease both;
}

.landing-hero__support{
    margin:0 auto 36px;
    max-width:520px;
    color:var(--text-light);
    font-size:1.05rem;
    line-height:1.55;
    animation:heroRise .75s .18s ease both;
}

.landing-hero__actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    align-items:center;
    animation:heroRise .75s .16s ease both;
}

.landing-hero__cta{
    padding:14px 22px;
    border-radius:12px;
    text-decoration:none;
}

.landing-search{
    position:relative;
    min-width:min(100%,280px);
}

.landing-search input{
    width:100%;
    min-width:260px;
    padding:14px 44px 14px 16px;
    border-radius:12px;
    border:1px solid var(--border);
    background:rgba(15,23,42,.75);
    color:var(--text);
    font:inherit;
}

.landing-search input:focus{
    outline:2px solid rgba(99,102,241,.45);
    outline-offset:1px;
}

.landing-search__hint{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    color:var(--text-light);
    pointer-events:none;
}

.landing-search__hint kbd{
    display:inline-block;
    padding:2px 7px;
    border-radius:6px;
    border:1px solid var(--border);
    background:#111827;
    font-size:.75rem;
}

.site-footer{
    border-top:1px solid var(--border);
    padding:28px 0 36px;
    margin-top:40px;
}

.site-footer__inner{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    align-items:center;
    justify-content:space-between;
}

.site-footer p{
    margin:0;
    color:var(--text-light);
    font-size:.9rem;
}

.site-footer__legal{
    display:flex;
    flex-wrap:wrap;
    gap:8px 14px;
    align-items:center;
    justify-content:flex-end;
}

.site-footer__legal a{
    color:var(--text-light);
    text-decoration:none;
    font-size:.9rem;
}

.site-footer__legal a:hover{
    color:var(--text);
}

.legal-page .legal-notice{
    margin:0 0 28px;
    padding:14px 16px;
    border:1px solid rgba(245,158,11,.35);
    border-radius:var(--radius-md);
    background:rgba(245,158,11,.1);
}

.legal-page .legal-notice p{
    margin:0;
    color:var(--text);
}

@keyframes heroRise{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:translateY(0); }
}

@keyframes heroGlow{
    from{ transform:translateY(0) scale(1); opacity:.9; }
    to{ transform:translateY(18px) scale(1.04); opacity:1; }
}

@media (max-width:700px){
    .landing-hero{
        padding:40px 0 36px;
    }

    .landing-hero__logo{
        width:min(100%, 280px);
        margin-bottom:18px;
    }

    .landing-hero__slogan{
        margin-bottom:24px;
        font-size:clamp(1.5rem, 7vw, 2rem);
    }

    .landing-hero__actions{
        flex-direction:column;
        width:100%;
    }

    .landing-hero__cta,
    .landing-search,
    .landing-search input{
        width:100%;
        min-width:0;
    }

    .site-footer__inner{
        flex-direction:column;
        align-items:flex-start;
    }
}

@media (prefers-reduced-motion:reduce){
    .landing-hero__logo,
    .landing-hero__slogan,
    .landing-hero__eyebrow,
    .landing-hero__brand,
    .landing-hero__headline,
    .landing-hero__support,
    .landing-hero__actions,
    .landing-hero__glow{
        animation:none;
    }
}

/* ===== Phase 3 tools ===== */

.tool-io-panel{
    display:flex;
    flex-direction:column;
    gap:0;
    padding:20px;
    border-radius:var(--radius-lg);
    border:1px solid var(--border);
    background:var(--bg-elevated);
    min-width:0;
}

.tool-io-panel h3{
    margin:0 0 14px;
    color:#E2E8F0;
    font-size:1rem;
    font-weight:600;
}

.tool-preview-area.tool-preview-area--stacked{
    gap:16px;
}

.tool-textarea{
    width:100%;
    min-height:280px;
    padding:16px;
    border-radius:var(--radius-md);
    border:1px solid var(--border);
    background:var(--bg);
    color:var(--text);
    font-family:"JetBrains Mono", monospace;
    font-size:.92rem;
    line-height:1.55;
    resize:vertical;
}

.tool-textarea:focus{
    outline:2px solid rgba(99,102,241,.4);
    outline-offset:1px;
}

.hash-input{
    min-height:320px;
    flex:1;
}

.hash-source-meta{
    margin:12px 0 0;
    color:var(--text-light);
    font-size:.85rem;
}

.hash-output-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.hash-output-row{
    padding:14px;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--bg);
}

.hash-output-row__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
}

.hash-output-row__label{
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--text-light);
}

.hash-copy-btn{
    padding:6px 10px;
    font-size:.8rem;
}

.hash-output-row__value{
    display:block;
    word-break:break-all;
    font-family:"JetBrains Mono", monospace;
    font-size:.78rem;
    line-height:1.5;
    color:#CBD5E1;
}

.url-variant-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
    margin-top:18px;
}

.url-variant-card{
    padding:14px 16px;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--bg-elevated);
}

.url-variant-card__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
}

.url-variant-card__label{
    font-size:.8rem;
    font-weight:600;
    color:var(--text-light);
    font-family:"JetBrains Mono", monospace;
}

.url-variant-card__value{
    display:block;
    word-break:break-all;
    font-family:"JetBrains Mono", monospace;
    font-size:.82rem;
    line-height:1.5;
    color:#E2E8F0;
}

.regex-test-input{
    min-height:160px;
}

.regex-highlight-output{
    min-height:160px;
    max-height:320px;
    overflow:auto;
    margin:0;
    padding:16px;
    border-radius:var(--radius-md);
    border:1px solid var(--border);
    background:var(--bg);
    color:#E2E8F0;
    font-family:"JetBrains Mono", monospace;
    font-size:.9rem;
    line-height:1.6;
    white-space:pre-wrap;
    word-break:break-word;
}

.regex-match{
    background:rgba(99,102,241,.35);
    color:#F8FAFC;
    border-radius:3px;
    padding:0 2px;
}

.regex-pattern-input{
    font-family:"JetBrains Mono", monospace;
}

.regex-flags{
    margin-top:12px;
}

.regex-flag-list{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:8px;
}

.regex-flag{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--bg);
    font-family:"JetBrains Mono", monospace;
    font-size:.85rem;
    cursor:pointer;
}

.regex-match-count{
    font-size:.85rem;
    font-weight:600;
    color:var(--text-light);
}

.regex-match-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    max-height:420px;
    overflow:auto;
}

.regex-empty{
    margin:0;
    color:var(--text-light);
    font-size:.9rem;
}

.regex-match-card{
    padding:12px;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--bg);
}

.regex-match-card__head{
    display:flex;
    justify-content:space-between;
    gap:8px;
    margin-bottom:8px;
    color:var(--text-light);
    font-size:.8rem;
}

.regex-match-card__value{
    display:block;
    word-break:break-all;
    font-family:"JetBrains Mono", monospace;
    font-size:.82rem;
}

.regex-match-card__groups{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-top:10px;
}

.regex-group{
    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:.78rem;
    color:var(--text-light);
}

.regex-group code{
    color:#E2E8F0;
    font-family:"JetBrains Mono", monospace;
}

.diff-editor-wrap{
    position:relative;
    margin-top:8px;
}

.diff-editor{
    height:min(72vh, 720px);
    border:1px solid var(--border);
    border-radius:22px;
    overflow:hidden;
}

@media(max-width:900px){
    .url-variant-grid{
        grid-template-columns:1fr;
    }

    .hash-input,
    .tool-textarea{
        min-height:220px;
    }

    .diff-editor{
        height:min(60vh, 520px);
    }
}

/* ===== Phase 4 tools ===== */

.word-counter-input{
    min-height:420px;
}

.counter-stats{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.counter-stat{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--bg);
}

.counter-stat__label{
    color:var(--text-light);
    font-size:.9rem;
}

.counter-stat__value{
    font-family:"JetBrains Mono", monospace;
    font-size:1rem;
    color:#E2E8F0;
}

.lorem-output{
    min-height:420px;
}

.unit-fields{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.unit-field{
    margin-bottom:0;
}

.markdown-split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    align-items:stretch;
}

.markdown-pane{
    min-height:0;
}

.markdown-input{
    min-height:min(62vh, 640px);
    resize:vertical;
}

.markdown-preview{
    min-height:min(62vh, 640px);
    max-height:min(62vh, 640px);
    overflow:auto;
    padding:4px 2px;
    color:#E2E8F0;
    line-height:1.65;
}

.markdown-preview h1,
.markdown-preview h2,
.markdown-preview h3{
    margin:1.2em 0 .5em;
    line-height:1.25;
    color:#F8FAFC;
}

.markdown-preview h1{ font-size:1.7rem; }
.markdown-preview h2{ font-size:1.35rem; }
.markdown-preview h3{ font-size:1.15rem; }

.markdown-preview p,
.markdown-preview ul,
.markdown-preview ol,
.markdown-preview blockquote,
.markdown-preview pre{
    margin:0 0 1em;
}

.markdown-preview a{
    color:#A5B4FC;
}

.markdown-preview code{
    font-family:"JetBrains Mono", monospace;
    font-size:.88em;
    background:rgba(15,23,42,.75);
    padding:.15em .35em;
    border-radius:4px;
}

.markdown-preview pre{
    padding:14px 16px;
    border-radius:var(--radius-md);
    border:1px solid var(--border);
    background:var(--bg);
    overflow:auto;
}

.markdown-preview pre code{
    padding:0;
    background:transparent;
}

.markdown-preview blockquote{
    margin-left:0;
    padding:8px 14px;
    border-left:3px solid rgba(99,102,241,.7);
    color:var(--text-light);
}

.markdown-preview ul,
.markdown-preview ol{
    padding-left:1.3em;
}

.markdown-empty{
    color:var(--text-light);
}

@media(max-width:900px){
    .markdown-split{
        grid-template-columns:1fr;
    }

    .markdown-input,
    .markdown-preview{
        min-height:280px;
        max-height:none;
    }

    .word-counter-input,
    .lorem-output{
        min-height:260px;
    }
}

/* ===== SEO Learn + Guides ===== */

.tool-learn{
    margin-top:48px;
    padding-top:36px;
    border-top:1px solid var(--border);
    max-width:720px;
}

.tool-learn h2{
    margin:0 0 20px;
    font-size:1.35rem;
    color:var(--text);
}

.tool-learn h3{
    margin:28px 0 12px;
    font-size:1.05rem;
    color:#E2E8F0;
}

.tool-learn p,
.tool-learn li{
    color:var(--text-light);
    line-height:1.65;
    font-size:.95rem;
}

.tool-learn ol,
.tool-learn ul{
    margin:0 0 8px;
    padding-left:1.25em;
}

.tool-learn a{
    color:#A5B4FC;
    text-decoration:none;
}

.tool-learn a:hover{
    text-decoration:underline;
}

.tool-learn__faq{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:4px;
}

.tool-learn__faq details{
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--bg-elevated);
    padding:0 14px;
}

.tool-learn__faq summary{
    cursor:pointer;
    list-style:none;
    padding:14px 0;
    font-weight:600;
    color:#E2E8F0;
}

.tool-learn__faq summary::-webkit-details-marker{
    display:none;
}

.tool-learn__faq summary::after{
    content:"+";
    float:right;
    color:var(--text-light);
    font-weight:500;
}

.tool-learn__faq details[open] summary::after{
    content:"?";
}

.tool-learn__faq details p{
    margin:0 0 14px;
    padding-top:0;
}

.tool-learn__related{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:0;
    padding:0;
    list-style:none;
}

.tool-learn__related a,
.tool-chip{
    display:inline-flex;
    align-items:center;
    padding:8px 14px;
    border:1px solid var(--border);
    border-radius:999px;
    background:rgba(30,41,59,.85);
    color:#E2E8F0;
    text-decoration:none;
    font-size:.88rem;
    font-weight:500;
    transition:border-color .15s ease, background .15s ease, color .15s ease;
}

.tool-learn__related a:hover,
.tool-chip:hover{
    border-color:#818CF8;
    background:rgba(99,102,241,.14);
    color:#F8FAFC;
}

.tool-learn__guide-link{
    margin-top:28px;
}

/* ?? Tool discover rail ?? */
.tool-discover{
    margin:36px 0 28px;
    padding:22px 0 8px;
    border-top:1px solid var(--border);
}

.tool-discover__head{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px 20px;
    margin-bottom:16px;
}

.tool-discover__eyebrow{
    margin:0 0 4px;
    color:var(--text-muted);
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.tool-discover h2{
    margin:0;
    font-size:1.2rem;
    color:var(--text);
}

.tool-discover__actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px 14px;
}

.tool-discover__all{
    color:var(--text-light);
    text-decoration:none;
    font-size:.9rem;
}

.tool-discover__all:hover{
    color:var(--text);
}

.tool-discover__grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:12px;
}

.tool-discover__card{
    display:flex;
    gap:12px;
    align-items:flex-start;
    padding:14px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--bg-elevated,#1E293B);
    text-decoration:none;
    color:inherit;
    transition:border-color .15s ease, transform .15s ease;
}

.tool-discover__card:hover{
    border-color:#818CF8;
    transform:translateY(-1px);
}

.tool-discover__icon{
    flex-shrink:0;
    width:2rem;
    text-align:center;
    font-size:1.15rem;
    line-height:1.4;
}

.tool-discover__meta{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
}

.tool-discover__meta strong{
    color:#F1F5F9;
    font-size:.95rem;
}

.tool-discover__meta span{
    color:var(--text-light);
    font-size:.82rem;
    line-height:1.45;
}

/* ?? Browse drawer ?? */
body.nk-browse-open{
    overflow:hidden;
}

.nk-browse{
    position:fixed;
    inset:0;
    z-index:1300;
}

.nk-browse[hidden]{
    display:none !important;
}

.nk-browse__backdrop{
    position:absolute;
    inset:0;
    background:rgba(2,6,23,.55);
    opacity:0;
    transition:opacity .18s ease;
}

.nk-browse__panel{
    position:absolute;
    top:0;
    right:0;
    display:flex;
    flex-direction:column;
    width:min(420px,100%);
    height:100%;
    padding:18px 18px 20px;
    border-left:1px solid var(--border);
    background:#0F172A;
    box-shadow:-20px 0 50px rgba(0,0,0,.35);
    transform:translateX(100%);
    transition:transform .18s ease;
}

.nk-browse.is-open .nk-browse__backdrop{
    opacity:1;
}

.nk-browse.is-open .nk-browse__panel{
    transform:translateX(0);
}

.nk-browse__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
}

.nk-browse__top h2{
    margin:0;
    font-size:1.15rem;
}

.nk-browse__close{
    width:36px;
    height:36px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#1E293B;
    color:#E2E8F0;
    font-size:1.35rem;
    line-height:1;
    cursor:pointer;
}

.nk-browse__search-label{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
}

.nk-browse__search{
    width:100%;
    height:42px;
    margin-bottom:12px;
    padding:0 12px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#1E293B;
    color:var(--text);
    font:inherit;
}

.nk-browse__filters{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:12px;
}

.nk-browse__filter{
    padding:6px 12px;
    border:1px solid var(--border);
    border-radius:999px;
    background:transparent;
    color:var(--text-light);
    font-size:.78rem;
    font-weight:600;
    cursor:pointer;
}

.nk-browse__filter.is-active,
.nk-browse__filter:hover{
    border-color:#818CF8;
    color:#E2E8F0;
    background:rgba(99,102,241,.14);
}

.nk-browse__list{
    flex:1;
    overflow:auto;
    display:flex;
    flex-direction:column;
    gap:8px;
    padding-right:2px;
    margin-bottom:12px;
}

.nk-browse__item{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:10px;
    align-items:start;
    padding:12px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#1E293B;
    text-decoration:none;
    color:inherit;
}

.nk-browse__item:hover,
.nk-browse__item.is-current{
    border-color:#818CF8;
}

.nk-browse__item-icon{
    font-size:1.05rem;
    line-height:1.3;
}

.nk-browse__item-copy{
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
}

.nk-browse__item-copy strong{
    color:#F8FAFC;
    font-size:.92rem;
}

.nk-browse__item-copy span{
    color:var(--text-light);
    font-size:.78rem;
    line-height:1.4;
}

.nk-browse__item-cat{
    color:#A5B4FC;
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.03em;
    text-transform:uppercase;
    white-space:nowrap;
}

.nk-browse__empty{
    margin:18px 8px;
    color:var(--text-light);
    text-align:center;
}

.nk-browse__catalog{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin:0 0 12px;
    padding:10px 12px;
    border-radius:10px;
    background:rgba(99,102,241,.12);
    color:#C7D2FE;
    text-decoration:none;
    font-size:.9rem;
    font-weight:600;
}

.nk-browse__catalog:hover{
    background:rgba(99,102,241,.2);
    color:#EEF2FF;
}

.tool-browse-btn{
    white-space:nowrap;
    font-size:.9rem;
    padding:10px 16px;
}

@media (max-width:640px){
    .site-header__links{
        gap:8px;
    }

    .tool-header-link{
        display:none;
    }

    .tool-browse-btn{
        padding:8px 10px;
        font-size:.8rem;
    }

    .tool-discover__grid{
        grid-template-columns:1fr;
    }

    .nk-browse__panel{
        width:100%;
    }
}

/* ?? Premium media / PDF tools ?? */
.premium-mode-switch{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:14px;
}

.premium-mode-switch .btn.is-active{
    border-color:#818CF8;
    background:rgba(99,102,241,.18);
    color:#E2E8F0;
}

.premium-file-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:12px 0;
    max-height:240px;
    overflow:auto;
}

.premium-file-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--bg-elevated,#1E293B);
}

.premium-file-row strong{
    font-size:.9rem;
    color:#F1F5F9;
}

.premium-file-row span{
    color:var(--text-light);
    font-size:.8rem;
}

.premium-file-actions{
    display:flex;
    gap:6px;
    flex-shrink:0;
}

.premium-file-actions .btn{
    padding:6px 10px;
    font-size:.75rem;
}

.premium-banner{
    margin:0 0 14px;
    padding:10px 12px;
    border:1px solid rgba(251,191,36,.35);
    border-radius:12px;
    background:rgba(245,158,11,.1);
    color:#FDE68A;
    font-size:.88rem;
    line-height:1.45;
}

.svg-preview-frame{
    width:100%;
    min-height:280px;
    border:1px solid var(--border);
    border-radius:16px;
    background:
      linear-gradient(45deg,#1e293b 25%,transparent 25%),
      linear-gradient(-45deg,#1e293b 25%,transparent 25%),
      linear-gradient(45deg,transparent 75%,#1e293b 75%),
      linear-gradient(-45deg,transparent 75%,#1e293b 75%);
    background-size:20px 20px;
    background-position:0 0,0 10px,10px -10px,-10px 0;
    background-color:#0f172a;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:auto;
    padding:16px;
}

.svg-preview-frame img,
.svg-preview-frame object,
.svg-preview-frame iframe{
    max-width:100%;
    max-height:420px;
}

.meta-table{
    width:100%;
    border-collapse:collapse;
    font-size:.88rem;
}

.meta-table th,
.meta-table td{
    padding:8px 10px;
    border-bottom:1px solid var(--border);
    text-align:left;
    vertical-align:top;
}

.meta-table th{
    width:36%;
    color:#A5B4FC;
    font-weight:600;
}

.meta-table td{
    color:var(--text-light);
    word-break:break-word;
}

.tool-page-footer{
    border-top:1px solid var(--border);
    padding:20px 0 32px;
    margin-top:40px;
}

.tool-page-footer__inner{
    display:flex;
    flex-wrap:wrap;
    gap:12px 20px;
    align-items:center;
    justify-content:space-between;
}

.tool-page-footer a{
    color:var(--text-light);
    text-decoration:none;
    font-size:.9rem;
}

.tool-page-footer a:hover{
    color:var(--text);
}

.site-header__links{
    display:flex;
    align-items:center;
    gap:12px;
}

.guide-page{
    padding:40px 0 64px;
    max-width:720px;
}

.guide-page h1{
    margin:0 0 12px;
    font-size:clamp(1.8rem, 4vw, 2.4rem);
    letter-spacing:-0.03em;
}

.guide-page .guide-lead{
    margin:0 0 28px;
    color:var(--text-light);
    font-size:1.05rem;
    line-height:1.6;
}

.guide-page h2{
    margin:36px 0 12px;
    font-size:1.25rem;
}

.guide-page p,
.guide-page li{
    color:var(--text-light);
    line-height:1.7;
}

.guide-page a{
    color:#A5B4FC;
}

.guide-cta{
    display:inline-flex;
    margin:8px 0 24px;
}

.guide-meta{
    margin:0 0 24px;
    font-size:.85rem;
    color:var(--text-muted);
}

.guides-index{
    padding:48px 0 72px;
}

.guides-index h1{
    margin:0 0 8px;
}

.guides-index__lead{
    margin:0 0 32px;
    color:var(--text-light);
}

.guides-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:16px;
}

.guide-card{
    display:block;
    padding:20px;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    background:var(--bg-elevated);
    text-decoration:none;
    color:inherit;
    transition:border-color .2s ease;
}

.guide-card:hover{
    border-color:rgba(99,102,241,.45);
}

.guide-card h2{
    margin:0 0 8px;
    font-size:1.1rem;
    color:var(--text);
}

.guide-card p{
    margin:0;
    color:var(--text-light);
    font-size:.92rem;
    line-height:1.5;
}

/* ===== Phase 5 tools ===== */

.case-results{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.case-result-row{
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--bg);
}

.case-result-row__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
}

.case-result-row__label{
    font-size:.82rem;
    font-weight:600;
    color:var(--text-light);
    letter-spacing:.02em;
}

.case-result-row__value{
    display:block;
    font-family:"JetBrains Mono", monospace;
    font-size:.88rem;
    color:var(--text);
    word-break:break-word;
    white-space:pre-wrap;
}

.slug-output-wrap{
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid var(--border);
}

.slug-output{
    display:block;
    margin-top:8px;
    padding:14px 16px;
    border-radius:var(--radius-md);
    border:1px solid var(--border);
    background:var(--bg);
    font-family:"JetBrains Mono", monospace;
    font-size:1rem;
    color:#A5B4FC;
    word-break:break-all;
}

.entity-preview-panel{
    margin-top:16px;
}

.entity-preview{
    margin:0;
    padding:14px 16px;
    border-radius:var(--radius-md);
    border:1px solid var(--border);
    background:var(--bg);
    font-family:"JetBrains Mono", monospace;
    font-size:.9rem;
    line-height:1.5;
    white-space:pre-wrap;
    word-break:break-word;
    color:var(--text);
    min-height:3rem;
}

.cron-input{
    width:100%;
    font-family:"JetBrains Mono", monospace;
    font-size:1.05rem;
    letter-spacing:.02em;
}

.cron-presets{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:14px;
}

.cron-preset-btn{
    font-size:.82rem;
    padding:6px 10px;
}

.cron-description-box{
    margin-top:18px;
}

.cron-description{
    margin:8px 0 0;
    padding:14px 16px;
    border-radius:var(--radius-md);
    border:1px solid var(--border);
    background:var(--bg);
    color:var(--text);
    font-size:1rem;
    line-height:1.55;
}

.cron-fields{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:14px;
}

.cron-field-chip{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:8px 12px;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--bg);
    min-width:100px;
}

.cron-field-chip span{
    font-size:.72rem;
    color:var(--text-light);
    text-transform:uppercase;
    letter-spacing:.04em;
}

.cron-field-chip code{
    font-family:"JetBrains Mono", monospace;
    font-size:.9rem;
    color:var(--text);
}

.cron-next-list{
    margin:12px 0 0;
    padding:0 0 0 1.2rem;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.cron-next-list li{
    color:var(--text);
}

.cron-next-list code{
    font-family:"JetBrains Mono", monospace;
    font-size:.85rem;
}

.cron-next-empty{
    list-style:none;
    margin-left:-1.2rem;
    color:var(--text-light);
}

/* ===== Phase 6 tools ===== */

.radius-preview-stage{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:280px;
    padding:32px;
    border-radius:var(--radius-lg);
    border:1px solid var(--border);
    background:
        linear-gradient(135deg, rgba(99,102,241,.12), transparent 55%),
        var(--bg-elevated);
}

.radius-preview-box{
    width:min(220px, 70%);
    aspect-ratio:1;
    background:linear-gradient(145deg, #6366F1, #22D3EE);
    box-shadow:0 18px 40px rgba(0,0,0,.35);
}

.radius-css-output{
    margin:0;
    padding:14px 16px;
    border-radius:var(--radius-md);
    border:1px solid var(--border);
    background:var(--bg);
    font-family:"JetBrains Mono", monospace;
    font-size:.92rem;
    color:var(--text);
    white-space:pre-wrap;
    word-break:break-word;
}

/* Solo layout (no right controls panel) ? same idea as .number-base-panel */
.image-base64-layout{
    width:100%;
    max-width:720px;
    margin:0 auto;
}

.image-base64-dropzone{
    margin:0;
}

.image-base64-hint{
    margin:8px 0 0;
    color:var(--text-light);
    font-size:.88rem;
}

.image-base64-preview-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:16px;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    background:var(--bg-elevated);
    text-align:center;
}

.image-base64-preview{
    max-width:100%;
    max-height:200px;
    border-radius:var(--radius-md);
    object-fit:contain;
    background:repeating-conic-gradient(#2a2f3a 0% 25%, #1e2330 0% 50%) 50% / 16px 16px;
}

.image-base64-meta{
    margin:0;
    color:var(--text-light);
    font-size:.85rem;
}

.image-base64-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:14px;
}

.image-base64-output{
    min-height:200px;
}

.number-base-panel{
    max-width:640px;
    margin:0 auto;
}

.number-base-input{
    font-family:"JetBrains Mono", monospace;
    letter-spacing:.02em;
}

.random-string-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    min-height:200px;
}

.random-string-empty{
    margin:0;
    color:var(--text-light);
}

.random-string-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--bg);
}

.random-string-row code{
    flex:1;
    min-width:0;
    font-family:"JetBrains Mono", monospace;
    font-size:.9rem;
    word-break:break-all;
    color:var(--text);
}

/* ===== Phase 7 tools ===== */

.jwt-encode-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-bottom:20px;
}

.jwt-encode-textarea{
    width:100%;
    min-height:200px;
    margin:0;
    padding:14px 16px;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--bg);
    color:var(--text);
    font-family:"JetBrains Mono", monospace;
    font-size:.88rem;
    line-height:1.55;
    resize:vertical;
}

.jwt-encode-grid .jwt-output-card{
    min-height:0;
    display:flex;
    flex-direction:column;
}

.jwt-encode-grid .jwt-output-header{
    margin-bottom:12px;
}

.jwt-encode-secret{
    margin-bottom:20px;
}

.jwt-encode-token{
    min-height:110px;
    font-family:"JetBrains Mono", monospace;
    word-break:break-all;
}

.sql-options{
    margin-bottom:14px;
}

.sql-dialect-field{
    max-width:240px;
    margin-bottom:0;
}

.sql-textarea{
    min-height:280px;
    font-family:"JetBrains Mono", monospace;
    font-size:.9rem;
    line-height:1.55;
}

.pct-panel{
    max-width:640px;
    margin:0 auto;
}

.pct-mode{
    padding:18px 0;
    border-bottom:1px solid var(--border);
}

.pct-mode:first-child{
    padding-top:0;
}

.pct-mode:last-child{
    padding-bottom:0;
    border-bottom:none;
}

.pct-mode h3{
    margin:0;
    color:#E2E8F0;
    font-size:1rem;
    font-weight:600;
}

.pct-mode__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
}

.pct-copy-btn{
    flex-shrink:0;
    padding:8px 12px;
    font-size:.8rem;
}

.pct-copy-btn:disabled{
    opacity:.45;
    cursor:not-allowed;
}

.pct-result{
    margin:14px 0 0;
    padding:12px 14px;
    border-radius:var(--radius-md);
    border:1px solid var(--border);
    background:var(--bg);
    font-family:"JetBrains Mono", monospace;
    font-size:1.05rem;
    color:var(--text);
}

.css-filter-upload{
    cursor:pointer;
}

.css-filter-stage{
    min-height:280px;
}

.css-filter-preview{
    display:flex;
    align-items:center;
    justify-content:center;
    width:min(100%, 360px);
    aspect-ratio:1;
    border-radius:var(--radius-lg);
    overflow:hidden;
    background:
        linear-gradient(135deg, rgba(99,102,241,0.35), rgba(14,165,233,0.25)),
        var(--bg);
}

.css-filter-preview-img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.css-filter-preview-img--logo{
    width:42%;
    height:auto;
    max-width:160px;
    object-fit:contain;
}

.css-filter-fallback{
    font-size:clamp(1.8rem, 4vw, 2.6rem);
    font-weight:700;
    letter-spacing:-0.03em;
    color:#E2E8F0;
    user-select:none;
}

@media(max-width:900px){
    .jwt-encode-grid{
        grid-template-columns:1fr;
    }
}

/* ===== Phase 8 tools ===== */

.palette-swatch-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
    gap:12px;
}

.palette-swatch{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    background:var(--bg-elevated);
    color:inherit;
    cursor:pointer;
    text-align:left;
    transition:border-color .2s, transform .2s;
}

.palette-swatch:hover{
    border-color:var(--primary);
    transform:translateY(-2px);
}

.palette-swatch__chip{
    display:block;
    width:100%;
    aspect-ratio:1.4;
    border-radius:var(--radius-md);
    background:var(--swatch);
    border:1px solid rgba(255,255,255,.08);
}

.palette-swatch__label{
    font-family:"JetBrains Mono", monospace;
    font-size:.85rem;
}

.palette-swatch__index{
    color:var(--text-light);
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:.4px;
}

.find-replace-options{
    max-width:1100px;
    margin:0 auto 18px;
}

.find-replace-toggles{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:4px;
}

.find-replace-io{
    margin-top:0;
}

.find-replace-textarea{
    min-height:280px;
}

.http-status-panel{
    max-width:1100px;
    margin:0 auto;
}

.http-status-filters{
    margin:16px 0 8px;
}

.http-status-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:14px;
    margin-top:8px;
}

.http-status-card{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:18px;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    background:var(--bg-elevated);
    min-height:100%;
}

.http-status-card__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.http-status-code{
    font-family:"JetBrains Mono", monospace;
    font-size:1.6rem;
    font-weight:700;
    color:#A5B4FC;
    line-height:1;
}

.http-status-phrase{
    margin:0;
    font-size:1.05rem;
    color:#E2E8F0;
}

.http-status-meaning{
    margin:0;
    color:var(--text-light);
    font-size:.9rem;
    line-height:1.5;
    flex:1;
}

.http-status-badge{
    display:inline-flex;
    padding:5px 10px;
    border-radius:999px;
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    border:1px solid transparent;
    white-space:nowrap;
}

.http-status-badge--informational{
    color:#7DD3FC;
    background:rgba(14,165,233,.12);
    border-color:rgba(14,165,233,.3);
}

.http-status-badge--success{
    color:#34D399;
    background:rgba(16,185,129,.12);
    border-color:rgba(16,185,129,.3);
}

.http-status-badge--redirection{
    color:#FBBF24;
    background:rgba(245,158,11,.12);
    border-color:rgba(245,158,11,.3);
}

.http-status-badge--client-error{
    color:#FCA5A5;
    background:rgba(239,68,68,.12);
    border-color:rgba(239,68,68,.3);
}

.http-status-badge--server-error{
    color:#F9A8D4;
    background:rgba(236,72,153,.12);
    border-color:rgba(236,72,153,.3);
}

.http-status-empty{
    margin:24px 0;
    color:var(--text-light);
    text-align:center;
    grid-column:1 / -1;
}

.http-status-copy{
    align-self:flex-start;
    padding:8px 12px;
    font-size:.8rem;
    margin-top:4px;
}

/* ?? Kitnax custom color picker ?? */
.nk-color{
    position:relative;
    display:inline-flex;
    align-items:center;
    flex-shrink:0;
}

.nk-color__native{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    border:0 !important;
    opacity:0 !important;
    pointer-events:none !important;
}

.nk-color__swatch{
    width:44px;
    height:40px;
    border:1px solid var(--border);
    border-radius:var(--input-radius, 12px);
    background:#6366F1;
    cursor:pointer;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
    transition:transform .12s ease, border-color .12s ease;
}

.nk-color__swatch:hover{
    border-color:#64748B;
}

.nk-color__swatch:focus-visible{
    outline:2px solid #818CF8;
    outline-offset:2px;
}

.nk-color.is-open .nk-color__swatch{
    border-color:#818CF8;
}

.nk-color--wide{
    width:100%;
    max-width:280px;
}

.nk-color--wide .nk-color__swatch{
    width:100%;
    height:56px;
    border-radius:16px;
}

.nk-color__popover{
    position:fixed;
    z-index:1200;
    width:240px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:16px;
    background:#1E293B;
    box-shadow:0 18px 40px rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(4px);
    transition:opacity .12s ease, transform .12s ease, visibility .12s ease;
}

.nk-color__popover.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
}

.nk-color__sv{
    position:relative;
    width:100%;
    height:140px;
    border-radius:12px;
    cursor:crosshair;
    touch-action:none;
    overflow:hidden;
    border:1px solid rgba(148,163,184,.25);
}

.nk-color__sv-thumb{
    position:absolute;
    width:14px;
    height:14px;
    margin:-7px 0 0 -7px;
    border:2px solid #fff;
    border-radius:50%;
    box-shadow:0 0 0 1px rgba(15,23,42,.55);
    pointer-events:none;
}

.nk-color__hue{
    width:100%;
    margin:12px 0 10px;
    appearance:none;
    height:12px;
    border-radius:999px;
    background:linear-gradient(
        to right,
        #f00 0%,
        #ff0 17%,
        #0f0 33%,
        #0ff 50%,
        #00f 67%,
        #f0f 83%,
        #f00 100%
    );
    outline:none;
    cursor:pointer;
}

.nk-color__hue::-webkit-slider-thumb{
    appearance:none;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#fff;
    border:2px solid #0F172A;
    box-shadow:0 1px 4px rgba(0,0,0,.35);
}

.nk-color__hue::-moz-range-thumb{
    width:16px;
    height:16px;
    border-radius:50%;
    background:#fff;
    border:2px solid #0F172A;
    box-shadow:0 1px 4px rgba(0,0,0,.35);
}

.nk-color__row{
    display:flex;
    gap:8px;
    align-items:center;
}

.nk-color__hex{
    flex:1;
    min-width:0;
    height:36px;
    padding:0 10px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#0F172A;
    color:#E2E8F0;
    font-family:"JetBrains Mono", ui-monospace, monospace;
    font-size:.85rem;
}

.nk-color__system{
    flex-shrink:0;
    padding:8px 10px !important;
    font-size:.75rem !important;
}

.gradient-color-card .nk-color--wide,
.gradient-color-card .nk-color{
    max-width:52px;
}

.gradient-color-card .nk-color__swatch{
    width:48px;
    height:48px;
    border-radius:12px;
}

.qr-color-row .nk-color__swatch{
    width:40px;
    height:34px;
}

.shadow-color-label{
    display:inline-flex;
    align-items:center;
    gap:8px;
}

/* =====================================
   SVG STUDIO / IMAGE PRIVACY / IMAGE RESIZER
===================================== */

.svg-studio-textarea{
    min-height:220px;
}

.svg-studio-btn-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:14px;
}

.svg-studio-btn-grid .btn{
    width:100%;
}

.svg-preview-frame{
    position:relative;
    transition:border-color .15s ease, background-color .15s ease;
}

.svg-preview-frame.is-dragover{
    border-color:var(--primary);
    background-color:rgba(99,102,241,.1);
}

.svg-studio-empty{
    margin:0;
    color:var(--text-light);
    font-size:.9rem;
}

.tool-disclaimer{
    margin:0 0 20px;
    padding:14px 18px;
    border:1px solid rgba(245,158,11,.35);
    border-radius:var(--radius-md);
    background:rgba(245,158,11,.1);
    color:#FDE68A;
    font-size:.9rem;
    line-height:1.5;
}

.tool-disclaimer strong{
    color:#FEF3C7;
}

.image-privacy-flag{
    margin:8px 0 0;
    font-size:.85rem;
    font-weight:600;
}

.image-privacy-flag.is-clean{ color:#4ADE80; }
.image-privacy-flag.is-present{ color:#F87171; }
.image-privacy-flag.is-warning{ color:#FBBF24; }

.image-privacy-metadata{
    margin-top:20px;
    padding:20px;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    background:var(--bg-elevated);
}

.image-privacy-metadata h3{
    margin:0 0 12px;
    font-size:1rem;
    color:var(--text);
}

.image-privacy-metadata .meta-table a{
    color:var(--primary);
}

.image-privacy-disclaimer{
    margin:0;
    color:var(--text-light);
    font-size:.85rem;
    line-height:1.5;
}

.image-resizer-mode-tabs{
    display:flex;
    gap:8px;
    margin-bottom:16px;
}

.image-resizer-mode-tabs .btn{
    flex:1;
}

.image-resizer-mode-tabs .btn.is-active{
    background:var(--primary);
    border-color:var(--primary);
    color:white;
}

.image-resizer-exact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.image-resizer-lock{
    display:flex;
    align-items:center;
    gap:8px;
    margin:12px 0 0;
}

@media(max-width:900px){
    .svg-studio-btn-grid{
        grid-template-columns:1fr 1fr;
    }
}



/* PDF Toolkit ? compose board */
.pdf-board-empty{
    margin:0;
    padding:28px 22px;
    border:1px dashed var(--border);
    border-radius:var(--radius-lg);
    background:var(--bg-elevated);
    color:var(--text-light);
    text-align:center;
    line-height:1.55;
}

.pdf-board-empty p{ margin:0; max-width:52ch; margin-inline:auto; }

.pdf-board{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin:0;
    min-width:0;
}

.pdf-doc-row{
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--bg-elevated);
    overflow:hidden;
    transition:border-color .15s ease, box-shadow .15s ease;
}

.pdf-doc-row.is-active{
    border-color:#F87171;
    box-shadow:0 0 0 1px rgba(248,113,113,.35);
}

.pdf-doc-row__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 14px;
    background:#1e293b;
    border-bottom:1px solid var(--border);
}

.pdf-doc-name{
    color:#F8FAFC;
    font-size:.92rem;
    margin-right:8px;
}

.pdf-doc-count{
    color:#94A3B8;
    font-size:.82rem;
}

.pdf-doc-row__actions{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.pdf-doc-row__actions .btn{
    padding:6px 10px;
    font-size:.75rem;
}

.pdf-doc-pages{
    display:flex;
    align-items:stretch;
    gap:12px;
    padding:14px;
    min-height:140px;
    overflow-x:auto;
    background:#0f172a;
    position:relative;
}

.pdf-doc-pages.is-drop-target{
    outline:2px dashed #818CF8;
    outline-offset:-6px;
    background:#172554;
}

.pdf-doc-pages.is-copy-drop{
    outline-color:#34D399;
    background:#064E3B;
}

.pdf-doc-empty{
    margin:auto;
    color:#64748B;
    font-size:.9rem;
}

.pdf-page-thumb{
    position:relative;
    flex:0 0 auto;
    width:110px;
    padding:0;
    border:2px solid transparent;
    border-radius:8px;
    background:#1e293b;
    cursor:grab;
    overflow:visible;
    transition:border-color .12s ease, transform .12s ease, opacity .12s ease;
}

.pdf-page-thumb:hover,
.pdf-page-thumb:focus-visible{
    border-color:#818CF8;
    outline:none;
}

.pdf-page-thumb.is-selected{
    border-color:#FBBF24;
    box-shadow:0 0 0 2px rgba(251,191,36,.45), 0 0 16px rgba(251,191,36,.25);
}

.pdf-page-thumb.is-selected:focus-visible{
    border-color:#FBBF24;
}

.pdf-page-thumb.is-dragging{
    opacity:.45;
    cursor:grabbing;
}

.pdf-page-thumb img{
    display:block;
    width:100%;
    height:auto;
    border-radius:6px;
    pointer-events:none;
    user-select:none;
}

/* Clear insertion caret between / beside pages */
.pdf-page-thumb.drop-before::before,
.pdf-page-thumb.drop-after::after{
    content:"";
    position:absolute;
    top:2px;
    bottom:2px;
    width:4px;
    border-radius:4px;
    background:#818CF8;
    box-shadow:0 0 0 2px rgba(129,140,248,.25), 0 0 12px rgba(129,140,248,.85);
    z-index:2;
    pointer-events:none;
}

.pdf-page-thumb.drop-before::before{ left:-9px; }
.pdf-page-thumb.drop-after::after{ right:-9px; }

.pdf-doc-pages.is-copy-drop .pdf-page-thumb.drop-before::before,
.pdf-doc-pages.is-copy-drop .pdf-page-thumb.drop-after::after{
    background:#34D399;
    box-shadow:0 0 0 2px rgba(52,211,153,.25), 0 0 12px rgba(52,211,153,.85);
}

.pdf-drag-hint{
    position:fixed;
    z-index:9999;
    pointer-events:none;
    padding:6px 10px;
    border-radius:8px;
    font-size:.78rem;
    font-weight:600;
    color:#F8FAFC;
    background:rgba(15,23,42,.92);
    border:1px solid #475569;
    box-shadow:0 8px 24px rgba(0,0,0,.35);
    transform:translate(12px, 12px);
    white-space:nowrap;
}

.pdf-drag-hint.is-copy{
    border-color:#34D399;
    color:#D1FAE5;
}

.tool-controls-panel kbd{
    display:inline-block;
    padding:1px 6px;
    border:1px solid var(--border);
    border-radius:6px;
    background:rgba(15,23,42,.5);
    font-family:inherit;
    font-size:.78em;
}

/* Image ? SVG presets */
.svg-preset-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:14px;
}

.svg-preset-grid .btn.is-active{
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
}

.svg-advanced-details{
    margin-top:12px;
    border:1px solid var(--border);
    border-radius:12px;
    padding:10px 12px;
    background:rgba(15,23,42,.35);
}

.svg-advanced-details summary{
    cursor:pointer;
    color:var(--text-light);
    font-size:.88rem;
    font-weight:600;
}

.svg-advanced-details[open] summary{
    margin-bottom:12px;
    color:var(--text);
}

.svg-bg-toggle{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin:12px 0;
    padding:12px;
    border:1px solid var(--border);
    border-radius:12px;
    background:rgba(15,23,42,.35);
    font-size:.88rem;
    line-height:1.45;
    color:var(--text-light);
}

.svg-bg-toggle input{
    margin-top:3px;
}

.svg-gradient-note{
    margin:0 0 12px;
    font-size:.82rem;
    color:#FBBF24;
    line-height:1.45;
}

@media(max-width:700px){
    .pdf-doc-row__head{
        flex-direction:column;
        align-items:flex-start;
    }
    .svg-preset-grid{
        grid-template-columns:1fr;
    }
}