/*
 * cron-generator.css
 * Cron Job Generator - Light theme, amber/slate accent
 * Scoped under .cg-wrap - zero global side-effects
 * Prefix: cg-
 */

/* ═══════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════ */
.cg-wrap {
    /* Brand - amber */
    --cg-amber:        #d97706;
    --cg-amber-dark:   #b45309;
    --cg-amber-mid:    #f59e0b;
    --cg-amber-light:  #fef3c7;
    --cg-amber-xlight: #fffbeb;

    /* Slate (secondary) */
    --cg-slate:        #334155;
    --cg-slate-mid:    #475569;
    --cg-slate-light:  #e2e8f0;

    /* Field colours (crontab.guru-inspired) */
    --cg-col-min:      #7c3aed;   /* violet  – minute */
    --cg-col-hr:       #059669;   /* emerald – hour   */
    --cg-col-dom:      #d97706;   /* amber   – dom    */
    --cg-col-mon:      #dc2626;   /* red     – month  */
    --cg-col-dow:      #2563eb;   /* blue    – dow    */

    /* Neutrals */
    --cg-text:         #0f172a;
    --cg-text-2:       #334155;
    --cg-text-3:       #64748b;
    --cg-text-4:       #94a3b8;
    --cg-border:       #e2e8f0;
    --cg-border-focus: #f59e0b;
    --cg-bg:           #ffffff;
    --cg-bg-card:      #f8fafc;
    --cg-bg-input:     #ffffff;

    /* Status */
    --cg-green:        #16a34a;
    --cg-green-light:  #dcfce7;
    --cg-red:          #dc2626;
    --cg-red-light:    #fee2e2;

    /* Shadows */
    --cg-shadow-sm:    0 1px 3px rgba(0,0,0,.07);
    --cg-shadow-md:    0 4px 16px rgba(0,0,0,.09);
    --cg-shadow-lg:    0 8px 32px rgba(0,0,0,.12);
    --cg-shadow-amber: 0 4px 18px rgba(217,119,6,.22);

    /* Shape */
    --cg-radius:       14px;
    --cg-radius-sm:    8px;
    --cg-radius-xs:    5px;
    --cg-radius-lg:    20px;

    /* Motion */
    --cg-ease:         .16s ease;
    --cg-mono:         'JetBrains Mono', 'DM Mono', 'Fira Code', 'Courier New', monospace;
}

/* ═══════════════════════════════════════════════
   RESET / BASE
═══════════════════════════════════════════════ */
.cg-wrap *, .cg-wrap *::before, .cg-wrap *::after {
    box-sizing: border-box; margin: 0; padding: 0;
}
.cg-wrap {
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    color: var(--cg-text);
    background: transparent;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 0 60px;
    -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════ */
.cg-hero {
    text-align: center;
    padding: 42px 20px 32px;
}
.cg-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--cg-amber-light);
    color: var(--cg-amber-dark);
    border-radius: 999px;
    padding: 5px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.cg-badge svg { width: 13px; height: 13px; flex-shrink: 0; }
.cg-hero h1 {
    font-size: clamp(26px, 5vw, 40px);
    font-weight: 800;
    color: var(--cg-text);
    line-height: 1.13;
    letter-spacing: -.6px;
    margin-bottom: 14px;
}
.cg-hero h1 span { color: var(--cg-amber); }
.cg-hero p {
    font-size: 15.5px;
    color: var(--cg-text-3);
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.68;
}

/* ═══════════════════════════════════════════════
   APP WRAPPER
═══════════════════════════════════════════════ */
.cg-app { padding: 0 16px; }

