:root{
  --bg:#F4FBF4;--deep:#E4F3E6;--surface:#FFFFFF;--soft:#D8EDDC;
  --title:#14321C;--text:#2A4632;--muted:#5E7A64;--aux:#88A090;
  --green:#1F8A4C;--mint:#3CB371;--forest:#0F3D24;--gold:#C9A227;
  --line:rgba(31,138,76,.22);--gold-line:rgba(201,162,39,.36);
  --shadow:0 16px 36px rgba(20,50,28,.10);--radius:14px;
  --max:1200px;--vine:24px;--platform:62px;--tabs:40px;--header:126px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",Arial,sans-serif;font-size:16px;line-height:1.75;overflow-x:hidden}
body.is-locked{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
.shell{width:min(var(--max),calc(100% - 32px));margin:0 auto}
.skip-link{position:fixed;left:16px;top:-80px;z-index:9999;background:var(--surface);color:var(--forest);padding:10px 14px;border-radius:10px;box-shadow:var(--shadow)}
.skip-link:focus{top:10px}
.site-header{position:fixed;inset:0 0 auto;z-index:1000;background:var(--bg);box-shadow:0 4px 16px rgba(20,50,28,.06)}
.vine-bar{height:var(--vine);background:var(--green);color:#F4FBF4;font-size:12px;line-height:1}
.vine-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}
.vine-brand{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vine-search{min-width:52px;align-self:stretch;border:0;background:transparent;color:#F4FBF4;padding:0 6px}
.vine-search:focus-visible,.vine-search:hover{background:rgba(255,255,255,.14);outline:2px solid #F4FBF4;outline-offset:-2px}
.platform-bar{height:var(--platform);background:#FFFDF4;border-bottom:1px solid var(--line)}
.platform-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand-link{display:flex;align-items:center;min-height:44px;min-width:96px}
.brand-logo{width:auto;height:28px;max-width:180px;object-fit:contain;object-position:left center}
.brand-wordmark{font-weight:800;font-size:22px;color:var(--forest);letter-spacing:.04em}
.platform-actions{display:flex;align-items:center;gap:10px}
.menu-trigger,.app-link,.panel-close{min-height:44px;border-radius:12px;padding:8px 16px;border:1px solid var(--line);background:#FFFDF4;color:var(--forest);font-weight:700}
.app-link{display:inline-flex;align-items:center;background:linear-gradient(135deg,#3CB371 0%,#1F8A4C 56%,#0F3D24 100%);color:#F4FBF4;border:0}
.menu-trigger:hover,.menu-trigger:focus-visible,.panel-close:hover,.panel-close:focus-visible{border-color:var(--green);outline:3px solid rgba(31,138,76,.14)}
.app-link:hover,.app-link:focus-visible{outline:3px solid rgba(31,138,76,.2);outline-offset:2px}
.fresh-tabs{height:var(--tabs);background:#DFF2E7;border-bottom:1px solid var(--line)}
.fresh-tabs-inner{height:100%;display:flex;align-items:stretch;justify-content:center;gap:28px}
.fresh-tabs a{position:relative;display:flex;align-items:center;justify-content:center;min-width:88px;color:var(--text);font-weight:700}
.fresh-tabs a.is-current{color:var(--forest)}
.fresh-tabs a.is-current:after{content:"";position:absolute;left:26%;right:26%;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--green)}
.fresh-tabs a:hover,.fresh-tabs a:focus-visible{color:var(--green);outline:none}
.site-main{padding-top:calc(var(--header) + 28px);min-height:70vh}
.page-title-wrap{padding:22px 0 12px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--green);font-weight:800;font-size:13px;letter-spacing:.08em}
.eyebrow:before{content:"";width:28px;height:2px;background:var(--gold)}
h1{margin:8px 0 12px;color:var(--title);font-size:clamp(28px,4vw,32px);line-height:1.25;letter-spacing:-.02em}
h2{color:var(--title);line-height:1.35}
p{margin:0 0 1em}
.lead{max-width:820px;color:var(--muted);font-size:17px}
.notice-strip{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#DFF2E7;color:var(--forest);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-bottom:20px}
.notice-strip a{font-weight:800;color:var(--green)}
.home-duo,.three-grid,.two-grid,.four-grid,.content-grid{display:grid;gap:20px}
.home-duo,.two-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.three-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.four-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.content-grid{grid-template-columns:1.2fr .8fr}
.card,.feature-card,.prose-card,.status-card,.faq-item,.service-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card,.feature-card,.service-card{padding:18px}
.card h2,.feature-card h2,.service-card h2{margin:12px 0 8px;font-size:21px}
.card p,.feature-card p,.service-card p{color:var(--muted)}
.card-link,.text-button{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;color:var(--green);font-weight:800}
.card-link:after,.text-button:after{content:"→";margin-left:7px}
.card-link:hover,.card-link:focus-visible,.text-button:hover,.text-button:focus-visible{color:var(--forest);outline:2px solid rgba(31,138,76,.22);outline-offset:3px;border-radius:6px}
.media-slot{width:100%;display:flex;align-items:center;justify-content:center;background:#EEF8F0;border:1px solid rgba(31,138,76,.14);border-radius:12px;overflow:hidden}
.media-slot img{width:100%;height:100%;object-fit:contain;object-position:center}
.media-fallback{color:var(--muted);text-align:center;font-weight:700;background:linear-gradient(135deg,#F8FFF8,#DFF2E7)}
.media-fallback span{padding:16px}
.media-home-duo{height:170px}
.media-banner{height:min(240px,42vw);min-height:160px}
.media-card{height:150px}
.media-topic{height:180px}
.media-app{height:380px;max-width:360px;margin:auto}
.media-icon{height:72px;width:72px}
.hero-section,.section-block{margin-bottom:24px}
.section-block{padding:24px 0}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:14px}
.section-heading h2{margin:0;font-size:24px}
.section-heading p{margin:0;color:var(--muted);max-width:650px}
.banner-copy{text-align:center;padding:20px 16px 6px}
.banner-copy .kicker{color:var(--green);font-size:14px;font-weight:800}
.banner-copy h2{margin:6px 0 8px;font-size:27px}
.banner-copy p{max-width:760px;margin:0 auto 12px;color:var(--muted)}
.button-row{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.text-button.secondary{color:var(--forest)}
.wide-note{background:linear-gradient(135deg,#FFFFFF 0%,#F0FAF2 100%);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.wide-note h2{margin-top:0}
.status-card{padding:18px;min-height:154px}
.status-card b{display:block;color:var(--forest);font-size:18px;margin-bottom:6px}
.status-card span{color:var(--muted)}
.prose-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:22px;align-items:start}
.prose-card{padding:24px}
.prose-card section+section{border-top:1px solid var(--line);margin-top:24px;padding-top:22px}
.prose-card h2{margin:0 0 10px;font-size:23px}
.prose-card h3{margin:18px 0 6px;font-size:18px;color:var(--forest)}
.prose-card p,.prose-card li{color:var(--text)}
.prose-card ul,.prose-card ol{padding-left:1.2em}
.side-index{position:sticky;top:calc(var(--header) + 20px);background:#FFFDF4;border:1px solid var(--gold-line);border-radius:var(--radius);padding:18px}
.side-index h2{font-size:18px;margin:0 0 8px}
.side-index a{display:block;padding:8px 0;color:var(--muted);border-bottom:1px solid rgba(31,138,76,.1)}
.side-index a:last-child{border-bottom:0}
.side-index a:hover,.side-index a:focus-visible{color:var(--green);outline:none}
.tag-cloud{display:flex;flex-wrap:wrap;gap:10px}
.tag-cloud a,.tag-cloud span{display:inline-flex;align-items:center;min-height:40px;padding:7px 12px;background:#EAF6EC;border:1px solid var(--line);border-radius:10px;color:var(--forest);font-weight:700}
.number-list{counter-reset:item;display:grid;gap:14px}
.number-list article{counter-increment:item;position:relative;padding:18px 18px 18px 62px;background:#fff;border:1px solid var(--line);border-radius:14px}
.number-list article:before{content:counter(item,decimal-leading-zero);position:absolute;left:18px;top:18px;color:var(--green);font-weight:900;font-size:21px}
.number-list h2{font-size:20px;margin:0 0 6px}
.timeline{display:grid;gap:14px}
.timeline article{display:grid;grid-template-columns:130px 1fr;gap:18px;padding:18px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.timeline b{color:var(--green)}
.app-product{display:grid;grid-template-columns:minmax(280px,.8fr) 1.2fr;gap:26px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow)}
.app-icon-row{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.app-icon-row strong{color:var(--title);font-size:22px}
.rule-list{display:grid;gap:12px}
.rule-list article{padding:18px;border-radius:12px;background:#fff;border:1px solid var(--line)}
.rule-list h2{margin:0 0 6px;font-size:20px}
.faq-list{display:grid;gap:14px}
.faq-item{padding:20px}
.faq-item h2{font-size:19px;margin:0 0 8px}
.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.site-footer{margin-top:48px;background:var(--forest);color:#E4F3E6;padding:36px 0 calc(34px + env(safe-area-inset-bottom))}
.footer-brand-row{padding-bottom:20px;border-bottom:1px solid rgba(228,243,230,.15)}
.footer-brand{display:flex;align-items:center;gap:12px}
.footer-logo{height:28px;width:auto;max-width:170px;object-fit:contain;filter:brightness(1.08)}
.footer-brand strong{display:block;color:#FFFDF4;font-size:20px}
.footer-brand span{display:block;color:#9DDCB5;font-size:12px;letter-spacing:.12em}
.footer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:26px 0}
.footer-grid h2{margin:0 0 8px;color:#FFFDF4;font-size:16px}
.footer-grid a{display:block;padding:5px 0;color:#D2E8D8}
.footer-grid a:hover,.footer-grid a:focus-visible{color:#A9E6BE;outline:none;text-decoration:underline}
.footer-note{padding-top:18px;border-top:1px solid rgba(228,243,230,.15);font-size:14px;color:#BCD7C4}
.footer-note p:last-child{margin-bottom:0}
.page-overlay{position:fixed;inset:0;z-index:1040;background:rgba(15,61,36,.32);opacity:0;pointer-events:none;transition:opacity .2s ease}
.page-overlay.is-visible{opacity:1;pointer-events:auto}
.basket-panel,.search-panel{position:fixed;z-index:1050;background:#FFFDF4;border:1px solid var(--line);box-shadow:0 24px 60px rgba(15,61,36,.18);visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-12px);transition:opacity .18s ease,transform .18s ease,visibility .18s}
.basket-panel.is-open,.search-panel.is-open{visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0)}
.basket-panel{top:calc(var(--vine) + var(--platform));left:max(16px,calc((100vw - var(--max))/2));width:min(500px,calc(100vw - 32px));max-height:calc(100vh - var(--vine) - var(--platform) - 20px);overflow:auto;border-top:2px solid var(--green);border-radius:0 0 14px 14px}
.basket-head,.search-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.basket-brand{display:flex;align-items:center;gap:10px;color:var(--forest)}
.basket-brand img{height:26px;width:auto;max-width:150px;object-fit:contain}
.basket-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:18px}
.basket-grid h2{font-size:15px;margin:0 0 6px;color:var(--green)}
.basket-grid a{display:block;padding:9px 0;border-bottom:1px solid rgba(31,138,76,.1)}
.basket-grid a:last-child{border-bottom:0}
.basket-grid b{display:block;color:var(--forest)}
.basket-grid span{display:block;color:var(--muted);font-size:13px;line-height:1.45}
.basket-grid a:hover b,.basket-grid a:focus-visible b{color:var(--green)}
.basket-grid a:focus-visible{outline:2px solid rgba(31,138,76,.18);outline-offset:2px}
.search-panel{top:calc(var(--vine) + var(--platform));right:max(16px,calc((100vw - var(--max))/2));width:min(460px,calc(100vw - 32px));border-radius:0 0 14px 14px;padding-bottom:16px}
.search-label{display:block;padding:14px 16px 8px;color:var(--muted)}
.search-input{display:block;width:calc(100% - 32px);margin:0 16px 12px;min-height:46px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;color:var(--text)}
.search-input:focus{outline:3px solid rgba(31,138,76,.14);border-color:var(--green)}
.search-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 16px}
.search-links a{display:flex;align-items:center;min-height:44px;padding:8px 11px;border-radius:10px;background:#EAF6EC;color:var(--forest);font-weight:700}
.search-links a:hover,.search-links a:focus-visible{background:#D8EDDC;outline:2px solid var(--line)}
.search-empty{padding:8px 16px 0;color:var(--muted);font-size:14px}
.mobile-bottom-nav{display:none}
@media (max-width:860px){
  .three-grid{grid-template-columns:1fr 1fr}.three-grid>*:last-child{grid-column:1/-1}
  .four-grid{grid-template-columns:1fr 1fr}
  .prose-layout{grid-template-columns:1fr}.side-index{position:static}
  .footer-grid{grid-template-columns:1fr 1fr}
  .app-product{grid-template-columns:1fr}.media-app{height:340px}
}
@media (max-width:640px){
  :root{--tabs:0px;--header:86px}
  .shell{width:calc(100% - 32px)}
  .fresh-tabs{display:none}
  .vine-bar{height:24px}
  .platform-actions{gap:6px}
  .menu-trigger,.app-link{padding:8px 11px}
  .brand-logo{height:26px;max-width:135px}
  .brand-wordmark{font-size:20px}
  .site-main{padding-top:calc(var(--header) + 20px)}
  .home-duo,.two-grid,.content-grid,.three-grid,.four-grid,.contact-grid{grid-template-columns:1fr}
  .three-grid>*:last-child{grid-column:auto}
  .media-home-duo{height:160px}.media-card{height:150px}.media-topic{height:165px}
  .banner-copy h2{font-size:23px}
  .section-heading{display:block}.section-heading p{margin-top:6px}
  .timeline article{grid-template-columns:1fr;gap:4px}
  .basket-panel,.search-panel{top:calc(var(--vine) + var(--platform));left:16px;right:16px;width:auto}
  .basket-panel{height:60vh;max-height:60vh}
  .basket-grid{grid-template-columns:1fr 1fr;gap:16px}
  .basket-grid span{font-size:12px}
  .mobile-bottom-nav{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);left:0;right:0;bottom:0;z-index:1025;height:calc(50px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#FFFDF4;border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(20,50,28,.08)}
  .mobile-bottom-nav a{display:flex;align-items:center;justify-content:center;min-width:0;min-height:50px;color:var(--muted);font-size:13px;font-weight:800}
  .mobile-bottom-nav a.is-current{background:var(--green);color:#F4FBF4}
  .mobile-bottom-nav a:focus-visible{outline:3px solid rgba(201,162,39,.36);outline-offset:-3px}
  .site-footer{padding-bottom:calc(82px + env(safe-area-inset-bottom))}
  .footer-grid{grid-template-columns:1fr 1fr;gap:18px}
}
@media (max-width:390px){
  .vine-brand{max-width:210px}.basket-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}
  .search-links{grid-template-columns:1fr}
}
