/* =========================================================================
   Favicon Generator — large, high-contrast theme (all text ≥ 8:1 on white)
   Palette (contrast vs #ffffff):
     ink      #111111  ~18.9:1   body text
     ink-2    #333333  ~12.6:1   secondary text / hints
     navy     #10233f  ~15.6:1   header, primary buttons, accents (white on navy)
     green    #0f5132  ~13:1     success button (white on green)
     red      #8a0012  ~10:1     required / errors
     blue-fx  #0b3d91            focus ring
   ========================================================================= */
:root {
    --ink: #111111;
    --ink-2: #333333;
    --navy: #10233f;
    --navy-700: #0b1930;
    --green: #0f5132;
    --red: #8a0012;
    --focus: #0b3d91;
    --line: #b9c0cc;      /* strong-ish neutral border */
    --line-strong: #1a1a1a;
    --bg: #eef1f6;
    --card: #ffffff;
}

/* ---------- Base: larger & readable ---------- */
html { font-size: 18px; }
body {
    background: var(--bg);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* neutralize low-contrast Bootstrap greys */
.text-muted, .text-secondary { color: var(--ink-2) !important; }
.form-text { color: var(--ink-2); font-size: .95rem; }
.code-hint { color: var(--ink-2); font-weight: 600; font-size: .9rem; }
.code-hint code, code { color: #14213d; }

::placeholder { color: #4d4d4d !important; opacity: 1; font-style: italic; }

/* ---------- Header ---------- */
.app-header {
    background: var(--navy);
    color: #ffffff;
    border-bottom: 4px solid var(--navy-700);
}
.header-logo { font-size: 2.5rem; color: #ffffff; }
.app-title { font-size: 1.9rem; font-weight: 800; letter-spacing: -.01em; }
.app-title-sub { font-weight: 600; color: #dfe6f2; }
.app-subtitle { font-size: 1.02rem; color: #eef2f9; margin-top: .15rem; }

/* language switch */
.lang-switch { display: flex; align-items: center; gap: .35rem; color: #ffffff; font-size: 1.1rem; }
.lang-btn {
    display: inline-block;
    min-width: 2.6rem;
    text-align: center;
    padding: .35rem .7rem;
    border: 2px solid #ffffff;
    border-radius: .5rem;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    transition: background .12s, color .12s;
}
.lang-btn:hover { background: rgba(255,255,255,.16); color: #ffffff; }
.lang-btn.active { background: #ffffff; color: var(--navy); }
.lang-btn:focus-visible { outline: 3px solid #9ec1ff; outline-offset: 2px; }

/* ---------- Cards ---------- */
.card {
    background: var(--card);
    border: 2px solid var(--line);
    border-radius: .75rem;
}
.card-header {
    background: #ffffff;
    border-bottom: 2px solid var(--line);
    font-weight: 700;
    font-size: 1.12rem;
    color: var(--ink);
    padding: .85rem 1.1rem;
}
.card-body { padding: 1.1rem; }

.section-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--navy);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    margin-right: .6rem;
    flex: 0 0 auto;
}

/* ---------- Form controls: larger, strong borders ---------- */
.form-label { font-weight: 700; font-size: 1.02rem; color: var(--ink); margin-bottom: .35rem; }
.form-control, .form-select {
    font-size: 1.05rem;
    padding: .6rem .8rem;
    color: var(--ink);
    border: 2px solid var(--line-strong);
    border-radius: .5rem;
    background-color: #fff;
}
.form-control:focus, .form-select:focus, .btn:focus-visible,
.form-check-input:focus {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-color: var(--line-strong);
    box-shadow: none;
}
.form-control-color { width: 3.4rem; padding: .25rem; height: calc(1.6em + 1.2rem + 4px); flex: 0 0 auto; }

/* checkboxes / switches bigger */
.form-check-input { width: 1.3rem; height: 1.3rem; border: 2px solid var(--line-strong); margin-top: .2rem; }
.form-check-input:checked { background-color: var(--navy); border-color: var(--navy); }
.form-check-label { font-size: 1.02rem; color: var(--ink); }
.form-switch .form-check-input { width: 2.6rem; height: 1.35rem; }

/* ---------- Buttons (all ≥8:1) ---------- */
.btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700; }
.btn-primary:hover, .btn-primary:focus { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.btn-primary:disabled { background: #5b6675; border-color: #5b6675; color: #fff; opacity: 1; }
.btn-generate { font-size: 1.2rem; padding: .8rem 1rem; font-weight: 800; }

.btn-success { background: var(--green); border-color: var(--green); color: #fff; font-weight: 700; }
.btn-success:hover, .btn-success:focus { background: #0c3f27; border-color: #0c3f27; color: #fff; }

.btn-outline-primary { color: var(--navy); border: 2px solid var(--navy); font-weight: 700; background: #fff; }
.btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--navy); color: #fff; }
.btn-outline-secondary { color: var(--ink); border: 2px solid var(--line-strong); background: #fff; font-weight: 600; }
.btn-outline-secondary:hover { background: var(--ink); color: #fff; }
.btn-outline-danger { color: var(--red); border: 2px solid var(--red); background: #fff; }
.btn-outline-danger:hover { background: var(--red); color: #fff; }

.text-danger { color: var(--red) !important; }
.text-success { color: var(--green) !important; }

/* ---------- Dropzone ---------- */
#dropzone {
    border: 3px dashed var(--line-strong);
    border-radius: .75rem;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    background: #f7f9fc;
}
#dropzone:hover, #dropzone.dragover { border-color: var(--navy); background: #e7eefb; }
#dropzone .bi { font-size: 2.6rem; color: var(--navy); }
.drop-title { font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.drop-hint { font-size: .98rem; color: var(--ink-2); }

.src-preview {
    width: 84px; height: 84px; object-fit: contain;
    background:
        linear-gradient(45deg, #d7dbe2 25%, transparent 25%),
        linear-gradient(-45deg, #d7dbe2 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #d7dbe2 75%),
        linear-gradient(-45deg, transparent 75%, #d7dbe2 75%);
    background-size: 14px 14px;
    background-position: 0 0, 0 7px, 7px -7px, -7px 0;
    padding: 5px;
    border: 2px solid var(--line) !important;
}
.badge-warn {
    display: inline-block;
    background: #5c3d00; color: #fff;
    font-size: .82rem; font-weight: 700;
    padding: .1rem .45rem; border-radius: .35rem;
}

/* ---------- Browser-tab mock preview ---------- */
.fav-tabmock { background: #cbd2dd; border-radius: 10px 10px 0 0; padding: 8px 8px 0; display: inline-block; }
.fav-tab {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border-radius: 10px 10px 0 0;
    padding: 8px 16px 8px 12px; max-width: 200px;
    border: 1px solid var(--line);
}
.fav-tab img { width: 18px; height: 18px; object-fit: contain; }
.fav-tab span { font-size: .95rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Icon sets ---------- */
.iconset-grid .form-check {
    background: #f7f9fc;
    border: 2px solid var(--line);
    border-radius: .55rem;
    padding: .6rem .8rem .6rem 2.4rem;
    margin-bottom: .3rem;
}
.iconset-grid .form-check-input:checked ~ .form-check-label { color: var(--navy); font-weight: 700; }

/* ---------- Result / code ---------- */
.result-meta { font-size: 1rem; color: var(--ink-2); }
.result-meta code, .result-meta strong { color: var(--ink); }

.code-box {
    background: #0b0f14;
    color: #eef3f8;
    border: 2px solid #0b0f14;
    border-radius: .5rem;
    padding: 1rem;
    font-size: .92rem;
    line-height: 1.6;
    max-height: 360px;
    overflow: auto;
    white-space: pre;
    tab-size: 2;
    margin: 0;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
#schemaPreview { max-height: 280px; font-size: .86rem; }
.code-box::-webkit-scrollbar { height: 10px; width: 10px; }
.code-box::-webkit-scrollbar-thumb { background: #3a4658; border-radius: 5px; }

.nav-tabs { border-bottom: 2px solid var(--line); }
.nav-tabs .nav-link {
    font-size: .98rem; font-weight: 600; padding: .5rem .9rem;
    color: var(--ink-2); border: 2px solid transparent;
}
.nav-tabs .nav-link:hover { color: var(--navy); border-color: transparent; }
.nav-tabs .nav-link.active {
    color: var(--navy); font-weight: 800;
    border-color: var(--line) var(--line) #fff;
    background: #fff;
}

.file-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.file-badge {
    display: inline-block;
    background: #eaeef4; color: var(--ink);
    border: 2px solid var(--line);
    border-radius: .4rem;
    font-size: .88rem; font-weight: 600;
    padding: .25rem .55rem;
}

/* ---------- Help steps ---------- */
.help-steps { font-size: 1.02rem; }
.help-steps li { margin-bottom: .6rem; }
.help-steps code { color: #14213d; }

/* ---------- Schema note / alerts ---------- */
.alert-light {
    color: var(--ink);
    background: #eef2f8;
    border: 2px solid var(--line);
    font-size: .98rem;
}
.sf-field label { color: var(--ink); font-weight: 600; font-size: .98rem; }
.sf-grouplist .sf-grow { background: #f7f9fc; border: 2px solid var(--line) !important; }

/* ---------- Footer ---------- */
.app-footer { color: var(--ink-2); font-size: .95rem; }

/* sticky right panel on large screens */
@media (min-width: 992px) {
    .sticky-panel { position: sticky; top: 1rem; }
}