:root{
      --rv-bg:#F8F1DF;
      --rv-panel:#fff;
      --rv-line:#E6E0D6;
      --rv-text:#1E1A17;
      --rv-muted:#7C7367;
      --rv-gold:#C9A24A;
      --rv-gold-soft:#FBF5E8;
      --rv-gold-line:#E6D1A1;
      --rv-gold-bg:#FFF8E8;
      --rv-warn:#E8A93B;
      --rv-danger:#D9363E;
      --rv-doc-w:360px;
      --rv-nav-w:252px;
    }
    *{box-sizing:border-box}
    html,body{height:100%;margin:0;overflow:hidden;font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",sans-serif;color:var(--rv-text);background:var(--rv-bg);font-size:13px}
    button{font:inherit}
    .rv-shell{height:100vh;display:grid;grid-template-rows:52px 1fr;overflow:hidden}
    .rv-topbar{height:52px;background:#fff;border-bottom:1px solid var(--rv-line);display:flex;align-items:center;justify-content:space-between;padding:0 20px;gap:16px}
    .rv-topbar-left,.rv-topbar-right{display:flex;align-items:center;gap:12px;white-space:nowrap}
    .rv-topbar-title{font-size:16px;font-weight:700;color:#182535}
    .rv-topbar-module,.rv-topbar-right span{font-size:12px;color:#8A97A6}
    .rv-topbar-version{height:22px;display:inline-flex;align-items:center;border-radius:4px;padding:0 8px;background:var(--rv-gold-soft);color:var(--rv-gold);font-size:12px;font-weight:700}
    .rv-topbar-crumb{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;color:#8A97A6;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .rv-topbar-crumb b{color:var(--rv-gold)}
    .rv-main{display:grid;grid-template-columns:var(--rv-nav-w) minmax(0,1fr) var(--rv-doc-w);min-height:0}
    .rv-main.doc-hidden{grid-template-columns:var(--rv-nav-w) minmax(0,1fr)}
    .rv-main.doc-hidden .rv-doc{display:none}
    .rv-sidebar{background:#fff;border-right:1px solid var(--rv-line);overflow-y:auto}
    .rv-overview-entry{border-bottom:1px solid var(--rv-line);padding:8px 0}
    .rv-group{border-bottom:1px solid #F0ECE4}
    .rv-group-head{height:38px;padding:0 16px;display:flex;align-items:center;font-weight:700;color:#182535}
    .rv-nav-item{min-height:32px;padding:3px 12px 3px 16px;display:flex;align-items:center;gap:6px;cursor:pointer;color:#344054}
    .rv-nav-item:hover,.rv-nav-item.active{background:var(--rv-gold-soft);color:var(--rv-gold);font-weight:700}
    .rv-nav-item.active{box-shadow:inset 3px 0 0 var(--rv-gold)}
    .rv-nav-idx{width:34px;flex:0 0 auto;color:#8A97A6;font-family:Consolas,monospace;font-size:12px}
    .rv-nav-item span:nth-child(2){min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .rv-nav-tag{height:18px;display:inline-flex;align-items:center;padding:0 6px;border-radius:3px;font-size:11px;white-space:nowrap;border:1px solid #D4D9E5;background:#F0F2F7;color:#7A859E}
    .rv-nav-tag.modal{background:#EEE8FF;color:#6B4BD6;border-color:#D9CEFF}
    .rv-nav-tag.drawer{background:#E6F7F2;color:#0E8A6A;border-color:#B5E4D4}
    .rv-nav-tag.dialog{background:#E8F0FE;color:#3B6FD4;border-color:#C2D4F8}
    .rv-nav-tag.state{background:#FFF0F5;color:#C4476B;border-color:#F5C0D0}
    .rv-stage{min-width:0;display:flex;flex-direction:column;overflow:hidden}
    .rv-stage-head{height:34px;background:var(--rv-gold-bg);border-bottom:1px solid var(--rv-line);display:flex;align-items:center;justify-content:space-between;padding:0 14px;gap:12px;font-size:12px}
    .rv-stage-path{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#7C7367}
    .rv-stage-path b{color:var(--rv-gold)}
    .rv-stage-tip{height:22px;display:inline-flex;align-items:center;border-radius:11px;padding:0 10px;background:#FFF6E5;border:1px solid #F7D7A4;color:#C98A2A;white-space:nowrap}
    .rv-frames{flex:1;position:relative;overflow:hidden;background:var(--rv-bg)}
    .rv-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff;display:none}
    .rv-frame.active{display:block}
    .rv-phone-wrap{height:100%;display:flex;align-items:flex-start;justify-content:center;padding:24px;overflow:auto}
    .rv-phone-frame{width:390px;max-width:100%;height:760px;border:0;border-radius:18px;background:#000;box-shadow:0 18px 58px rgba(0,0,0,.3)}
    .rv-frame-overview{overflow-y:auto}
    .rv-overview-doc{max-width:980px;margin:0 auto;padding:40px 56px 80px;font-size:14px;line-height:1.8;background:#fff}
    .ov-doc-title{font-size:24px;font-weight:700;margin:0}
    .ov-doc-subtitle{font-size:13px;color:#8A97A6;border-bottom:1px solid var(--rv-line);padding-bottom:16px;margin:6px 0 30px}
    .ov-section{margin-bottom:38px;scroll-margin-top:20px}
    .ov-h2{font-size:18px;font-weight:700;padding-left:12px;border-left:3px solid var(--rv-gold);margin:0 0 12px}
    .ov-h3{font-size:15px;font-weight:700;padding-left:8px;border-left:2px solid var(--rv-gold-line);margin:18px 0 10px}
    .ov-p{text-indent:2em;margin:0 0 12px}
    .ov-table{width:100%;border-collapse:collapse;margin:10px 0 16px;font-size:13px}
    .ov-table th,.ov-table td{border:1px solid #E4E8EE;padding:7px 9px;text-align:left;vertical-align:top}
    .ov-table th{background:#FAFAFA;color:#182535;font-weight:700}
    .ov-p0{color:#168A4A;font-weight:700}.ov-p1{color:#C98A2A;font-weight:700}.ov-p2{color:#7A859E;font-weight:700}
    .ov-note{background:#FFF6E5;border-left:3px solid #E8A93B;padding:10px 12px;color:#6B4A16}
    .rv-doc{background:#fff;border-left:1px solid var(--rv-line);overflow-y:auto;padding:18px 18px 40px}
    .rv-doc-title{font-size:15px;font-weight:700;color:#182535;margin-bottom:4px}
    .rv-doc-subtitle{font-size:12px;color:#8A97A6;margin-bottom:10px}
    .rv-doc-meta{display:grid;grid-template-columns:62px 1fr;gap:6px 8px;background:#F7F9FB;border-radius:6px;padding:10px;margin:0 0 14px}
    .rv-doc-meta dt{color:#8A97A6}.rv-doc-meta dd{margin:0}
    .role-chip{display:inline-flex;align-items:center;height:20px;border-radius:10px;background:#EEF3FF;color:#4F74CB;padding:0 8px;font-size:11px}
    .rv-sec{margin:15px 0}
    .rv-sec-title{font-size:13px;font-weight:700;border-bottom:1px solid var(--rv-line);padding-bottom:6px;margin-bottom:8px}
    .rv-sec-title .dot{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--rv-gold);vertical-align:middle;margin-right:6px}
    .rv-sec ul{margin:0;padding-left:18px;line-height:22px}
    .rv-sec li{margin-bottom:3px}
    .rv-sec code{font-family:Consolas,monospace;background:#F3F5F8;color:#C98A2A;padding:1px 5px;border-radius:3px;font-size:12px}
    .rv-arrow{color:var(--rv-gold);font-weight:700}
    .rv-region{background:#FCFDFE;border:1px solid #E4E8EE;border-radius:6px;padding:10px;margin:10px 0}
    .rv-region-name{font-weight:700;margin-bottom:4px}
    .rv-region-desc{color:#667085;line-height:20px}
    .rv-toc-link{display:block;padding:6px 8px;border-radius:4px;color:#4A5768;text-decoration:none;cursor:pointer}
    .rv-toc-link:hover{background:var(--rv-gold-soft);color:var(--rv-gold)}
    .rv-warn{display:block;background:#FFFAEC;border-left:3px solid #F2DFA4;padding:7px 9px;color:#7A5410;margin:6px 0}

.rv-mobile-tabs{display:none}
.rv-nav-item:focus-visible,.rv-toc-link:focus-visible{outline:2px solid var(--rv-gold);outline-offset:-2px}
.rv-overview-doc img{max-width:100%;height:auto}
@media(max-width:840px){
  .rv-shell{height:100dvh;grid-template-rows:52px 38px 1fr}
  .rv-topbar{padding:0 12px;gap:6px}
  .rv-topbar-left{min-width:0;gap:8px}
  .rv-topbar-title{overflow:hidden;text-overflow:ellipsis}
  .rv-topbar-module,.rv-topbar-crumb,.rv-topbar-right>span{display:none}
  .rv-mobile-tabs{display:flex;background:#fff;border-bottom:1px solid var(--rv-line);padding:0 8px}
  .rv-mobile-tabs button{flex:1;border:0;background:#fff;color:#596172;cursor:pointer}
  .rv-mobile-tabs button[aria-pressed="true"]{color:#835b16;font-weight:700;box-shadow:inset 0 -2px 0 var(--rv-gold)}
  .rv-mobile-tabs button:disabled{color:#a9a29a;cursor:default}
  .rv-main,.rv-main.doc-hidden{grid-template-columns:minmax(0,1fr)}
  .rv-main:not([data-pane="nav"])>.rv-sidebar,
  .rv-main:not([data-pane="stage"])>.rv-stage,
  .rv-main:not([data-pane="doc"])>.rv-doc{display:none}
  .rv-overview-doc{padding:24px 16px 56px;overflow-wrap:anywhere}
  .rv-phone-wrap{padding:12px 0}
  .rv-phone-frame{flex-shrink:0}
  .rv-doc{border-left:0}
}

/* The prototype stage keeps the document layout and frames the live app. */
.rv-stage-head .rv-stage-path{margin-right:auto}
.rv-stage-action{min-height:25px;padding:2px 9px;color:#64594a;background:#fffdfa;border:1px solid var(--rv-line);border-radius:6px;white-space:nowrap;cursor:pointer}
.rv-stage-action:hover{color:#7b5215;border-color:#c9a24a}
.rv-stage-action:focus-visible{outline:2px solid #9d721d;outline-offset:2px}
.rv-stage-action[hidden]{display:none}
.rv-frame-prototype{background:radial-gradient(ellipse at 50% 20%,#fff 10%,#f5f2ec 74%,#ede8df)}
.rv-phone-wrap{padding:clamp(12px,2.8vh,26px) 12px;align-items:flex-start}
.rv-phone-frame{height:min(780px,calc(100dvh - 125px));min-height:420px;border:1px solid #292d33;border-radius:24px;background:#101217;box-shadow:0 22px 56px #271e172c,0 4px 12px #201b141e}
@media (max-width:840px){
  .rv-phone-wrap{padding:8px}
  .rv-phone-frame{height:100%;min-height:0;border-radius:16px}
  .rv-stage-head{padding-inline:8px;gap:5px}
  .rv-stage-tip{max-width:42%;overflow:hidden;text-overflow:ellipsis;display:block;line-height:20px;padding-inline:6px}
  .rv-stage-action{padding-inline:5px}
}

.rv-stage-actions{display:flex;align-items:center;gap:5px}
.rv-stage-actions:not(:has(button:not([hidden]))){display:none}
.rv-stage-action[aria-pressed="true"],.rv-prototype-edit{color:#76541c;background:#fff9e9}
.rv-stage-action[aria-pressed="true"]{border-color:#c9a24a}
.rv-main.cinema{grid-template-columns:minmax(0,1fr)}
.rv-main.cinema>:is(.rv-sidebar,.rv-doc){display:none}
.rv-main.cinema .rv-phone-wrap{padding:0;background:#101217}
.rv-main.cinema .rv-phone-frame{width:100%;height:100%;min-height:0;border:0;border-radius:0;box-shadow:none}
@media(max-width:840px){
  .rv-cinema-toggle,.rv-prototype-reopen,.rv-main.has-prototype .rv-stage-tip{display:none}
  .rv-main.cinema .rv-cinema-toggle{display:inline-block}
}

@media(max-width:840px){
  .rv-shell{grid-template-columns:minmax(0,1fr)}
  .rv-topbar,.rv-main,.rv-mobile-tabs{min-width:0}
  .rv-mobile-tabs button{min-width:0}
}
@media(max-width:380px){
  .rv-topbar-version{display:none}
}
@media(max-width:350px){
  .rv-phone-wrap{padding:0}
  .rv-phone-frame{border:0;border-radius:0}
}