/* ═══════════════════════════════════════════════
   LIVE EXPRESSION BAR  (sticky top)
═══════════════════════════════════════════════ */
.cg-expr-bar {
    background: var(--cg-bg);
    border: 2px solid var(--cg-border);
    border-radius: var(--cg-radius);
    padding: 18px 22px;
    margin-bottom: 20px;
    box-shadow: var(--cg-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* colour-coded chips */
.cg-expr-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.cg-expr-chip {
    font-family: var(--cg-mono);
    font-size: 22px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 8px;
    letter-spacing: .5px;
    transition: all var(--cg-ease);
    cursor: default;
    position: relative;
}
.cg-expr-chip::after {
    content: attr(data-label);
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    opacity: .65;
    white-space: nowrap;
    font-family: 'DM Sans', sans-serif;
}
.cg-expr-chip.c-min { background: rgba(124,58,237,.12); color: var(--cg-col-min); }
.cg-expr-chip.c-hr  { background: rgba(5,150,105,.12);  color: var(--cg-col-hr);  }
.cg-expr-chip.c-dom { background: rgba(217,119,6,.12);  color: var(--cg-col-dom); }
.cg-expr-chip.c-mon { background: rgba(220,38,38,.12);  color: var(--cg-col-mon); }
.cg-expr-chip.c-dow { background: rgba(37,99,235,.12);  color: var(--cg-col-dow); }

.cg-expr-bottom {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 18px;
    border-top: 1.5px solid var(--cg-border);
    margin-top: 6px;
}

.cg-explanation {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--cg-text-2);
    line-height: 1.5;
    min-width: 200px;
}
.cg-explanation strong { color: var(--cg-amber-dark); }

.cg-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    background: var(--cg-amber);
    color: #fff;
    border: none;
    border-radius: var(--cg-radius-sm);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--cg-ease);
    box-shadow: var(--cg-shadow-amber);
    white-space: nowrap;
    flex-shrink: 0;
}
.cg-copy-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.cg-copy-btn:hover {
    background: var(--cg-amber-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(217,119,6,.32);
}
.cg-copy-btn:active { transform: translateY(0); }
.cg-copy-btn.copied {
    background: var(--cg-green);
    box-shadow: 0 4px 14px rgba(22,163,74,.28);
}

/* ═══════════════════════════════════════════════
   PRESETS ROW
═══════════════════════════════════════════════ */
.cg-presets-section {
    margin-bottom: 20px;
}
.cg-presets-label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--cg-text-3);
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.cg-presets-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.cg-preset-btn {
    padding: 7px 14px;
    border: 1.5px solid var(--cg-border);
    border-radius: 999px;
    background: var(--cg-bg);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cg-text-2);
    cursor: pointer;
    font-family: inherit;
    transition: all var(--cg-ease);
    white-space: nowrap;
}
.cg-preset-btn:hover {
    border-color: var(--cg-amber-mid);
    background: var(--cg-amber-light);
    color: var(--cg-amber-dark);
}
.cg-preset-btn.is-active {
    border-color: var(--cg-amber);
    background: var(--cg-amber-light);
    color: var(--cg-amber-dark);
    box-shadow: 0 0 0 3px rgba(245,158,11,.15);
}

/* ═══════════════════════════════════════════════
   MAIN GRID  (builder left, runs right)
═══════════════════════════════════════════════ */
.cg-main {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 18px;
    align-items: start;
}
@media (max-width: 900px) {
    .cg-main { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════
   CARD
═══════════════════════════════════════════════ */
.cg-card {
    background: var(--cg-bg);
    border: 1.5px solid var(--cg-border);
    border-radius: var(--cg-radius);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--cg-shadow-sm);
}
.cg-card:last-child { margin-bottom: 0; }
.cg-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 13px;
    border-bottom: 1.5px solid var(--cg-border);
}
.cg-card-icon { width: 17px; height: 17px; color: var(--cg-amber); flex-shrink: 0; }
.cg-card-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--cg-text-2);
    letter-spacing: .4px;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════
   FIELD CARDS - the 5 builder panels
═══════════════════════════════════════════════ */
.cg-fields-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
@media (max-width: 860px) {
    .cg-fields-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
    .cg-fields-grid { grid-template-columns: repeat(2, 1fr); }
}

.cg-field-card {
    background: var(--cg-bg);
    border: 2px solid var(--cg-border);
    border-radius: var(--cg-radius);
    padding: 14px;
    transition: border-color var(--cg-ease), box-shadow var(--cg-ease);
    position: relative;
}
.cg-field-card.is-active-min { border-color: var(--cg-col-min); box-shadow: 0 0 0 3px rgba(124,58,237,.10); }
.cg-field-card.is-active-hr  { border-color: var(--cg-col-hr);  box-shadow: 0 0 0 3px rgba(5,150,105,.10);  }
.cg-field-card.is-active-dom { border-color: var(--cg-col-dom); box-shadow: 0 0 0 3px rgba(217,119,6,.10);  }
.cg-field-card.is-active-mon { border-color: var(--cg-col-mon); box-shadow: 0 0 0 3px rgba(220,38,38,.10);  }
.cg-field-card.is-active-dow { border-color: var(--cg-col-dow); box-shadow: 0 0 0 3px rgba(37,99,235,.10);  }

