.goodietools-tool {
    max-width: 100%;
    padding: 24px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    color: #263238;
}
.goodietools-tool__intro h2 { margin: 0 0 8px; color: #0047AB; }
.goodietools-tool__intro p { margin: 0 0 20px; }
.goodietools-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 18px 0;
}
.goodietools-field { display: flex; flex-direction: column; gap: 7px; margin: 12px 0; }
.goodietools-field span { font-weight: 600; }
.goodietools-field input, .goodietools-field select {
    width: 100%; min-height: 42px; padding: 8px 10px;
    border: 1px solid #cbd5e1; border-radius: 6px; box-sizing: border-box;
}
.goodietools-field input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-height: 18px;
    padding: 0;
    margin: 0;
    accent-color: #0047AB;
}
.goodietools-button {
    display: inline-block; padding: 11px 20px; border: 0; border-radius: 6px;
    background: #0047AB; color: #fff; font-weight: 600; cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}
.goodietools-button:hover { background: #003477; transform: translateY(-1px); }
.goodietools-button:disabled { opacity: .6; cursor: wait; transform: none; }
.goodietools-status { min-height: 1.5em; margin: 14px 0; }

.goodietools-file-info {
    margin: 8px 0 14px;
    color: #475569;
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.goodietools-file-info:empty {
    display: none;
}

.goodietools-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.goodietools-result {
    display: flex; flex-direction: column; gap: 8px; padding: 14px;
    border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc;
}
.goodietools-result a { color: #0047AB; font-weight: 700; }
@media (max-width: 650px) {
    .goodietools-controls { grid-template-columns: 1fr; gap: 4px; }
    .goodietools-tool { padding: 16px; }
}

/* Image Crop */
.goodietools-image-crop .goodietools-crop-help {
    margin: 8px 0 14px;
    color: #475569;
    font-size: 14px;
    line-height: 1.5;
}
.goodietools-image-crop .goodietools-crop-workspace[hidden] {
    display: none !important;
}
.goodietools-image-crop .goodietools-crop-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 220px;
    max-height: 680px;
    overflow: hidden;
    background: #172033;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    touch-action: none;
    user-select: none;
}
.goodietools-image-crop .goodietools-crop-image {
    display: block;
    max-width: 100%;
    max-height: 680px;
    width: auto;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}
.goodietools-image-crop .goodietools-crop-selection {
    position: absolute;
    display: none;
    box-sizing: border-box;
    border: 2px solid #ffffff;
    outline: 1px solid #0047AB;
    background: rgba(255, 255, 255, 0.04);
    cursor: move;
    touch-action: none;
}
.goodietools-image-crop .goodietools-crop-selection::before {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.52);
    pointer-events: none;
}
.goodietools-image-crop .goodietools-crop-handle {
    position: absolute;
    z-index: 2;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border: 2px solid #0047AB;
    border-radius: 3px;
    box-sizing: border-box;
}
.goodietools-image-crop .goodietools-crop-handle--nw {
    top: -7px;
    left: -7px;
    cursor: nwse-resize;
}
.goodietools-image-crop .goodietools-crop-handle--ne {
    top: -7px;
    right: -7px;
    cursor: nesw-resize;
}
.goodietools-image-crop .goodietools-crop-handle--sw {
    bottom: -7px;
    left: -7px;
    cursor: nesw-resize;
}
.goodietools-image-crop .goodietools-crop-handle--se {
    right: -7px;
    bottom: -7px;
    cursor: nwse-resize;
}
.goodietools-image-crop .goodietools-crop-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 18px;
}
.goodietools-image-crop .goodietools-crop-download {
    background: #BC5917;
}
.goodietools-image-crop .goodietools-crop-download:hover {
    background: #984511;
}
@media (max-width: 650px) {
    .goodietools-image-crop .goodietools-crop-stage {
        min-height: 180px;
    }
    .goodietools-image-crop .goodietools-crop-handle {
        width: 18px;
        height: 18px;
    }
    .goodietools-image-crop .goodietools-crop-handle--nw { top: -9px; left: -9px; }
    .goodietools-image-crop .goodietools-crop-handle--ne { top: -9px; right: -9px; }
    .goodietools-image-crop .goodietools-crop-handle--sw { bottom: -9px; left: -9px; }
    .goodietools-image-crop .goodietools-crop-handle--se { right: -9px; bottom: -9px; }
}


/* ZIP Creator */
.goodietools-zip-creator .goodietools-zip-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 150px;
    padding: 22px;
    border: 2px dashed #94a3b8;
    border-radius: 10px;
    background: #f8fafc;
    color: #334155;
    text-align: center;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}
