/* platform.css — Orig AI 开放平台控制台外壳(配合 theme.css / platform.js) */
:root{
  --pf-side-w:236px;
  --pf-side-bg:#f5f5f6;
  --pf-side-line:#ececed;
  --pf-ink:#1a1a1a;
  --pf-sub:#5f6368;
  --pf-faint:#9aa0a6;
  --pf-blue:#2D7FF9;
  --pf-hover:#ececed;
  --pf-active:#e3e3e4;
}
body.pf{background:#fff;color:var(--pf-ink);}

/* ===== 布局 ===== */
.pf-layout{display:flex;min-height:100vh;}
.pf-side{width:var(--pf-side-w);flex-shrink:0;position:fixed;top:0;bottom:0;left:0;
  background:var(--pf-side-bg);border-right:1px solid var(--pf-side-line);
  display:flex;flex-direction:column;padding:20px 14px 16px;overflow-y:auto;z-index:50;}
.pf-main{flex:1;margin-left:var(--pf-side-w);min-width:0;display:flex;flex-direction:column;}
.pf-body{flex:1;padding:38px 56px 80px;max-width:980px;width:100%;}

/* ===== 品牌 ===== */
.pf-brand{display:flex;align-items:center;gap:8px;padding:6px 8px 22px;}
.pf-brand .bn{font-size:19px;font-weight:500;color:var(--pf-ink);letter-spacing:-.2px;}
.pf-brand .tag{font-size:11px;font-weight:400;color:#fff;background:#1a1a1a;
  border-radius:6px;padding:2px 7px;line-height:1.5;}

/* ===== 侧栏菜单 ===== */
.pf-nav{display:flex;flex-direction:column;gap:2px;}
.pf-nav-spacer{flex:1;min-height:24px;}
.pf-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;
  font-size:14px;color:var(--pf-sub);cursor:pointer;font-weight:400;
  transition:background .15s,color .15s;white-space:nowrap;user-select:none;}
.pf-item:hover{background:var(--pf-hover);color:var(--pf-ink);}
.pf-item.active{background:var(--pf-active);color:var(--pf-ink);font-weight:400;}
.pf-item.disabled{color:var(--pf-faint);cursor:default;}
.pf-item.disabled:hover{background:transparent;color:var(--pf-faint);}
.pf-item svg{width:17px;height:17px;flex-shrink:0;stroke:currentColor;}
.pf-item .ext{margin-left:auto;opacity:.6;}
.pf-item .ext svg{width:13px;height:13px;}

/* ===== 侧栏底部备案区 ===== */
.pf-foot{padding:14px 12px 4px;font-size:11px;line-height:1.7;color:var(--pf-faint);}
.pf-foot a{color:var(--pf-faint);}
.pf-foot a:hover{color:var(--pf-sub);}

/* ===== 主区顶部右侧 ===== */
.pf-top{display:flex;align-items:center;justify-content:flex-end;gap:18px;
  padding:18px 56px 0;font-size:13px;color:var(--pf-sub);}
.pf-top .lang{display:inline-flex;align-items:center;gap:5px;cursor:default;}
.pf-top .lang svg{width:13px;height:13px;}
.pf-top .plat{color:var(--pf-ink);font-weight:400;}

/* ===== 主区标题 ===== */
.pf-h1{font-size:34px;font-weight:500;color:var(--pf-ink);margin-bottom:26px;
  display:flex;align-items:baseline;gap:12px;letter-spacing:-.5px;}