/* field title row */
.cg-field-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.cg-field-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.cg-field-value-badge {
    font-family: var(--cg-mono);
    font-size: 13px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 5px;
}
/* badge colours match field colours */
.cg-field-card[data-f="minute"] .cg-field-title { color: var(--cg-col-min); }
.cg-field-card[data-f="hour"]   .cg-field-title { color: var(--cg-col-hr);  }
.cg-field-card[data-f="dom"]    .cg-field-title { color: var(--cg-col-dom); }
.cg-field-card[data-f="month"]  .cg-field-title { color: var(--cg-col-mon); }
.cg-field-card[data-f="dow"]    .cg-field-title { color: var(--cg-col-dow); }

.cg-field-card[data-f="minute"] .cg-field-value-badge { background: rgba(124,58,237,.12); color: var(--cg-col-min); }
.cg-field-card[data-f="hour"]   .cg-field-value-badge { background: rgba(5,150,105,.12);  color: var(--cg-col-hr);  }
.cg-field-card[data-f="dom"]    .cg-field-value-badge { background: rgba(217,119,6,.12);  color: var(--cg-col-dom); }
.cg-field-card[data-f="month"]  .cg-field-value-badge { background: rgba(220,38,38,.12);  color: var(--cg-col-mon); }
.cg-field-card[data-f="dow"]    .cg-field-value-badge { background: rgba(37,99,235,.12);  color: var(--cg-col-dow); }

/* mode tabs */
.cg-mode-tabs {
    display: flex;
    gap: 3px;
    background: var(--cg-bg-card);
    border-radius: 7px;
    padding: 3px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.cg-mode-tab {
    flex: 1;
    min-width: 0;
    padding: 4px 3px;
    border: none;
    background: transparent;
    font-size: 10px;
    font-weight: 700;
    color: var(--cg-text-3);
    cursor: pointer;
    border-radius: 5px;
    transition: all var(--cg-ease);
    font-family: inherit;
    text-align: center;
    white-space: nowrap;
}
.cg-mode-tab:hover { background: var(--cg-bg); color: var(--cg-text-2); }
.cg-mode-tab.is-active {
    background: var(--cg-bg);
    color: var(--cg-amber-dark);
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* field inputs */
.cg-field-input-wrap { display: flex; flex-direction: column; gap: 6px; }

.cg-field-input {
    width: 100%;
    padding: 7px 9px;
    border: 1.5px solid var(--cg-border);
    border-radius: 6px;
    background: var(--cg-bg-input);
    font-size: 13px;
    font-weight: 600;
    color: var(--cg-text);
    font-family: var(--cg-mono);
    outline: none;
    transition: border-color var(--cg-ease), box-shadow var(--cg-ease);
    -webkit-appearance: none;
    appearance: none;
}
.cg-field-input:focus {
    border-color: var(--cg-border-focus);
    box-shadow: 0 0 0 3px rgba(245,158,11,.15);
}
.cg-field-input.is-error {
    border-color: var(--cg-red);
    box-shadow: 0 0 0 3px rgba(220,38,38,.10);
}

.cg-field-select {
    width: 100%;
    padding: 7px 28px 7px 9px;
    border: 1.5px solid var(--cg-border);
    border-radius: 6px;
    background: var(--cg-bg-input);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cg-text);
    font-family: var(--cg-mono);
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color var(--cg-ease);
}
.cg-field-select:focus { border-color: var(--cg-border-focus); }

.cg-field-label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--cg-text-3);
    letter-spacing: .3px;
    text-transform: uppercase;
}

.cg-range-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 5px;
}
.cg-range-sep {
    font-size: 11px;
    color: var(--cg-text-4);
    font-weight: 600;
    text-align: center;
}

.cg-field-err {
    font-size: 10.5px;
    color: var(--cg-red);
    font-weight: 600;
    min-height: 14px;
    display: flex;
    align-items: center;
    gap: 3px;
}