.goodietools-zip-creator .goodietools-zip-dropzone.is-dragover {
    border-color: #0047AB;
    background: #eff6ff;
}
.goodietools-zip-creator .goodietools-zip-dropzone strong { font-size: 18px; }
.goodietools-zip-creator .goodietools-zip-dropzone span { color: #64748b; font-size: 14px; }
.goodietools-zip-creator .goodietools-zip-pickers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 12px;
}
.goodietools-zip-creator .goodietools-zip-summary {
    margin: 14px 0 8px;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
}
.goodietools-zip-creator .goodietools-zip-list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.goodietools-zip-creator .goodietools-zip-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-bottom: 1px solid #e2e8f0;
}
.goodietools-zip-creator .goodietools-zip-file:last-child { border-bottom: 0; }
.goodietools-zip-creator .goodietools-zip-file-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 3px;
}
.goodietools-zip-creator .goodietools-zip-file-details strong {
    overflow-wrap: anywhere;
    font-size: 13px;
}
.goodietools-zip-creator .goodietools-zip-file-details span { color: #64748b; font-size: 12px; }
.goodietools-zip-creator .goodietools-zip-remove {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border: 0; border-radius: 5px;
    background: #fee2e2; color: #991b1b;
    font-size: 21px; line-height: 1; cursor: pointer;
}
.goodietools-zip-creator .goodietools-zip-options { margin-top: 8px; }
.goodietools-zip-creator .goodietools-zip-actions {
    display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px;
}
.goodietools-zip-creator .goodietools-zip-create { background: #BC5917; }
.goodietools-zip-creator .goodietools-zip-create:hover { background: #984511; }
.goodietools-zip-creator .goodietools-zip-clear { background: #64748b; }
.goodietools-zip-creator .goodietools-zip-progress {
    height: 9px; margin-top: 16px; overflow: hidden;
    border-radius: 99px; background: #e2e8f0;
}
.goodietools-zip-creator .goodietools-zip-progress span {
    display: block; width: 0; height: 100%;
    background: #BC5917; transition: width .12s linear;
}
@media (max-width: 650px) {
    .goodietools-zip-creator .goodietools-zip-pickers { grid-template-columns: 1fr; gap: 0; }
}


/* Batch Rename */
.goodietools-batch-rename .goodietools-rename-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 22px 0;
    padding: 0;
    list-style: none;
}
.goodietools-batch-rename .goodietools-rename-steps li {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
}
.goodietools-batch-rename .goodietools-rename-steps li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 27px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #e2e8f0;
}
.goodietools-batch-rename .goodietools-rename-steps li.is-active {
    border-color: #0047AB;
    color: #0047AB;
    background: #eff6ff;
}
.goodietools-batch-rename .goodietools-rename-steps li.is-active span,
.goodietools-batch-rename .goodietools-rename-steps li.is-complete span {
    color: #fff;
    background: #0047AB;
}
.goodietools-batch-rename .goodietools-rename-panel {
    margin: 16px 0;
    padding: 18px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #fff;
}
.goodietools-batch-rename .goodietools-rename-panel[hidden],
.goodietools-batch-rename [data-mode-panel][hidden] {
    display: none !important;
}
.goodietools-batch-rename .goodietools-rename-panel h3 {
    margin: 0 0 16px;
    font-size: 19px;
    color: #12345b;
}
.goodietools-batch-rename .goodietools-rename-dropzone {
    display: flex;
    min-height: 145px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    text-align: center;
    cursor: pointer;
}
.goodietools-batch-rename .goodietools-rename-dropzone.is-dragover {
    border-color: #0047AB;
    background: #eff6ff;
}
.goodietools-batch-rename .goodietools-rename-dropzone strong { font-size: 18px; }
.goodietools-batch-rename .goodietools-rename-dropzone span,
.goodietools-batch-rename .goodietools-rename-help { color: #64748b; font-size: 13px; }
.goodietools-batch-rename .goodietools-rename-pickers,
.goodietools-batch-rename .goodietools-rename-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.goodietools-batch-rename .goodietools-rename-fields.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.goodietools-batch-rename .goodietools-rename-file-summary,
.goodietools-batch-rename .goodietools-rename-preview-summary {
    margin: 14px 0 8px;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
}
.goodietools-batch-rename .goodietools-rename-file-list {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
}
.goodietools-batch-rename .goodietools-rename-file-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 11px;
    border-bottom: 1px solid #e2e8f0;
}
.goodietools-batch-rename .goodietools-rename-file-row:last-child { border-bottom: 0; }
.goodietools-batch-rename .goodietools-rename-file-row span {
    min-width: 0;
    flex: 1;
    overflow-wrap: anywhere;
    font-size: 13px;
}
.goodietools-batch-rename .goodietools-rename-file-row small { color: #64748b; white-space: nowrap; }
.goodietools-batch-rename .goodietools-rename-file-row button {
    width: 29px;
    height: 29px;
    border: 0;
    border-radius: 5px;
    background: #fee2e2;
    color: #991b1b;
    font-size: 20px;
    cursor: pointer;
}
.goodietools-batch-rename .goodietools-rename-step-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}
.goodietools-batch-rename .goodietools-rename-clear,
.goodietools-batch-rename .goodietools-rename-back,
.goodietools-batch-rename .goodietools-rename-back-settings { background: #64748b; }
.goodietools-batch-rename .goodietools-rename-mode {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.goodietools-batch-rename .goodietools-rename-mode button {
    padding: 10px 14px;
    border: 1px solid #0047AB;
    border-right-width: 0;
    background: #fff;
    color: #12345b;
    cursor: pointer;
}
.goodietools-batch-rename .goodietools-rename-mode button:first-child { border-radius: 6px 0 0 6px; }
.goodietools-batch-rename .goodietools-rename-mode button:last-child {
    border-right-width: 1px;
    border-radius: 0 6px 6px 0;
}
.goodietools-batch-rename .goodietools-rename-mode button.is-active {
    background: #0047AB;
    color: #fff;
}
.goodietools-batch-rename .goodietools-rename-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 10px 14px 10px 0;
}
.goodietools-batch-rename .goodietools-rename-check input { accent-color: #0047AB; }
.goodietools-batch-rename .goodietools-rename-error {
    color: #b91c1c;
    font-size: 13px;
}
.goodietools-batch-rename .goodietools-rename-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
}
.goodietools-batch-rename .goodietools-rename-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    margin: 0;
}
.goodietools-batch-rename .goodietools-rename-table th,
.goodietools-batch-rename .goodietools-rename-table td {
    padding: 11px;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
    font-size: 13px;
    overflow-wrap: anywhere;
}
.goodietools-batch-rename .goodietools-rename-table th { background: #f8fafc; font-weight: 700; }
.goodietools-batch-rename .goodietools-rename-table td.goodietools-rename-new-name {
    background: #eff6ff;
    color: #003477;
    font-weight: 600;
}
.goodietools-batch-rename .goodietools-rename-table td.is-error { color: #b91c1c; font-weight: 700; }
.goodietools-batch-rename .goodietools-rename-download-note {
    color: #64748b;
    font-size: 13px;
}
.goodietools-batch-rename .goodietools-rename-progress {
    height: 9px;
    margin-top: 14px;
    overflow: hidden;
    border-radius: 99px;
    background: #e2e8f0;
}
.goodietools-batch-rename .goodietools-rename-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: #0047AB;
    transition: width .12s linear;
}
.goodietools-batch-rename .goodietools-rename-single-downloads {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.goodietools-batch-rename .goodietools-rename-one {
    padding: 8px 12px;
    font-size: 13px;
}
@media (max-width: 650px) {
    .goodietools-batch-rename .goodietools-rename-steps { gap: 5px; }
    .goodietools-batch-rename .goodietools-rename-steps li {
        flex-direction: column;
        gap: 5px;
        padding: 9px 4px;
        text-align: center;
        font-size: 11px;
    }
    .goodietools-batch-rename .goodietools-rename-pickers,
    .goodietools-batch-rename .goodietools-rename-fields,
    .goodietools-batch-rename .goodietools-rename-fields.three { grid-template-columns: 1fr; gap: 2px; }
    .goodietools-batch-rename .goodietools-rename-panel { padding: 13px; }
}


/* Arcade Games */
.goodietools-game .goodietools-game-topbar{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0}
.goodietools-game .goodietools-game-topbar>div{display:flex;flex-direction:column;gap:3px;min-width:85px;padding:9px 13px;background:#f1f5f9;border-radius:8px}
.goodietools-game .goodietools-game-topbar span{font-size:12px;color:#64748b}
.goodietools-game .goodietools-game-topbar strong{font-size:20px;color:#0047AB}
.goodietools-game-board-wrap{position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden;padding:12px;background:#101b32;border-radius:10px}
.goodietools-game[data-goodietools-game="tetris"] .goodietools-game-board-wrap{background:#263750}
.goodietools-game[data-goodietools-game="breakout"] .goodietools-game-board-wrap{background:#263750}
.goodietools-game[data-goodietools-game="snake"] .goodietools-game-board-wrap{background:#263750}
.goodietools-game-canvas{display:block;width:100%;max-width:480px;height:auto;touch-action:none;border-radius:4px}
.goodietools-game[data-goodietools-game="tetris"] .goodietools-game-canvas{max-width:300px}
.goodietools-game-overlay{position:absolute;inset:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;color:#fff;background:rgba(8,18,36,.78);border-radius:6px}
.goodietools-game-overlay[hidden]{display:none}
.goodietools-game-overlay strong{font-size:23px}
.goodietools-game-overlay span{font-size:14px}
.goodietools-game-controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.goodietools-game-touch{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.goodietools-game-touch button{min-width:44px;min-height:42px;padding:8px 13px;border:1px solid #cbd5e1;border-radius:7px;background:#eff6ff;color:#0047AB;font-weight:700;cursor:pointer;touch-action: manipulation}
.goodietools-game-help{font-size:13px;color:#64748b;margin:12px 0 0}
@media(max-width:650px){.goodietools-game .goodietools-game-topbar>div{flex:1;min-width:65px}.goodietools-game-controls .goodietools-button{flex:1}.goodietools-game-touch button{flex:1}}

/* Goodie Arcade: Flappy Bird */
.goodietools-flappy {
    --flappy-blue: #0759c7;
    max-width: 620px;
    margin: 24px auto;
    padding: clamp(14px, 3vw, 24px);
    overflow: hidden;
    border: 1px solid #dbeafe;
    border-radius: 22px;
    background: linear-gradient(145deg, #f8fbff 0%, #eef6ff 100%);
    box-shadow: 0 16px 42px rgba(21, 62, 115, .12);
}
.goodietools-flappy-stats { display: flex; gap: 8px; }
.goodietools-flappy-stats div {
    min-width: 68px;
    padding: 8px 11px;
    border: 1px solid #d9e8fb;
    border-radius: 12px;
    background: rgba(255,255,255,.85);
    text-align: center;
}
.goodietools-flappy-stats span {
    display: block;
    color: #7890ad;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
}
.goodietools-flappy-stats strong {
    display: block;
    color: #0759c7;
    font-size: 23px;
    line-height: 1.25;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.goodietools-flappy-frame {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    overflow: hidden;
    border: 5px solid #fff;
    border-radius: 17px;
    background: #83d7f5;
    box-shadow: 0 8px 24px rgba(25, 69, 116, .18);
}
.goodietools-flappy-canvas { display: block; width: 100%; height: auto; touch-action: manipulation; }
.goodietools-flappy-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(14, 48, 83, .2);
    backdrop-filter: blur(2px);
}
.goodietools-flappy-overlay[hidden] { display: none !important; }
.goodietools-flappy-panel {
    display: flex;
    width: min(100%, 290px);
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 23px 22px 21px;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 20px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 12px 35px rgba(20, 57, 95, .2);
    text-align: center;
}
.goodietools-flappy-bird-emoji { font-size: 48px; line-height: 1.1; filter: drop-shadow(0 4px 3px rgba(0,0,0,.12)); }
.goodietools-flappy-panel strong { color: #17385f; font-size: 23px; font-weight: 800; }
.goodietools-flappy-panel > span:not(.goodietools-flappy-bird-emoji) { color: #647b98; font-size: 13px; line-height: 1.5; }
.goodietools-flappy-panel button {
    min-height: 45px;
    margin-top: 4px;
    padding: 0 25px;
    border: 0;
    border-radius: 99px;
    background: linear-gradient(135deg, #0876e8, #0752bd);
    box-shadow: 0 5px 13px rgba(7, 89, 199, .28);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.goodietools-flappy-panel button:hover { transform: translateY(-2px); box-shadow: 0 8px 17px rgba(7, 89, 199, .32); }
.goodietools-flappy-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 14px;
    color: #637b99;
    font-size: 12px;
}
.goodietools-flappy-footer kbd {
    padding: 3px 7px;
    border: 1px solid #cbdcf0;
    border-bottom-width: 2px;
    border-radius: 5px;
    background: #fff;
    color: #31557f;
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
}
.goodietools-flappy-footer button {
    padding: 5px 10px;
    border: 1px solid #d4e3f5;
    border-radius: 99px;
    background: #fff;
    color: #315d91;
    font: inherit;
    cursor: pointer;
}
.goodietools-flappy-footer button:hover { border-color: #7eafe9; color: #0759c7; }
.goodietools-flappy button:focus-visible,
.goodietools-flappy canvas:focus-visible { outline: 3px solid #f6b83f; outline-offset: 3px; }
@media (max-width: 480px) {
    .goodietools-flappy { padding: 12px; border-radius: 16px; }
    .goodietools-flappy-stats { width: 100%; }
    .goodietools-flappy-stats div { flex: 1; }
    .goodietools-flappy-footer { gap: 8px; }
}


/* Favicon Generator */
.goodietools-favicon-generator .goodietools-favicon-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr);
    gap: 26px;
    align-items: start;
}
.goodietools-favicon-generator .goodietools-favicon-mode {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}
.goodietools-favicon-generator .goodietools-favicon-mode button {
    padding: 10px 15px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #f8fafc;
    color: #334155;
    font-weight: 600;
    cursor: pointer;
}
.goodietools-favicon-generator .goodietools-favicon-mode button.is-active {
    border-color: #0047AB;
    background: #eff6ff;
    color: #0047AB;
}
.goodietools-favicon-generator [hidden] { display: none !important; }
.goodietools-favicon-generator .goodietools-favicon-help {
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}
.goodietools-favicon-generator .goodietools-favicon-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
    color: #334155;
    font-size: 14px;
}
.goodietools-favicon-generator .goodietools-favicon-preview-panel {
    padding: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}
.goodietools-favicon-generator .goodietools-favicon-preview-panel h3 {
    margin: 0 0 16px;
    color: #12345b;
}
.goodietools-favicon-generator .goodietools-favicon-preview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 12px;
    align-items: center;
}
.goodietools-favicon-generator .goodietools-favicon-preview-grid > div {
    display: flex;
    min-height: 90px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}
.goodietools-favicon-generator .goodietools-favicon-preview-grid > div > span {
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}
.goodietools-favicon-generator .goodietools-favicon-preview-grid canvas {
    display: block;
    width: 72px;
    height: 72px;
    image-rendering: auto;
}
.goodietools-favicon-generator .goodietools-favicon-preview-grid > div:nth-child(1) canvas,
.goodietools-favicon-generator .goodietools-favicon-preview-grid > div:nth-child(2) canvas,
.goodietools-favicon-generator .goodietools-favicon-preview-grid > div:nth-child(3) canvas {
    width: 32px;
    height: 32px;
}
.goodietools-favicon-generator .goodietools-favicon-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #f1f5f9;
    font-size: 12px;
}
.goodietools-favicon-generator .goodietools-favicon-tab canvas {
    flex: 0 0 24px;
    width: 24px !important;
    height: 24px !important;
}
.goodietools-favicon-generator .goodietools-favicon-tab b {
    overflow: hidden;
    color: #475569;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.goodietools-favicon-generator .goodietools-favicon-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}
.goodietools-favicon-generator .goodietools-favicon-download {
    background: #BC5917;
}
.goodietools-favicon-generator .goodietools-favicon-download:hover {
    background: #984511;
}
.goodietools-favicon-generator .goodietools-favicon-reset {
    background: #64748b;
}
@media (max-width: 700px) {
    .goodietools-favicon-generator .goodietools-favicon-layout {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}


/* QR Code Generator */
.goodietools-qr-generator .goodietools-qr-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
    gap: 26px;
    align-items: start;
}
.goodietools-qr-generator .goodietools-qr-fields[hidden] { display: none !important; }
.goodietools-qr-generator .goodietools-qr-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.goodietools-qr-generator .goodietools-qr-check {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 12px 0;
    color: #334155;
    font-size: 14px;
}
.goodietools-qr-generator .goodietools-qr-customize {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #e2e8f0;
}
.goodietools-qr-generator .goodietools-qr-customize h3,
.goodietools-qr-generator .goodietools-qr-preview-panel h3 {
    margin: 0 0 15px;
    color: #17385f;
    font-size: 18px;
}
.goodietools-qr-generator .goodietools-qr-preview-panel {
    position: sticky;
    top: 20px;
    padding: 20px;
    border: 1px solid #dce8f5;
    border-radius: 14px;
    background: #f7faff;
    text-align: center;
}
.goodietools-qr-generator .goodietools-qr-preview-wrap {
    display: flex;
    min-height: 280px;
    align-items: center;
    justify-content: center;
    padding: 18px;
    border: 1px dashed #c4d7ed;
    border-radius: 12px;
    background: repeating-conic-gradient(#f1f5f9 0% 25%, #fff 0% 50%) 50% / 20px 20px;
}
.goodietools-qr-generator .goodietools-qr-preview {
    display: flex;
    width: min(100%, 260px);
    aspect-ratio: 1;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(20, 55, 95, .12);
}
.goodietools-qr-generator .goodietools-qr-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.goodietools-qr-generator .goodietools-qr-placeholder {
    max-width: 180px;
    color: #8294ab;
    font-size: 14px;
}
.goodietools-qr-generator .goodietools-qr-status {
    min-height: 20px;
    margin: 12px 0;
    color: #526174;
    font-size: 13px;
}
.goodietools-qr-generator .goodietools-qr-downloads {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
}
.goodietools-qr-generator .goodietools-qr-downloads button:disabled {
    cursor: not-allowed;
    opacity: .45;
}
.goodietools-qr-generator .goodietools-qr-note {
    margin: 14px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}
@media (max-width: 700px) {
    .goodietools-qr-generator .goodietools-qr-layout { grid-template-columns: 1fr; gap: 20px; }
    .goodietools-qr-generator .goodietools-qr-preview-panel { position: static; }
}
@media (max-width: 420px) {
    .goodietools-qr-generator .goodietools-qr-two-col { grid-template-columns: 1fr; gap: 0; }
    .goodietools-qr-generator .goodietools-qr-preview-wrap { min-height: 230px; }
}


/* JSON Formatter */
.goodietools-json-formatter .goodietools-json-toolbar {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}
.goodietools-json-formatter .goodietools-json-indent {
    min-width: 150px;
    margin: 0;
}
.goodietools-json-formatter .goodietools-json-sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    color: #334155;
    font-size: 14px;
}
.goodietools-json-formatter .goodietools-json-sort input {
    width: 17px;
    height: 17px;
    accent-color: #0047AB;
}
.goodietools-json-formatter .goodietools-json-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid #b8d8fa;
    border-radius: 7px;
    color: #0047AB;
    font-weight: 700;
    cursor: pointer;
    background: #f2f8ff;
}
.goodietools-json-formatter .goodietools-json-upload input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
}
.goodietools-json-formatter .goodietools-json-editor-label textarea {
    display: block;
    width: 100%;
    min-height: 330px;
    padding: 16px;
    box-sizing: border-box;
    resize: vertical;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #f8fafc;
    color: #172b4d;
    font: 14px/1.6 Consolas, Monaco, "Courier New", monospace;
    tab-size: 2;
    white-space: pre;
    overflow: auto;
}
.goodietools-json-formatter .goodietools-json-editor-label textarea:focus {
    outline: 2px solid #a8d3ff;
    border-color: #4b91e2;
}
.goodietools-json-formatter .goodietools-json-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 16px 0;
}
.goodietools-json-formatter .goodietools-json-secondary {
    background: #eaf3ff;
    color: #06469b;
    border: 1px solid #b8d8fa;
}
.goodietools-json-formatter .goodietools-json-secondary:hover {
    background: #d9eaff;
}
.goodietools-json-formatter .goodietools-json-clear {
    background: #fff;
    color: #64748b;
    border: 1px solid #cbd5e1;
}
.goodietools-json-formatter .goodietools-json-clear:hover {
    background: #f1f5f9;
    color: #334155;
}
.goodietools-json-formatter .goodietools-json-feedback {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid #dbe5ef;
    border-radius: 8px;
    background: #f8fafc;
    color: #475569;
    font-size: 14px;
}
.goodietools-json-formatter .goodietools-json-indicator {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: #94a3b8;
}
.goodietools-json-formatter .goodietools-json-feedback[data-state="success"] {
    color: #166534;
    background: #f0fdf4;
    border-color: #bbf7d0;
}
.goodietools-json-formatter .goodietools-json-feedback[data-state="success"] .goodietools-json-indicator {
    background: #16a34a;
}
.goodietools-json-formatter .goodietools-json-feedback[data-state="error"] {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}
.goodietools-json-formatter .goodietools-json-feedback[data-state="error"] .goodietools-json-indicator {
    background: #dc2626;
}
.goodietools-json-formatter .goodietools-json-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 10px;
    color: #64748b;
    font-size: 12px;
}
.goodietools-json-formatter .goodietools-json-note {
    margin: 14px 0 0;
    color: #64748b;
    font-size: 13px;
}
@media (max-width: 650px) {
    .goodietools-json-formatter .goodietools-json-editor-label textarea {
        min-height: 260px;
        font-size: 13px;
    }
    .goodietools-json-formatter .goodietools-json-actions .goodietools-button {
        flex: 1 1 calc(50% - 9px);
    }
}

/* Image Compressor */
.goodietools-image-compressor .goodietools-ic-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 170px;
    margin: 20px 0;
    padding: 24px;
    border: 2px dashed #b8c8dc;
    border-radius: 14px;
    background: #f7faff;
    color: #183653;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}
.goodietools-image-compressor .goodietools-ic-dropzone:hover,
.goodietools-image-compressor .goodietools-ic-dropzone.is-dragging {
    border-color: #2867b2;
    background: #edf5ff;
}
.goodietools-image-compressor .goodietools-ic-dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.goodietools-image-compressor .goodietools-ic-drop-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #e2edfc; color: #2465ad; font-size: 28px; line-height: 1; }
.goodietools-image-compressor .goodietools-ic-dropzone small { color: #687b91; }
.goodietools-image-compressor .goodietools-ic-settings { margin: 22px 0; padding: 20px; border: 1px solid #e1e7ef; border-radius: 12px; background: #fbfcfe; }
.goodietools-image-compressor .goodietools-ic-settings-heading h3,
.goodietools-image-compressor .goodietools-ic-list-head h3 { margin: 0 0 14px; }
.goodietools-image-compressor .goodietools-field small { display: block; margin-top: 5px; color: #718096; font-size: 12px; }
.goodietools-image-compressor input[type="range"] { width: 100%; accent-color: #2867b2; }
.goodietools-image-compressor .goodietools-ic-check { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.goodietools-image-compressor .goodietools-ic-check input { width: auto; }
.goodietools-image-compressor .goodietools-ic-hint,
.goodietools-image-compressor .goodietools-ic-privacy { margin: 12px 0 0; color: #718096; font-size: 13px; }
.goodietools-image-compressor .goodietools-ic-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; }
.goodietools-image-compressor .goodietools-ic-list-head h3 { margin: 0; }
.goodietools-image-compressor .goodietools-ic-clear,
.goodietools-image-compressor .goodietools-ic-secondary { background: #eef3f8; color: #24415f; }
.goodietools-image-compressor .goodietools-ic-file-list { display: grid; gap: 10px; margin: 14px 0; }
.goodietools-image-compressor .goodietools-ic-empty { padding: 22px; border: 1px solid #e6ebf1; border-radius: 10px; color: #718096; text-align: center; }
.goodietools-image-compressor .goodietools-ic-file { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px; border: 1px solid #e3e9f0; border-radius: 10px; background: #fff; }
.goodietools-image-compressor .goodietools-ic-thumb { flex: 0 0 58px; width: 58px; height: 58px; overflow: hidden; border-radius: 7px; background: #f0f3f7; }
.goodietools-image-compressor .goodietools-ic-thumb img { width: 100%; height: 100%; object-fit: cover; }
.goodietools-image-compressor .goodietools-ic-file-info { display: flex; flex: 1 1 180px; min-width: 0; flex-direction: column; gap: 4px; }
.goodietools-image-compressor .goodietools-ic-file-info strong { overflow-wrap: anywhere; font-size: 14px; }
.goodietools-image-compressor .goodietools-ic-file-info span,
.goodietools-image-compressor .goodietools-ic-result-meta { color: #718096; font-size: 12px; }
.goodietools-image-compressor .goodietools-ic-remove { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #f2f4f7; color: #596b7d; font-size: 21px; cursor: pointer; }
.goodietools-image-compressor .goodietools-ic-download { padding: 7px 10px; border-radius: 6px; background: #eaf2fc; color: #1e5c9e; font-size: 12px; font-weight: 600; text-decoration: none; }
.goodietools-image-compressor .goodietools-ic-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.goodietools-image-compressor .goodietools-ic-actions button:disabled { opacity: .45; cursor: not-allowed; }
.goodietools-image-compressor .goodietools-ic-status { min-height: 22px; margin-top: 12px; font-size: 14px; }
.goodietools-image-compressor .goodietools-ic-status[data-state="success"] { color: #21834a; }
.goodietools-image-compressor .goodietools-ic-status[data-state="error"] { color: #b42318; }
.goodietools-image-compressor .goodietools-ic-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px 12px; margin-top: 14px; padding: 16px; border-radius: 10px; background: #f1f6fc; text-align: center; }
.goodietools-image-compressor .goodietools-ic-summary strong { color: #204f80; font-size: 19px; }
.goodietools-image-compressor .goodietools-ic-summary span { color: #718096; font-size: 12px; }
.goodietools-image-compressor [hidden] { display: none !important; }
@media (max-width: 600px) {
    .goodietools-image-compressor .goodietools-ic-settings { padding: 14px; }
    .goodietools-image-compressor .goodietools-ic-summary { grid-template-columns: 1fr; gap: 2px; }
    .goodietools-image-compressor .goodietools-ic-summary span { margin-bottom: 8px; }
}