.pf-h1 .lnk{font-size:15px;font-weight:400;color:var(--pf-blue);}
.pf-h2{font-size:20px;font-weight:500;color:var(--pf-ink);margin:30px 0 14px;}
.pf-p{font-size:14px;color:#3c4043;line-height:1.8;margin-bottom:14px;}
.pf-muted{color:var(--pf-sub);font-size:13px;line-height:1.8;}

/* ===== 表格(参考图风格:表头浅灰、细线分隔) ===== */
.pf-table{width:100%;border-collapse:collapse;font-size:14px;}
.pf-table th{text-align:left;font-weight:400;color:var(--pf-sub);background:#fafafa;
  padding:13px 16px;border-bottom:1px solid #ededed;font-size:13px;}
.pf-table td{padding:15px 16px;border-bottom:1px solid #f0f0f0;color:var(--pf-ink);vertical-align:middle;}
.pf-table tr:last-child td{border-bottom:none;}
.pf-table .col-act{text-align:right;white-space:nowrap;width:1%;}
.pf-table .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#3c4043;}
.pf-table .lnk{color:var(--pf-blue);font-weight:400;}
.pf-card-table{border:1px solid #ededed;border-radius:12px;overflow:hidden;}

/* ===== 行内图标按钮(编辑/删除,纯SVG) ===== */
.pf-ico-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border:none;background:transparent;color:var(--pf-faint);cursor:pointer;border-radius:7px;
  transition:background .15s,color .15s;}
.pf-ico-btn:hover{background:var(--pf-hover);color:var(--pf-ink);}
.pf-ico-btn.danger:hover{color:var(--pf-blue);}
.pf-ico-btn svg{width:16px;height:16px;}

/* ===== 黑色主按钮(参考图:创建 API key) ===== */
.pf-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-size:14px;font-weight:400;padding:10px 18px;border-radius:9px;border:none;cursor:pointer;
  font-family:inherit;transition:transform .15s,opacity .2s,background .2s;}
.pf-btn svg{width:15px;height:15px;}
.pf-btn-dark{background:#1a1a1a;color:#fff;}
.pf-btn-dark:hover{transform:translateY(-1px);opacity:.92;}
.pf-btn-line{background:#fff;color:var(--pf-ink);border:1px solid #dadce0;}
.pf-btn-line:hover{background:#f7f7f7;}
.pf-btn-sm{padding:7px 14px;font-size:13px;}

/* ===== 顶部说明条 ===== */
.pf-note{font-size:13px;color:var(--pf-sub);line-height:1.8;margin-bottom:24px;max-width:760px;}
.pf-note .lnk{color:var(--pf-blue);}

/* ===== 空态 ===== */
.pf-empty{padding:60px 20px;text-align:center;color:var(--pf-faint);font-size:14px;}

/* ===== 弹层复用 theme.css 的 .ui-modal,这里仅微调宽度 ===== */
.pf-modal-key .box{max-width:520px;}
.pf-key-show{background:#f6f8fc;border:1px solid #e3eaf5;border-radius:10px;padding:14px 16px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:#1a2540;
  word-break:break-all;line-height:1.6;display:flex;align-items:center;gap:10px;}
.pf-key-show .k{flex:1;}
.pf-warn{font-size:12.5px;color:var(--pf-blue);margin-top:12px;line-height:1.7;
  background:rgba(45,127,249,.07);border-radius:8px;padding:10px 12px;}

/* ===== 响应式:窄屏收起侧栏为顶部(简化) ===== */
@media(max-width:820px){
  .pf-side{transform:translateX(-100%);transition:transform .3s;}
  .pf-side.open{transform:translateX(0);box-shadow:0 0 40px rgba(0,0,0,.18);}
  .pf-main{margin-left:0;}
  .pf-body{padding:24px 18px 60px;}
  .pf-top{padding:14px 18px 0;}
  .pf-burger{display:inline-flex;}
}
.pf-burger{display:none;position:fixed;top:14px;left:14px;z-index:60;width:38px;height:38px;
  align-items:center;justify-content:center;background:#fff;border:1px solid #e3e3e4;
  border-radius:9px;cursor:pointer;color:var(--pf-ink);}
.pf-burger svg{width:18px;height:18px;}

/* ===== 字体栈:固定单一优先级,消除回退导致的粗细抖动 =====
   待自托管商用字体后,会在此前面追加 @font-face 并把字体名放到栈首 */
body.pf,body.pf .pf-side,body.pf .pf-main,body.pf input,body.pf button,body.pf textarea{
  font-family:"Poppins","PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC",sans-serif;
  font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;}
body.pf .pf-brand .bn,body.pf .pf-h1,body.pf .pf-h2,body.pf .pf-table th,
body.pf .pf-item.active,body.pf .pf-btn{font-weight:400;}
body.pf .pf-h1,body.pf .pf-brand .bn{font-weight:500;}

/* ===== 侧栏收起 / 展开 ===== */
.pf-side{transition:transform .3s cubic-bezier(.2,.9,.3,1);}
.pf-main{transition:margin-left .3s cubic-bezier(.2,.9,.3,1);}
body.pf-collapsed .pf-side{transform:translateX(-100%);}
body.pf-collapsed .pf-main{margin-left:0;}

/* 侧栏右上角收起按钮 */
.pf-collapse{position:absolute;top:16px;right:12px;width:30px;height:30px;display:flex;
  align-items:center;justify-content:center;border:none;background:transparent;color:var(--pf-sub);
  cursor:pointer;border-radius:7px;transition:background .15s,color .15s;}
.pf-collapse:hover{background:var(--pf-hover);color:var(--pf-ink);}
.pf-collapse svg{width:18px;height:18px;}

/* 页面左上角展开按钮(收起后出现,三条杠) */
.pf-expand{position:fixed;top:14px;left:14px;z-index:80;width:38px;height:38px;display:none;
  align-items:center;justify-content:center;background:#fff;border:1px solid var(--pf-side-line);
  border-radius:9px;cursor:pointer;color:var(--pf-ink);box-shadow:0 2px 10px rgba(20,30,60,.08);
  transition:background .15s;}
.pf-expand:hover{background:#f7f7f7;}
.pf-expand svg{width:18px;height:18px;}
body.pf-collapsed .pf-expand{display:flex;}

/* 收起状态下品牌行给收起按钮留位,展开时正常 */
.pf-brand{position:relative;padding-right:38px;}

/* 修复:收起按钮需在品牌行之上,否则点击被 .pf-brand 拦截 */
.pf-collapse{z-index:5;}

/* ===== topup page ===== */
.pf-tabs{display:inline-flex;background:#f1f3f5;border-radius:10px;padding:3px;margin-bottom:26px;}
.pf-tab{padding:8px 18px;font-size:14px;font-weight:400;color:var(--pf-sub);border-radius:8px;cursor:pointer;border:none;background:none;}
.pf-tab.active{background:#fff;color:var(--pf-ink);box-shadow:0 1px 3px rgba(0,0,0,.08);}
.pf-bal{display:flex;align-items:baseline;gap:8px;margin-bottom:24px;}
.pf-bal .lbl{font-size:13px;color:var(--pf-sub);}
.pf-bal .amt{font-size:30px;font-weight:500;color:var(--pf-ink);}
.pf-bal .cur{font-size:14px;color:var(--pf-sub);}
.pf-flabel{font-size:13px;color:var(--pf-sub);margin:18px 0 10px;}
.pf-amts{display:flex;flex-wrap:wrap;gap:10px;}
.pf-amt{min-width:74px;padding:11px 18px;border:1px solid #dadce0;border-radius:10px;background:#fff;font-size:15px;font-weight:400;color:var(--pf-ink);cursor:pointer;transition:all .12s;}
.pf-amt:hover{border-color:#1a1a1a;}
.pf-amt.active{border-color:#1a1a1a;background:#1a1a1a;color:#fff;}
.pf-amt.link{border-style:dashed;color:var(--pf-blue);font-weight:400;}
.pf-amt-input{width:120px;padding:11px 14px;border:1px solid #1a1a1a;border-radius:10px;font-size:15px;outline:none;}
.pf-pays{display:flex;flex-direction:column;gap:12px;max-width:420px;margin-top:6px;}
.pf-pay{display:flex;align-items:center;gap:12px;padding:14px 18px;border:1.5px solid #e3e5e8;border-radius:12px;cursor:pointer;background:#fff;transition:all .12s;}
.pf-pay:hover{border-color:#bcc0c4;}
.pf-pay.active{border-color:#1a1a1a;box-shadow:0 0 0 1px #1a1a1a;}
.pf-pay img{height:24px;width:auto;}
.pf-pay .nm{font-size:15px;font-weight:400;color:var(--pf-ink);}
.pf-pay .rd{margin-left:auto;width:18px;height:18px;border-radius:50%;border:1.5px solid #cfd2d6;}
.pf-pay.active .rd{border-color:#1a1a1a;background:radial-gradient(circle,#1a1a1a 45%,#fff 47%);}
.pf-gobar{margin-top:28px;max-width:420px;}
.pf-gobar .pf-btn{width:100%;padding:14px;font-size:15px;}
.pf-tipnote{font-size:13px;color:var(--pf-sub);line-height:1.9;margin-top:30px;}
.pf-tipnote b{color:var(--pf-ink);font-weight:400;}
.pf-acct{text-align:center;color:var(--pf-sub);font-size:13px;margin-top:14px;}
.pf-qrbox{text-align:center;}
.pf-qrbox img{width:220px;height:220px;object-fit:contain;border:1px solid #ededed;border-radius:12px;padding:8px;background:#fff;}
.pf-qr-amt{font-size:24px;font-weight:500;color:var(--pf-ink);margin:14px 0 4px;}
.pf-st{display:inline-block;padding:2px 10px;border-radius:20px;font-size:12px;font-weight:400;}
.pf-st.pending{background:#fff4e5;color:#d97706;}
.pf-st.confirmed{background:#e7f6ec;color:#16a34a;}
.pf-st.rejected{background:#fdeaea;color:#e23;}
.pf-upbtn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:1px dashed #bcc0c4;border-radius:8px;background:#fafbfc;color:var(--pf-blue);font-size:13px;font-weight:400;cursor:pointer;}