/* tip tooltip */
.cg-tip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--cg-border);
    background: var(--cg-bg-card);
    font-size: 10px;
    font-weight: 700;
    color: var(--cg-text-3);
    cursor: help;
    position: relative;
    flex-shrink: 0;
    font-family: inherit;
    transition: all var(--cg-ease);
}
.cg-tip-btn:hover {
    border-color: var(--cg-amber-mid);
    color: var(--cg-amber);
    background: var(--cg-amber-xlight);
}
.cg-tip-popup {
    display: none;
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #e2e8f0;
    font-size: 11.5px;
    line-height: 1.55;
    font-weight: 400;
    padding: 9px 12px;
    border-radius: 8px;
    width: 220px;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    z-index: 50;
    pointer-events: none;
    white-space: normal;
    font-family: 'DM Sans', sans-serif;
}
.cg-tip-btn:hover .cg-tip-popup,
.cg-tip-btn:focus .cg-tip-popup { display: block; }
.cg-tip-popup::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1e293b;
}

/* ═══════════════════════════════════════════════
   PARSE BAR
═══════════════════════════════════════════════ */
.cg-parse-bar {
    background: var(--cg-bg);
    border: 1.5px solid var(--cg-border);
    border-radius: var(--cg-radius);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    box-shadow: var(--cg-shadow-sm);
}
.cg-parse-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--cg-text-3);
    white-space: nowrap;
    letter-spacing: .2px;
}
.cg-parse-input {
    flex: 1;
    min-width: 180px;
    padding: 8px 12px;
    border: 1.5px solid var(--cg-border);
    border-radius: var(--cg-radius-sm);
    font-size: 14px;
    font-family: var(--cg-mono);
    font-weight: 600;
    color: var(--cg-text);
    background: var(--cg-bg-input);
    outline: none;
    transition: border-color var(--cg-ease), box-shadow var(--cg-ease);
}
.cg-parse-input:focus {
    border-color: var(--cg-border-focus);
    box-shadow: 0 0 0 3px rgba(245,158,11,.12);
}
.cg-parse-input::placeholder { color: var(--cg-text-4); font-weight: 400; }

.cg-parse-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1.5px solid var(--cg-border);
    border-radius: var(--cg-radius-sm);
    background: var(--cg-bg-card);
    color: var(--cg-text-2);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--cg-ease);
    white-space: nowrap;
}
.cg-parse-btn svg { width: 14px; height: 14px; }
.cg-parse-btn:hover {
    border-color: var(--cg-amber-mid);
    background: var(--cg-amber-light);
    color: var(--cg-amber-dark);
}
.cg-parse-err {
    font-size: 12px;
    color: var(--cg-red);
    font-weight: 600;
    display: none;
    width: 100%;
    margin-top: 2px;
}
.cg-parse-err.is-visible { display: block; }

/* ═══════════════════════════════════════════════
   RIGHT PANEL
═══════════════════════════════════════════════ */
.cg-right { display: flex; flex-direction: column; gap: 16px; }

/* next runs */
.cg-next-runs { display: flex; flex-direction: column; gap: 6px; }
.cg-run-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    background: var(--cg-bg-card);
    border: 1.5px solid var(--cg-border);
    border-radius: var(--cg-radius-sm);
    transition: all var(--cg-ease);
}
.cg-run-item:first-child {
    background: var(--cg-amber-light);
    border-color: rgba(245,158,11,.4);
}
.cg-run-idx {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--cg-amber);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cg-run-item:not(:first-child) .cg-run-idx {
    background: var(--cg-border);
    color: var(--cg-text-3);
}
.cg-run-dt {
    flex: 1;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--cg-text);
    font-family: var(--cg-mono);
}
.cg-run-rel {
    font-size: 11px;
    color: var(--cg-text-3);
    font-weight: 500;
    white-space: nowrap;
}

/* examples table */
.cg-examples-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    border-radius: var(--cg-radius);
    overflow: hidden;
    box-shadow: var(--cg-shadow-sm);
}
.cg-examples-table th {
    background: var(--cg-amber-light);
    color: var(--cg-amber-dark);
    padding: 9px 13px;
    text-align: left;
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.cg-examples-table td {
    padding: 9px 13px;
    border-bottom: 1px solid var(--cg-border);
    background: var(--cg-bg);
    color: var(--cg-text-2);
    vertical-align: middle;
}
.cg-examples-table tr:last-child td { border-bottom: none; }
.cg-examples-table tr:hover td { background: var(--cg-bg-card); }
.cg-ex-code {
    font-family: var(--cg-mono);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--cg-amber-dark);
    background: var(--cg-amber-light);
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}
.cg-ex-load {
    padding: 4px 10px;
    border: 1.5px solid var(--cg-border);
    border-radius: 5px;
    background: var(--cg-bg);
    font-size: 11px;
    font-weight: 700;
    color: var(--cg-text-3);
    cursor: pointer;
    font-family: inherit;
    transition: all var(--cg-ease);
    white-space: nowrap;
}
.cg-ex-load:hover {
    border-color: var(--cg-amber-mid);
    background: var(--cg-amber-light);
    color: var(--cg-amber-dark);
}

