:root { --primary:#0f6e56; --primary-dark:#085041; --primary-50:#e1f5ee; --primary-200:#5dcaa5; --border:#e2e6e3; --text:#17211e; --muted:#5f6b67; }
* { box-sizing:border-box; letter-spacing:0; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; background:#f7f8f6; color:var(--text); }
button, a { font:inherit; color:inherit; }
.portal { position:relative; height:100%; }
.portal > .portal-tabs { display:none; }
.portal-tabs { position:fixed; z-index:1000; top:7px; left:50%; transform:translateX(-50%); height:50px; align-items:center; gap:3px; padding:4px; border:1px solid var(--border); border-radius:7px; background:rgba(255,255,255,.96); box-shadow:0 2px 8px rgba(23,33,30,.08); backdrop-filter:blur(8px); }
.portal-tabs button { height:40px; min-width:112px; padding:0 16px; border:0; border-radius:5px; background:transparent; color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; font-size:13px; font-weight:600; white-space:nowrap; }
.portal-tabs button:hover { background:#f3f8f6; color:var(--primary); }
.portal-tabs button[aria-selected="true"] { color:var(--primary); background:var(--primary-50); box-shadow:inset 0 0 0 1px var(--primary-200); }
.portal-tabs svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.portal-content, #app-frame { width:100%; height:100%; min-width:0; min-height:0; }
#app-frame { display:block; border:0; background:#f7f8f6; }
@media (max-width:800px) {
  .portal-tabs { left:calc(50% + 39px); }
  .portal-tabs button { min-width:92px; padding:0 10px; }
}
@media (max-width:680px) {
  .portal-tabs { top:6px; left:50%; height:48px; max-width:calc(100vw - 140px); overflow-x:auto; }
  .portal-tabs button { height:38px; min-width:72px; padding:0 8px; font-size:11px; }
  .portal-tabs svg { width:16px; height:16px; }
}