/* ======================================================================
 * 57 · 意大利语入门速查 —— 「托斯卡纳 · 三色旗」
 * 视觉：奶白暖阳底 + 意大利红绿点缀；三色旗条、短语卡片带发音钮；
 *       与本批其余 10 页不共用配色与构图。
 * ====================================================================== */

.nx.it {
    --bg: #faf6ee;
    --bg2: #f1ebdd;
    --card: #ffffff;
    --card2: #f8f4ea;
    --card3: #f0e9d9;
    --ink: #2a241c;
    --ink2: #4e463a;
    --muted: #857a67;
    --line: #ded4bf;
    --line2: #eae2cf;
    --accent: #b02a30;          /* 意大利红 */
    --accent-ink: #fff8f5;
    --accent-soft: #f8ddd8;
    --accent2: #1e7a46;         /* 意大利绿 */
    --accent2-soft: #ddefdf;
    --ok: #2c7a4b;
    --ok-bg: #e1f2e7;
    --warn: #8f6400;
    --warn-bg: #f8efd4;
    --bad: #a83a32;
    --bad-bg: #f9e5e1;
    --info: #1a6e84;
    --info-bg: #e0f0f4;
    --radius: 14px;
    --radius-sm: 10px;
    --font-head: Georgia, "Songti SC", "PingFang SC", "Microsoft YaHei", serif;
    --head-weight: 700;
    --tracking: .004em;

    background:
        radial-gradient(circle at 92% 4%, rgba(30, 122, 70, .07), transparent 36%),
        radial-gradient(circle at 4% 12%, rgba(176, 42, 48, .06), transparent 32%),
        var(--bg);
}
:root[data-theme="dark"] .nx.it {
    --bg: #15120d;
    --bg2: #1c1811;
    --card: #221d13;
    --card2: #292317;
    --card3: #332c1d;
    --ink: #f3ecdc;
    --ink2: #ccc3ab;
    --muted: #968c74;
    --line: #403620;
    --line2: #332b1b;
    --accent: #e0655f;
    --accent-ink: #200a08;
    --accent-soft: #3d1c17;
    --accent2: #5fbf84;
    --accent2-soft: #17351f;
    --ok: #6cbb89;
    --ok-bg: #1c3526;
    --warn: #d5af5b;
    --warn-bg: #352b13;
    --bad: #e0827a;
    --bad-bg: #3c201c;
    --info: #5fb7d0;
    --info-bg: #143038;
    background:
        radial-gradient(circle at 92% 4%, rgba(95, 191, 132, .08), transparent 36%),
        radial-gradient(circle at 4% 12%, rgba(224, 101, 95, .07), transparent 32%),
        var(--bg);
}

/* ---------- 首屏 ---------- */
.it-hero {
    margin: 22px 0 6px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 26px 30px 24px;
    position: relative;
    overflow: hidden;
}
.it-flag {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    display: flex;
}
.it-flag i { flex: 1; }
.it-flag i:nth-child(1) { background: #b02a30; }
.it-flag i:nth-child(2) { background: #f4f1e8; }
.it-flag i:nth-child(3) { background: #1e7a46; }
.it-kicker {
    font: 700 11px var(--font-mono);
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--accent2);
    margin: 8px 0 8px;
}
.it-hero h1 { font-size: clamp(30px, 3.8vw, 44px); margin-bottom: 12px; }
.it-lede { font-size: 14.8px; line-height: 1.95; color: var(--ink2); margin: 0 0 18px; max-width: 58em; }
.it-lede b { color: var(--accent); border-bottom: 2px solid var(--accent-soft); }

.it-search { position: relative; max-width: 520px; }
.it-search .nx-input { padding-right: 190px; }
.it-search-hint {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11.5px;
    color: var(--muted);
    pointer-events: none;
}

/* ---------- 短语 tabs ---------- */
.it-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.it-tabs button {
    appearance: none;
    border: 1px solid var(--line);
    background: var(--card);
    border-radius: 999px;
    padding: 9px 17px;
    font: 700 13.5px var(--font-body);
    color: var(--ink2);
    cursor: pointer;
    transition: all .15s;
}
.it-tabs button:hover { border-color: var(--accent2); color: var(--accent2); }
.it-tabs button.on {
    background: var(--accent2);
    border-color: var(--accent2);
    color: #fff;
}

.it-phrases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.it-phrase {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--card2);
    border: 1px solid var(--line2);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
}
.it-phrase-main { flex: 1; min-width: 0; }
.it-phrase-main .orig {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.5;
}
.it-phrase-main .pron {
    font: 600 12px var(--font-mono);
    color: var(--accent2);
    margin-top: 2px;
}
.it-phrase-main .cn { font-size: 13px; color: var(--ink2); margin-top: 3px; }
.it-phrase-main .tip { font-size: 11.8px; color: var(--muted); margin-top: 4px; line-height: 1.6; }
.it-say {
    appearance: none;
    flex: none;
    border: 1px solid var(--line);
    background: var(--card);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 15px;
    cursor: pointer;
    transition: all .15s;
}
.it-say:hover { border-color: var(--accent); background: var(--accent-soft); }

/* ---------- 语法区 ---------- */
.it-gram-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: var(--gap);
    align-items: start;
}
.it-gram-grid .nx-card + .nx-card { margin-top: 0; }
.it-h3 { color: var(--accent2); margin-bottom: 12px; }
.it-verb-form b { color: var(--accent); font-family: var(--font-mono); }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
    .it-gram-grid { grid-template-columns: minmax(0, 1fr); }
    .it-phrases { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .it-hero { padding: 20px 16px; }
    .it-search .nx-input { padding-right: 12px; }
    .it-search-hint { display: none; }
}