/* validator badge */
.cg-valid-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 999px;
    flex-shrink: 0;
}
.cg-valid-badge.ok   { background: var(--cg-green-light); color: var(--cg-green); }
.cg-valid-badge.err  { background: var(--cg-red-light);   color: var(--cg-red);   }
.cg-valid-badge svg  { width: 12px; height: 12px; }

/* ═══════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════ */
.cg-toast {
    position: fixed;
    bottom: 26px; left: 50%;
    transform: translateX(-50%) translateY(70px);
    background: #1e293b;
    color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: 0 8px 28px rgba(0,0,0,.22);
    z-index: 9999;
    pointer-events: none;
    display: flex; align-items: center; gap: 8px;
    transition: transform .28s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
    opacity: 0;
    white-space: nowrap;
}
.cg-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.cg-toast.success { background: #14532d; }
.cg-toast svg { width: 15px; height: 15px; }

/* ═══════════════════════════════════════════════
   SEO
═══════════════════════════════════════════════ */
.cg-seo {
    padding: 44px 16px 8px;
    max-width: 880px;
    margin: 0 auto;
}
.cg-seo-why {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 36px;
}
.cg-seo-card {
    background: var(--cg-bg);
    border: 1.5px solid var(--cg-border);
    border-radius: var(--cg-radius);
    padding: 18px;
    box-shadow: var(--cg-shadow-sm);
}
.cg-seo-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--cg-amber-light);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px;
}
.cg-seo-icon svg { width: 18px; height: 18px; color: var(--cg-amber); }
.cg-seo-card h3 { font-size: 14px; font-weight: 700; color: var(--cg-text); margin-bottom: 5px; }
.cg-seo-card p  { font-size: 13px; color: var(--cg-text-3); line-height: 1.6; }
.cg-seo h2 { font-size: 21px; font-weight: 800; color: var(--cg-text); margin-bottom: 12px; letter-spacing: -.2px; }
.cg-seo > p, .cg-seo-body { font-size: 14px; color: var(--cg-text-3); line-height: 1.75; margin-bottom: 28px; }
.cg-seo code {
    font-family: var(--cg-mono);
    font-size: 12.5px;
    font-weight: 600;
    background: var(--cg-amber-light);
    color: var(--cg-amber-dark);
    padding: 1px 6px;
    border-radius: 4px;
}

/* FAQ */
.cg-faq { margin-bottom: 44px; }
.cg-faq-item { border-bottom: 1.5px solid var(--cg-border); }
.cg-faq-item:last-child { border-bottom: none; }
.cg-faq-q {
    width: 100%; text-align: left; background: none; border: none;
    padding: 16px 0; font-size: 14.5px; font-weight: 700; color: var(--cg-text);
    cursor: pointer; display: flex; align-items: center; justify-content: space-between;
    gap: 12px; font-family: inherit; transition: color var(--cg-ease);
}
.cg-faq-q:hover { color: var(--cg-amber); }
.cg-faq-chevron { width: 18px; height: 18px; flex-shrink: 0; color: var(--cg-text-3); transition: transform .2s ease; }
.cg-faq-item.is-open .cg-faq-chevron { transform: rotate(180deg); color: var(--cg-amber); }
.cg-faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.cg-faq-item.is-open .cg-faq-a { max-height: 320px; }
.cg-faq-a-inner { padding-bottom: 16px; font-size: 14px; color: var(--cg-text-3); line-height: 1.72; }

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 640px) {
    .cg-hero { padding: 28px 14px 22px; }
    .cg-app  { padding: 0 12px; }
    .cg-expr-chip { font-size: 17px; padding: 3px 9px; }
    .cg-card { padding: 14px; }
    .cg-presets-grid { gap: 5px; }
    .cg-preset-btn { font-size: 11.5px; padding: 6px 11px; }
    .cg-parse-label { display: none; }
    .cg-seo { padding: 28px 12px 8px; }
    .cg-examples-table td, .cg-examples-table th { padding: 7px 9px; }
}