/* Linear + Bento：精细界面骨架结合模块化规则卡片。 */
:root {
    --bg: #f2f4f8;
    --bg-deep: #e9edf3;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --surface-3: #edf1f6;
    --line: #d9e0e9;
    --line-soft: rgba(24, 34, 49, .1);
    --text: #121926;
    --text-soft: #425066;
    --muted: #66758a;
    --mint: #2563eb;
    --lime: #0b8f71;
    --blue: #7657d8;
    --amber: #956000;
    --danger: #c43f4e;
    --accent-ink: #ffffff;
    --header-bg: transparent;
    --nav-bg: rgba(239,243,248,.9);
    --hover-bg: rgba(26,39,57,.05);
    --panel-gradient: linear-gradient(145deg, rgba(255,255,255,.99), rgba(247,249,252,.99));
    --card-gradient: linear-gradient(145deg, rgba(255,255,255,.99), rgba(248,250,252,.99));
    --featured-gradient: linear-gradient(145deg, rgba(247,250,255,.99), rgba(247,253,251,.99));
    --control-bg: rgba(255,255,255,.94);
    --subpanel-bg: rgba(241,245,249,.88);
    --grid-line: rgba(40,55,75,.04);
    --radius-lg: 24px;
    --radius-md: 17px;
    --shadow: 0 24px 70px rgba(31,45,65,.1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0a0d13;
        --bg-deep: #07090e;
        --surface: #111620;
        --surface-2: #171d28;
        --surface-3: #1d2633;
        --line: #293444;
        --line-soft: rgba(220,230,242,.12);
        --text: #f2f5f9;
        --text-soft: #b5c0ce;
        --muted: #8492a5;
        --mint: #72a1ff;
        --lime: #5ee0bd;
        --blue: #a58bff;
        --amber: #f4c46e;
        --danger: #ff8997;
        --accent-ink: #08101d;
        --header-bg: transparent;
        --nav-bg: rgba(22,29,40,.92);
        --hover-bg: rgba(255,255,255,.055);
        --panel-gradient: linear-gradient(145deg, rgba(20,26,37,.99), rgba(13,17,25,.99));
        --card-gradient: linear-gradient(145deg, rgba(19,25,35,.99), rgba(12,16,23,.99));
        --featured-gradient: linear-gradient(145deg, rgba(18,29,47,.99), rgba(14,28,29,.99));
        --control-bg: rgba(15,20,29,.94);
        --subpanel-bg: rgba(5,8,13,.42);
        --grid-line: rgba(230,238,248,.035);
        --shadow: 0 26px 75px rgba(0,0,0,.3);
    }
}

.public-template-bento .site-grid { background: radial-gradient(circle at 10% 7%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 28rem), radial-gradient(circle at 92% 24%, color-mix(in srgb, var(--lime) 8%, transparent), transparent 26rem), var(--bg); }
.public-template-bento .site-header { top: 10px; width: min(1200px, calc(100% - 28px)); min-height: 64px; margin: 0 auto; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: 0 14px 38px rgba(26,39,57,.08); }
.public-template-bento .site-header-inner { width: calc(100% - 22px); min-height: 62px; }
.public-template-bento .brand img { width: 38px; height: 38px; }
.public-template-bento .site-nav { border: 0; border-radius: 12px; }
.public-template-bento .site-nav a { min-height: 35px; border-radius: 8px; }
.public-template-bento .site-nav .admin-entry { background: linear-gradient(110deg, var(--mint), var(--blue)); }

.public-template-bento main,
.public-template-bento .site-footer { width: min(1200px, calc(100% - 40px)); }
.public-template-bento .hero-shell { grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); gap: 16px; min-height: 440px; padding: 78px 0 58px; }
.public-template-bento .hero-copy,
.public-template-bento .signal-panel { min-height: 320px; border: 1px solid var(--line); border-radius: 24px; background: var(--panel-gradient); box-shadow: var(--shadow); }
.public-template-bento .hero-copy { display: flex; padding: clamp(30px, 5vw, 58px); justify-content: center; flex-direction: column; }
.public-template-bento .hero-copy h1 { font-size: clamp(2.5rem, 4.5vw, 4.1rem); }
.public-template-bento .hero-copy h1 em { background-image: linear-gradient(100deg, var(--mint), var(--blue), var(--lime)); }
.public-template-bento .hero-description { margin-top: 20px; }
.public-template-bento .signal-panel { padding: 24px; }
.public-template-bento .signal-wave { height: 88px; }
.public-template-bento .signal-stats { gap: 8px; }
.public-template-bento .signal-stats div { border: 1px solid var(--line-soft); border-radius: 13px; background: var(--surface-2); }
.public-template-bento .announcement { border-radius: 16px; background: var(--surface); }

.public-template-bento .rule-workspace { padding-top: 92px; }
.public-template-bento .section-title-row { align-items: end; }
.public-template-bento .search-panel { border-radius: 16px; }
.public-template-bento .search-panel button { border-radius: 11px; background: linear-gradient(110deg, var(--mint), var(--blue)); }
.public-template-bento .filter-chip { border-radius: 10px; }
.public-template-bento .filter-chip.active { border-color: color-mix(in srgb, var(--mint) 35%, var(--line)); color: var(--mint); background: color-mix(in srgb, var(--mint) 8%, var(--surface)); }

.public-template-bento .rule-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.public-template-bento .rule-card { grid-column: span 6; padding: 18px; border-radius: 21px; box-shadow: 0 16px 44px rgba(31,45,65,.065); }
.public-template-bento .rule-card:nth-child(3n + 1):not(.featured) { grid-column: span 7; }
.public-template-bento .rule-card:nth-child(3n + 2):not(.featured) { grid-column: span 5; }
.public-template-bento .rule-card.featured { grid-column: span 12; }
.public-template-bento .rule-card.featured::before { background: linear-gradient(90deg, transparent, var(--mint), var(--blue), var(--lime), transparent); }
.public-template-bento .rule-heading { padding: 13px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--surface-2); }
.public-template-bento .rule-monogram { border-radius: 11px; color: var(--accent-ink); background: linear-gradient(145deg, var(--mint), var(--blue)); }
.public-template-bento .rule-description { min-height: auto; margin: 12px 0; padding: 13px; border: 1px solid var(--line-soft); border-radius: 14px; background: color-mix(in srgb, var(--surface-2) 72%, transparent); }
.public-template-bento .rule-details { gap: 7px; border: 0; background: transparent; }
.public-template-bento .rule-details div { padding: 11px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--surface-2); }
.public-template-bento .rule-target-list { padding: 12px; border: 1px solid var(--line-soft); border-radius: 15px; background: color-mix(in srgb, var(--surface-2) 74%, transparent); }
.public-template-bento .rule-target { border-radius: 12px; background: var(--surface); }
.public-template-bento .copy-box input { border-radius: 10px; }
.public-template-bento .copy-box button { border-radius: 9px; color: var(--mint); }
.public-template-bento .copy-box button:hover,
.public-template-bento .copy-box button.copied { color: var(--accent-ink); background: var(--mint); }
.public-template-bento .card-footer { padding: 0 3px; }
.public-template-bento .how-it-works { gap: 16px; }
.public-template-bento .how-it-works > div,
.public-template-bento .how-it-works ol { padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.public-template-bento .how-it-works li { border-radius: 12px; background: var(--surface-2); }
.public-template-bento .how-it-works li > span { color: var(--mint); }

@media (max-width: 1050px) {
    .public-template-bento .rule-card,
    .public-template-bento .rule-card:nth-child(3n + 1):not(.featured),
    .public-template-bento .rule-card:nth-child(3n + 2):not(.featured) { grid-column: span 6; }
    .public-template-bento .rule-card.featured { grid-column: span 12; }
}
@media (max-width: 920px) {
    .public-template-bento .hero-shell { grid-template-columns: 1fr; }
    .public-template-bento .hero-copy,
    .public-template-bento .signal-panel { min-height: 0; }
    .public-template-bento .signal-panel { max-width: none; }
    .public-template-bento .rule-card,
    .public-template-bento .rule-card:nth-child(3n + 1):not(.featured),
    .public-template-bento .rule-card:nth-child(3n + 2):not(.featured),
    .public-template-bento .rule-card.featured { grid-column: span 12; }
}
@media (max-width: 680px) {
    .public-template-bento .site-header { top: 7px; width: calc(100% - 14px); border-radius: 15px; }
    .public-template-bento .site-header-inner { width: calc(100% - 18px); }
    .public-template-bento main,
    .public-template-bento .site-footer { width: min(100% - 24px, 560px); }
    .public-template-bento .hero-shell { padding: 52px 0 46px; }
    .public-template-bento .hero-copy { padding: 27px 22px; border-radius: 20px; }
    .public-template-bento .hero-copy h1 { font-size: clamp(2.25rem, 11vw, 3.2rem); }
    .public-template-bento .rule-workspace { padding-top: 72px; }
    .public-template-bento .rule-card { padding: 14px; border-radius: 18px; }
    .public-template-bento .how-it-works > div,
    .public-template-bento .how-it-works ol { padding: 19px; }
}