:root{color-scheme:dark;--bg:#141517;--panel:#1c1d21;--panel2:#222329;--line:#303138;--text:#ececf2;--muted:#9697a5;--purple:#88b3f4;--accent:#5283cc;--green:#73c9a4;--red:#ee9298;--yellow:#dfbd79} *{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}button:active:not(:disabled){transform:translateY(1px)}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--purple);outline-offset:3px} .sidebar{position:fixed;inset:0 auto 0 0;width:232px;background:#191a1e;border-right:1px solid var(--line);padding:32px 18px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:12px;padding:0 12px;font-size:22px;font-weight:600}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border:1px solid #506687;border-radius:12px;font-family:serif;color:#c4dafa;background:#252e3c}.brand small{display:block;font-size:10px;letter-spacing:.22em;color:var(--muted)}.workspace-label{font-size:12px;color:#858592;display:flex;justify-content:space-between;margin:40px 14px 16px}.workspace-label span{font-size:9px;letter-spacing:.08em}nav{display:grid;gap:6px}nav a{display:flex;align-items:center;gap:14px;color:#a5a5b2;padding:12px 16px;border:1px solid transparent;border-radius:9px}nav a:hover{background:#24252c;color:var(--text)}nav a.active{background:#262f3d;border-color:#334156;color:#b9d3fa}nav svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.sidebar-bottom{margin-top:auto;padding:22px 8px 0;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px}.admin-avatar{width:34px;height:34px;border-radius:50%;background:#30353d;display:grid;place-items:center;color:#b8cae4}.sidebar-bottom small{display:block;color:var(--muted);font-size:11px}.sidebar-bottom button{margin-left:auto} .workspace{margin-left:232px}.topbar{height:73px;border-bottom:1px solid var(--line);padding:0 40px;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:12px}.slash{padding:0 16px;color:#565b62}.preview-label{border:1px solid #3a4a62;border-radius:5px;padding:3px 10px;color:#a4bee6;font-size:11px;letter-spacing:.08em}main{padding:36px 40px 40px;min-height:calc(100vh - 133px);max-width:1900px;margin:auto}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:72px;margin-bottom:20px}h1{font-size:27px;font-weight:600;letter-spacing:.02em;margin:0 0 5px}h2{font-size:16px;font-weight:600;margin:0}h3{font-size:15px;font-weight:500;margin:0}p{margin:0;color:var(--muted)}.page-heading p{font-size:14px}.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 14px;border:1px solid #3c3d46;border-radius:7px;background:#25262c;color:var(--text);white-space:nowrap}.button:hover{background:#30313a;border-color:#61616e}.primary{background:var(--accent);border-color:#6492d8;color:white}.primary:hover{background:#6090d9;border-color:#85afed}.quiet{background:transparent}.danger{color:var(--red)}.small{font-size:12px;padding:4px 9px}.icon-button{border:0;background:transparent;color:var(--muted);font-size:20px;padding:3px 8px}.icon-button:hover{color:white} .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:24px}.stat,.panel{border:1px solid var(--line);background:var(--panel);border-radius:12px}.stat{padding:22px 24px}.stat-label{color:var(--muted);display:flex;align-items:center;justify-content:space-between}.stat-label span{font-size:11px;color:#757582}.stat-value{font-size:34px;line-height:1.3;font-weight:500;letter-spacing:-.035em;margin:12px 0}.stat-note{font-size:12px;color:var(--muted)}.stat-note b{color:var(--green);font-weight:400;margin-right:6px}.grid-two{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:22px}.panel{padding:24px;margin-bottom:22px;min-width:0}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}.panel-head p{font-size:12px}.table-wrap{width:100%}table{width:100%;border-collapse:collapse;text-align:left}th{color:#90919e;font-size:12px;font-weight:400;background:#202126}th,td{padding:13px 12px;border-bottom:1px solid #2b2c33;vertical-align:middle}td{font-size:13px;color:#d0d0db}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:#202126}.mono{font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace}.muted{color:var(--muted)}.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap;padding:3px 9px;border-radius:5px;background:#282931;color:#a6a6b4}.badge:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}.badge.ok{background:#21352e;color:var(--green)}.badge.warn{background:#382f22;color:var(--yellow)}.badge.fail{background:#3a252b;color:var(--red)}.badge.purple{background:#25303f;color:#9fc0f1}.exception{padding:15px 0;border-bottom:1px solid #2b2c33}.exception:last-child{border:0}.exception div{display:flex;justify-content:space-between;margin-bottom:7px}.exception p{font-size:13px;color:#bf9ca2}.exception small{font-size:11px;color:var(--muted)} .toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:22px}.tabs{display:flex;gap:4px;padding:4px;background:#141519;border:1px solid var(--line);border-radius:8px}.tabs button{padding:6px 12px;border:0;border-radius:5px;color:var(--muted);background:none}.tabs button.selected{background:#30363f;color:#c2d8f9}.search{margin-left:auto;min-width:230px}.actions{display:flex;gap:5px;flex-wrap:wrap}.empty{text-align:center;padding:44px;color:var(--muted)}input,select,textarea{background:#16171b;border:1px solid #373841;border-radius:7px;color:var(--text);padding:9px 11px;min-width:0}textarea{resize:vertical;min-height:120px}input::placeholder,textarea::placeholder{color:#6f707d}label{display:grid;gap:8px;color:#b9b9c6;font-size:13px}label input,label select,label textarea{width:100%}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.full{grid-column:1/-1}.check{display:flex;align-items:center;gap:9px}.check input{width:16px;height:16px;accent-color:var(--purple)}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.hint{font-size:12px;color:var(--muted);margin-top:10px}.release-current{display:flex;align-items:center;justify-content:space-between;gap:22px}.version-number{font-size:30px;font-weight:500;margin:7px 0}.facts{display:flex;gap:45px}.facts small{display:block;color:var(--muted);margin-bottom:5px}.upload{border:1px dashed #414e60;border-radius:9px;background:#1d222a;padding:22px;text-align:center}.upload input{display:block;margin:14px auto 0;max-width:100%;width:auto;font-size:12px}.file-meta{padding:13px;border-radius:7px;background:#17181c;word-break:break-all;color:var(--muted);font-size:12px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid #2d2e35}.setting-row:last-child{border:0;padding-bottom:0}.setting-row p{font-size:12px;margin-top:4px}.info-banner{padding:12px 16px;border:1px solid #3c495b;background:#21262f;border-radius:8px;color:#a7b6cc;font-size:13px;margin-bottom:22px} dialog{width:min(760px,calc(100vw - 40px));max-height:88vh;background:var(--panel);color:var(--text);border:1px solid #40454e;border-radius:14px;padding:27px;box-shadow:0 28px 100px #0008}dialog::backdrop{background:#08090cba}.dialog-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.detail-grid dt{font-size:12px;color:var(--muted)}.detail-grid dd{margin:5px 0;word-break:break-word}.key-field{display:flex;gap:8px}.key-field input{flex:1;min-width:0}#toast{position:fixed;bottom:30px;left:calc(50% + 116px);transform:translateX(-50%);background:#2b3442;border:1px solid #50637f;color:#d4e1f4;padding:12px 22px;border-radius:9px;z-index:10;display:none;max-width:80vw}#toast.show{display:block}footer{height:60px;padding:0 40px;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#767682;border-top:1px solid #27282e} @media(min-width:1700px){main{padding:42px 52px}.topbar,footer{padding-left:52px;padding-right:52px}td{font-size:14px;padding:16px 12px}.panel{padding:26px}.stat{padding:25px 28px}} @media(max-width:1250px){.sidebar{width:190px;padding:25px 12px}.workspace{margin-left:190px}main{padding:28px 24px}.topbar,footer{padding-left:24px;padding-right:24px}th,td{padding:10px 6px;font-size:11px}.grid-two{grid-template-columns:1fr}.search{margin-left:0}.actions .small{font-size:12px;padding:0 9px}} @media(max-width:760px){.sidebar{position:static;width:auto;padding:15px}.brand{font-size:18px}.workspace-label,.sidebar-bottom{display:none}nav{grid-template-columns:repeat(4,1fr);gap:3px;margin-top:15px}nav a{font-size:12px;padding:7px;justify-content:center}nav svg{display:none}.workspace{margin:0}main{padding:24px 14px}.topbar{height:52px;padding:0 14px}.stats{grid-template-columns:repeat(2,1fr);gap:10px}.stat{padding:16px}.stat-value{font-size:27px}.form-grid{grid-template-columns:1fr}.full{grid-column:auto}.panel{padding:15px}.release-current{align-items:flex-start;flex-direction:column}.facts{gap:24px}.page-heading{align-items:flex-start}h1{font-size:24px}footer{height:auto;padding:15px;gap:10px;flex-wrap:wrap}#toast{left:50%}table{min-width:690px}.table-wrap{display:block;max-width:100%;contain:inline-size;overflow-x:auto}.preview-label{font-size:9px}} @media(min-width:1700px){.stats{grid-template-columns:repeat(6,minmax(0,1fr))}.stat-label{align-items:flex-start;flex-direction:column;gap:4px}} .sidebar-bottom .icon-button{font-size:12px;white-space:nowrap} /* Remove content focus outline */ #main:focus { outline: none; } #main:focus { outline: none; } #main [data-action="logout"] { display: none; } .topbar { display: none; } .grid-two > div { display: flex; flex-direction: column; } .grid-two > div > .panel { flex: 1; } .grid-two > div:last-child > .panel { display: flex; flex-direction: column; } .grid-two > div:last-child .setting-row { flex: 1; } .brand-mark { display: none; } .workspace-label { display: none; } .sidebar nav { margin-top: 28px; } /* LICENSE_TEXT_ACTIONS_START */ #license-table [data-action="reveal-license"], #license-table [data-action="copy-license"] { border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 3px 0; margin-right: 14px; min-height: 28px; font-size: 12px; font-weight: 400; color: var(--muted); } #license-table [data-action="reveal-license"]:hover, #license-table [data-action="copy-license"]:hover { background: transparent; color: var(--purple); } /* LICENSE_TEXT_ACTIONS_END */ /* Sidebar logout layout v2 */ .sidebar .sidebar-bottom { flex-direction: column; align-items: stretch; grid-template-columns: minmax(0, 1fr); } .sidebar-bottom .admin-identity { display: flex; align-items: center; gap: 10px; } .sidebar .sidebar-bottom > .sidebar-logout { grid-column: 1 / -1; align-self: stretch; width: 100%; margin: 14px 0 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; text-align: center; } /* Task filter focus: no outer ring */ #main .toolbar select:focus { outline: none; outline-offset: 0; } #main .toolbar select:focus-visible { border-color: var(--muted); } /* Compact native release file picker */ #release-form #ccx-file { width: calc((100% - 20px) / 2); max-width: 100%; margin: 0; } @media(max-width:760px){#release-form #ccx-file { width: 100%; }} /* Dialog close icons: no focus ring */ dialog .icon-button[data-action="close"]:focus, dialog .icon-button[data-action="close"]:focus-visible { outline: none; box-shadow: none; } dialog .icon-button[data-action="close"]:focus-visible { color: var(--text); } /* Compact desktop sidebar */ @media(min-width:761px){ .sidebar{width:200px;padding:24px 14px;} .workspace{margin-left:200px;} .sidebar .brand{font-size:20px;padding:0 10px;} .sidebar .brand small{font-size:9px;letter-spacing:.18em;} .sidebar nav{margin-top:22px;gap:4px;} .sidebar nav a{padding:9px 12px;gap:10px;font-size:13px;border-radius:7px;} .sidebar nav svg{width:17px;height:17px;} .sidebar .sidebar-bottom{padding:16px 6px 0;gap:8px;font-size:13px;} .sidebar .admin-avatar{width:30px;height:30px;font-size:12px;} .sidebar .admin-identity{gap:9px;} .sidebar .sidebar-bottom small{font-size:11px;} .sidebar .sidebar-bottom > .sidebar-logout{margin-top:10px;padding:6px 10px;font-size:12px;} #toast{left:calc(50% + 100px);} } @media(min-width:761px) and (max-width:1250px){ .sidebar{width:180px;} .workspace{margin-left:180px;} #toast{left:calc(50% + 90px);} } /* Upper-right administrator menu */ .account-header{display:flex;justify-content:flex-end;align-items:center;padding:18px 40px 0;} .account-menu{position:relative;z-index:5;} .account-menu summary{display:flex;align-items:center;gap:9px;padding:5px 10px 5px 5px;border:1px solid var(--line);border-radius:24px;background:var(--panel2);color:var(--text);cursor:pointer;font-size:13px;list-style:none;} .account-menu summary::-webkit-details-marker{display:none;} .account-avatar{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#364356;color:#c8dcfa;font-size:12px;} .account-menu summary svg{width:14px;height:14px;fill:none;stroke:var(--muted);stroke-width:1.7;} .account-menu[open] summary svg{transform:rotate(180deg);} .account-dropdown{position:absolute;right:0;top:calc(100% + 8px);width:158px;padding:6px;border:1px solid #41444a;border-radius:9px;background:#292a30;box-shadow:0 10px 30px #0005;} .account-dropdown a,.account-dropdown button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:5px;background:transparent;color:var(--text);font-size:13px;text-align:left;cursor:pointer;} .account-dropdown a:hover,.account-dropdown button:hover{background:#34383f;} .account-dropdown svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;} .account-menu summary:focus-visible{outline:1px solid var(--muted);outline-offset:3px;} @media(min-width:1700px){.account-header{padding-right:52px;}} @media(min-width:761px){.workspace #main{padding-top:16px;}} @media(max-width:1250px){.account-header{padding-right:24px;}} @media(max-width:760px){.account-header{padding:12px 14px 0;}} /* Desktop: stationary navigation, independently scrolling workspace */ @media(min-width:761px){ html,body{height:100%;overflow:hidden;} .sidebar{position:fixed;inset:0 auto 0 0;height:100vh;height:100dvh;z-index:6;} .workspace{height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior-y:none;} } /* Unified background across navigation and workspace */ .sidebar { background: var(--bg); border-right: 0; box-shadow: none; } /* Align desktop brand/account and navigation/page heading rows */ @media(min-width:761px){ .sidebar{padding-top:24px;} .sidebar .brand{height:40px;flex-shrink:0;} .sidebar nav{margin-top:24px;} .sidebar nav a{min-height:40px;} .account-header{height:88px;box-sizing:border-box;padding-top:0;padding-bottom:0;} .workspace #main{padding-top:0;} .workspace .page-heading{align-items:center;} .workspace .page-heading h1{line-height:40px;} .workspace .page-heading > .button{min-height:40px;} } /* Horizontal app navigation: replaces the sidebar layout */ html body{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;} .app-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;flex:0 0 80px;padding:0 40px;background:var(--bg);position:relative;z-index:10;} .app-header .brand{justify-self:start;font-size:20px;padding:0;} .app-header .brand small{font-size:9px;letter-spacing:.18em;} .app-header #navigation{display:flex;align-items:center;gap:8px;margin:0;} .app-header #navigation a{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:44px;min-height:44px;padding:0 16px;gap:8px;font-size:14px;line-height:1;white-space:nowrap;border-radius:7px;} .app-header #navigation svg{display:block;width:17px;height:17px;} .app-header .account-menu{justify-self:end;} body .workspace{margin:0;width:100%;height:auto;min-height:0;flex:1;overflow-y:auto;overscroll-behavior-y:none;} body .workspace #main{padding-top:12px;max-width:none;min-height:100%;} body #toast{left:50%;} @media(min-width:1700px){.app-header{padding:0 52px;}} @media(max-width:1250px){.app-header{padding:0 24px;gap:16px;}.app-header #navigation a{height:44px;min-height:44px;padding:0 10px;font-size:13px;}} @media(max-width:900px){.app-header{grid-template-columns:1fr auto;flex-basis:auto;padding:14px 20px;gap:12px;}.app-header #navigation{grid-row:2;grid-column:1/-1;justify-content:center;flex-wrap:wrap;}.app-header .account-menu{grid-column:2;grid-row:1;}} @media(max-width:480px){.app-header{padding:12px 14px;}.app-header #navigation{gap:4px;}.app-header #navigation a{height:40px;min-height:40px;padding:0 8px;font-size:12px;}.app-header #navigation svg{display:none;}} /* Right-aligned navigation and a more prominent wordmark */ .app-header .brand{font-size:28px;font-weight:600;line-height:1.25;letter-spacing:.08em;} .app-header .brand small{margin-top:7px;font-size:10px;letter-spacing:.24em;line-height:1.4;} @media(min-width:901px){ .app-header{grid-template-columns:minmax(0,1fr) auto auto;column-gap:28px;flex-basis:108px;padding-top:24px;padding-bottom:20px;} .app-header #navigation{justify-self:end;} } @media(max-width:900px){ .app-header{padding-top:24px;padding-bottom:18px;} .app-header .brand{font-size:25px;} .app-header #navigation{justify-content:flex-end;} } /* Align every page action with its title and description */ .workspace .page-heading { align-items: center; } .workspace .page-heading > .button { align-self: center; } /* License filters: individual tabs without a group frame */ #main .license-filters { border: 0; background: transparent; padding: 0; box-shadow: none; gap: 8px; } #main .license-filters button { padding: 8px 12px; border-radius: 7px; } #main .license-filters button:hover { background: #24252c; color: var(--text); } #main .license-filters button.selected { background: #262f3d; color: #b9d3fa; } /* Stable license columns across filters and empty results */ #license-table .license-grid{table-layout:fixed;width:100%;} #license-table .license-col-1{width:16%;} #license-table .license-col-2{width:7%;} #license-table .license-col-3{width:9%;} #license-table .license-col-4{width:6%;} #license-table .license-col-5{width:11%;} #license-table .license-col-6{width:11%;} #license-table .license-col-7{width:11%;} #license-table .license-col-8{width:14%;} #license-table .license-col-9{width:15%;} #license-table td{overflow-wrap:anywhere;} #license-table th{white-space:nowrap;} /* Task records only: bounded card, fixed filters/footer, scrolling table */ body .workspace.tasks-workspace{display:flex;flex-direction:column;overflow:hidden;} body .workspace #main.tasks-page{display:flex;flex-direction:column;flex:1;min-height:0;height:100%;width:100%;margin:0;overflow:hidden;} #main.tasks-page > .page-heading{flex-shrink:0;} #main.tasks-page .task-records-panel{display:flex;flex-direction:column;flex:1;min-height:0;margin-bottom:0;overflow:hidden;} .task-records-panel > .toolbar,.task-records-panel > .hint{flex-shrink:0;} .task-records-panel > #task-table{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#55565f transparent;} #task-table > .table-wrap{overflow:visible;} #task-table th{position:sticky;top:0;z-index:2;background:#202126;} #task-table::-webkit-scrollbar{width:6px;height:6px;} #task-table::-webkit-scrollbar-track{background:transparent;} #task-table::-webkit-scrollbar-thumb{background:#55565f;border-radius:6px;} /* Overview summary only: compact desktop layout, no nested scrolling. */ body .workspace #main.overview-page{padding-bottom:16px;min-height:0;} #main.overview-page .page-heading{min-height:72px;margin-bottom:20px;} #main.overview-page .stats{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:12px;} #main.overview-page .stat{box-sizing:border-box;display:flex;flex-direction:column;height:160px;min-height:160px;padding:12px 14px;} #main.overview-page .stat-label{box-sizing:border-box;display:flex;align-items:center;height:36px;min-height:36px;overflow:hidden;flex-wrap:wrap;column-gap:8px;row-gap:0;line-height:18px;} #main.overview-page .stat-value{display:flex;align-items:center;box-sizing:border-box;height:44px;min-height:44px;margin:4px 0;line-height:1.2;overflow:hidden;} #main.overview-page .stat-note{box-sizing:border-box;height:18px;min-height:18px;line-height:18px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} #main.overview-page .grid-two{gap:12px;} #main.overview-page .panel{padding:12px 16px;margin-bottom:12px;} #main.overview-page > .panel:last-child{margin-bottom:0;} #main.overview-page .panel-head{margin-bottom:8px;} #main.overview-page th,#main.overview-page td{padding:6px 12px;} #main.overview-page .setting-row{padding:8px 0;} @media(max-width:900px) and (min-width:761px){#main.overview-page .stats{grid-template-columns:repeat(3,minmax(0,1fr));}} @media(max-width:760px){#main.overview-page .stats{grid-template-columns:repeat(2,minmax(0,1fr));}} /* Compact admin-next layout: stable page width and dense license rows */ body .workspace{scrollbar-gutter:stable;} .app-header #navigation a{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:44px;min-height:44px;line-height:20px;} .app-header #navigation svg{flex:none;} body .workspace #main{min-height:100%;} .brand-logo{display:block;flex:none;width:36px;height:36px;object-fit:contain;background:transparent;border:0;border-radius:0;} #license-table .license-grid{table-layout:fixed;width:100%;min-width:1180px;} #license-table .license-grid th,#license-table .license-grid td{box-sizing:border-box;vertical-align:middle;padding:7px 7px;font-size:12px;line-height:1.25;} #license-table .license-grid th{white-space:nowrap;} #license-table .license-grid td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #license-table .license-grid th:nth-child(1),#license-table .license-grid td:nth-child(1){width:16%;} #license-table .license-grid th:nth-child(2),#license-table .license-grid td:nth-child(2){width:6%;} #license-table .license-grid th:nth-child(3),#license-table .license-grid td:nth-child(3){width:7%;} #license-table .license-grid th:nth-child(4),#license-table .license-grid td:nth-child(4){width:5%;} #license-table .license-grid th:nth-child(5),#license-table .license-grid td:nth-child(5),#license-table .license-grid th:nth-child(6),#license-table .license-grid td:nth-child(6),#license-table .license-grid th:nth-child(7),#license-table .license-grid td:nth-child(7){width:9%;} #license-table .license-grid th:nth-child(8),#license-table .license-grid td:nth-child(8){width:9%;} #license-table .license-grid th:nth-child(9),#license-table .license-grid td:nth-child(9){width:10%;} #license-table .license-grid th:nth-child(10),#license-table .license-grid td:nth-child(10){width:6%;} #license-table .license-grid th:nth-child(11),#license-table .license-grid td:nth-child(11){width:14%;} #license-table .license-grid td:first-child{white-space:normal;overflow:visible;} #license-table .license-key-actions,#license-table .actions{display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:4px;white-space:nowrap;} #license-table .license-key-actions{margin-top:3px;} #license-table .license-key-actions .button,#license-table .actions .button,#main table .actions .button{height:28px;min-height:28px;padding:0 9px;font-size:12px;line-height:1;border-radius:7px;white-space:nowrap;} @media(max-width:760px){.app-header #navigation a{height:40px;min-height:40px;}} /* Login page only: centered, comfortable authentication card. */ body.login-page{display:block;height:100vh;height:100dvh;min-height:100dvh;overflow:auto;} body.login-page main.login-main{display:grid;place-items:center;width:100%;min-height:100vh;min-height:100dvh;max-width:none;margin:0;padding:24px;} .login-card{width:min(400px,100%);margin:0;padding:32px;} .login-card h1{margin:0 0 24px;font-size:24px;line-height:1.35;} .login-card form{display:grid;gap:18px;} .login-card label{gap:8px;} .login-card input{width:100%;height:46px;padding:0 13px;} .login-card #message{min-height:0;margin:0;color:var(--red);font-size:13px;} .login-card #message:empty{display:none;} .login-card .form-actions{display:flex;margin:2px 0 0;} .login-card .form-actions .button{width:100%;height:44px;padding:0 16px;} @media(max-width:480px){body.login-page main.login-main{padding:16px;}.login-card{padding:24px;}} @media(max-height:520px){body.login-page main.login-main{place-items:start center;padding-block:20px;}} /* Cloud content publisher: scoped to the new admin route only. */ #main .content-draft-editor{display:grid;grid-template-columns:minmax(220px,2fr) minmax(130px,1fr) minmax(150px,1fr) auto;gap:12px;align-items:end;margin-bottom:18px} #main .content-draft-editor label,#main .content-json-field{display:grid;gap:6px;color:var(--muted);font-size:12px} #main .content-draft-actions,#main .content-publish-actions{display:flex;gap:8px;flex-wrap:wrap} #main .content-json-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} #main .content-json-field{margin-top:14px} #main .content-json-field textarea{width:100%;min-height:220px;resize:vertical;background:#15161a;color:#e4e2eb;border:1px solid var(--line);border-radius:8px;padding:12px;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;tab-size:2} #main .content-meta{display:flex;gap:14px;flex-wrap:wrap;padding:10px 0;color:var(--muted);font-size:12px} #main .content-publish-actions{margin-top:14px} #main .content-draft-actions .button{min-height:38px} #main .content-draft-editor input{min-width:0} @media(max-width:1100px){#main .content-draft-editor{grid-template-columns:1fr 1fr}#main .content-draft-actions{grid-column:1/-1}} @media(max-width:760px){#main .content-json-grid{grid-template-columns:1fr}#main .content-draft-editor{grid-template-columns:1fr}#main .content-draft-actions{grid-column:auto}} @media(max-width:760px){.sidebar nav{grid-template-columns:repeat(3,minmax(0,1fr));}} /* Admin UI refinement: navigation, page headers and denser utility pages. */ .app-header #navigation{align-items:center;} .app-header #navigation a{box-sizing:border-box;display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;gap:8px;height:44px;min-height:44px;line-height:20px;padding:0 14px;border-width:1px;} .app-header #navigation a.active{height:44px;min-height:44px;padding:0 14px;} .app-header #navigation svg{width:17px;height:17px;flex:0 0 17px;} .workspace .page-heading{box-sizing:border-box;min-height:72px;margin:0 0 20px;align-items:center;} .workspace .page-heading h1{line-height:1.35;margin:0 0 5px;} .workspace .page-heading p{line-height:1.5;} /* Task filters use predictable rows; the result table scrolls horizontally when needed. */ #task-filters{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-bottom:14px;} #task-filters>select,#task-filters>input[name="license_id"],#task-filters>input[name="app_version"],#task-filters>input[name="feature_id"],#task-filters>input[name="provider"],#task-filters>input[name="model"],#task-filters>input[name="http_status"]{grid-column:span 2;width:100%;min-width:0;height:40px;} #task-filters .page-search{flex:0 0 auto;margin-left:auto;} #task-filters>.button{grid-column:span 2;width:100%;height:40px;padding:0 12px;} #task-table{min-width:0;overflow:auto;} #task-table>.table-wrap{width:100%;min-width:0;overflow:visible;} #task-table table{width:100%;min-width:1500px;table-layout:fixed;} #task-table th,#task-table td{box-sizing:border-box;} #task-table th:nth-child(1),#task-table td:nth-child(1){width:190px;} #task-table th:nth-child(2),#task-table td:nth-child(2){width:155px;} #task-table th:nth-child(3),#task-table td:nth-child(3){width:125px;} #task-table th:nth-child(4),#task-table td:nth-child(4){width:95px;} #task-table th:nth-child(5),#task-table td:nth-child(5){width:155px;} #task-table th:nth-child(6),#task-table td:nth-child(6){width:110px;} #task-table th:nth-child(7),#task-table td:nth-child(7){width:185px;} #task-table th:nth-child(8),#task-table td:nth-child(8){width:90px;} #task-table th:nth-child(9),#task-table td:nth-child(9){width:95px;} #task-table th:nth-child(10),#task-table td:nth-child(10){width:80px;} #task-table th:nth-child(11),#task-table td:nth-child(11){width:220px;white-space:normal;overflow-wrap:anywhere;} /* Release empty state: useful guidance without a tall, empty table shell. */ .release-empty{display:grid;justify-items:center;gap:10px;padding:28px 20px 24px;text-align:center;} .release-empty h3{font-size:16px;font-weight:600;color:var(--text);} .release-empty p{max-width:440px;font-size:13px;line-height:1.6;} .release-empty .button{margin-top:4px;min-height:38px;} #main:has(.release-empty)>.panel{padding:18px 22px;margin-bottom:16px;} #main:has(.release-empty)>.panel .panel-head{margin-bottom:8px;} /* More room for date values and action controls in the license list. */ #license-table .license-grid{min-width:1450px;} #license-table .license-grid th,#license-table .license-grid td{padding:8px 8px;} #license-table .license-grid th:nth-child(1),#license-table .license-grid td:nth-child(1){width:12%;} #license-table .license-grid th:nth-child(2),#license-table .license-grid td:nth-child(2){width:5%;} #license-table .license-grid th:nth-child(3),#license-table .license-grid td:nth-child(3){width:5%;} #license-table .license-grid th:nth-child(4),#license-table .license-grid td:nth-child(4){width:4%;} #license-table .license-grid th:nth-child(5),#license-table .license-grid td:nth-child(5),#license-table .license-grid th:nth-child(6),#license-table .license-grid td:nth-child(6),#license-table .license-grid th:nth-child(7),#license-table .license-grid td:nth-child(7),#license-table .license-grid th:nth-child(9),#license-table .license-grid td:nth-child(9){width:10.5%;} #license-table .license-grid th:nth-child(8),#license-table .license-grid td:nth-child(8){width:7%;} #license-table .license-grid th:nth-child(10),#license-table .license-grid td:nth-child(10){width:4%;} #license-table .license-grid th:nth-child(11),#license-table .license-grid td:nth-child(11){width:16%;} #license-table .license-grid td:nth-child(5),#license-table .license-grid td:nth-child(6),#license-table .license-grid td:nth-child(7),#license-table .license-grid td:nth-child(9){font-size:11px;} #license-table .license-key-actions,#license-table .actions{gap:6px;} #license-table .license-grid .actions .button{padding-inline:9px;} @media(max-width:1250px) and (min-width:761px){ #task-filters{grid-template-columns:repeat(6,minmax(0,1fr));} #task-filters>select{grid-column:span 3;} #task-filters>input[name="license_id"],#task-filters>input[name="app_version"],#task-filters>input[name="feature_id"],#task-filters>input[name="provider"],#task-filters>input[name="model"],#task-filters>input[name="http_status"]{grid-column:span 2;} #task-filters>input[name="q"]{grid-column:span 3;} #task-filters>.button{grid-column:span 1;padding-inline:6px;} } @media(max-width:760px){ .workspace .page-heading{min-height:64px;margin-bottom:16px;} #task-filters{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;} #task-filters>select,#task-filters>input[name="license_id"],#task-filters>input[name="app_version"],#task-filters>input[name="feature_id"],#task-filters>input[name="provider"],#task-filters>input[name="model"],#task-filters>input[name="http_status"]{grid-column:span 1;} #task-filters>input[name="q"]{grid-column:1/-1;} #task-filters>.button{grid-column:span 1;} } #release-form #pkg-file,#release-form #ccx-file{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;overflow:hidden;cursor:pointer;white-space:nowrap;border:0;opacity:0;} #release-form .release-warning{position:relative;margin:11px 0 0;padding:10px 12px 10px 34px;border:1px solid var(--line);border-radius:7px;background:#17181c;color:var(--muted);font-size:11px;line-height:1.55;} #release-form .release-warning:before{position:absolute;top:10px;left:12px;display:grid;width:14px;height:14px;place-items:center;border:1px solid currentColor;border-radius:50%;content:"i";font-size:10px;font-weight:600;line-height:1;} @media(max-width:760px){#release-form .file-upload-field{padding:12px;}#release-form .file-upload-content{gap:10px;}#release-form .file-upload-button{padding:8px 10px;}#release-form .release-setting-row{grid-template-columns:minmax(0,1fr);gap:8px;padding:10px 0;}#release-form .release-setting-row>input[type=checkbox]{justify-self:start;}#release-form .release-setting-row>select{width:100%;}} /* Responsive admin shell. Breakpoints follow the usable main container. */ body .app-header{display:flex;flex-wrap:nowrap;gap:20px;flex:0 0 88px;padding:16px 24px;} .app-header .brand{flex:0 0 auto;white-space:nowrap;font-size:25px;} .app-header #navigation{display:flex;flex:0 1 auto;flex-wrap:nowrap;margin-left:auto;gap:6px;grid-column:auto;grid-row:auto;min-width:0;} .app-header .account-menu{flex:0 0 auto;grid-column:auto;grid-row:auto;} .app-header #navigation a{padding-inline:10px;} .app-header #navigation .menu-items a{justify-content:flex-start;width:100%;height:40px;min-height:40px;} .ui-icon{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;} .ui-menu{position:relative;flex:0 0 auto;} .ui-menu summary{list-style:none;cursor:pointer;} .ui-menu summary::-webkit-details-marker{display:none;} .ui-menu.active>summary{background:#262f3d;border-color:#334156;color:#b9d3fa;} .ui-menu .menu-items{position:fixed;z-index:40;width:210px;max-width:calc(100vw - 24px);padding:6px;border:1px solid #41444a;border-radius:9px;background:#292a30;box-shadow:0 12px 32px #0006;overflow-y:auto;} .ui-menu:not([open])>.menu-items{display:none;} .ui-menu .menu-items .button{display:flex;width:100%;justify-content:flex-start;border:0;background:transparent;white-space:normal;text-align:left;} .ui-menu .menu-items .button:hover{background:#34383f;} .ui-menu summary:focus-visible{outline:2px solid var(--purple);outline-offset:3px;} body .workspace #main{width:100%;min-width:0;container-type:inline-size;container-name:admin;} #main .table-wrap{min-width:0;contain:none;overflow:visible;} #main table{min-width:0;table-layout:fixed;} #main th,#main td,#dialog-body td{overflow-wrap:anywhere;} #main .actions{gap:6px;align-items:center;} #main .release-actions .button,#main .license-actions .button{height:28px;min-height:28px;padding:0 9px;border-width:1px;border-radius:7px;font-size:12px;font-weight:500;line-height:18px;} #main .release-grid th:last-child{width:42%;} #license-table .license-grid{width:100%;min-width:0;} #license-table .license-grid th:nth-child(1),#license-table .license-grid td:nth-child(1){width:19%;} #license-table .license-grid th:nth-child(11),#license-table .license-grid td:nth-child(11){width:16%;} #license-table .license-grid th:nth-child(n+5):nth-child(-n+9),#license-table .license-grid td:nth-child(n+5):nth-child(-n+9){width:8%;} .license-key-line{display:flex;align-items:center;gap:6px;min-width:0;} .license-key-text{flex:1;min-width:0;overflow-wrap:anywhere;} #license-table .license-key-actions,.license-key-actions{display:flex;flex:0 0 auto;gap:2px;align-items:center;} .key-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:0 0 28px;padding:0;border:0;background:transparent;color:var(--muted);border-radius:5px;} .key-icon:hover{background:transparent;color:var(--purple);} .release-folded{display:none;} #main .toolbar{min-width:0;} #main .license-filters{flex-wrap:wrap;gap:4px;} #main .search{width:min(100%,300px);min-width:0;} #main .setting-row>div{min-width:0;overflow-wrap:anywhere;} #main .content-meta,#main code,#main .hint,#dialog-body{overflow-wrap:anywhere;} #main .content-draft-editor{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);} #main .content-draft-actions{grid-column:1/-1;} #task-table table{min-width:0;width:100%;} #task-table th:nth-child(n),#task-table td:nth-child(n){width:auto;} #task-table th:first-child,#task-table td:first-child{width:15%;} #task-table .button{white-space:normal;text-align:left;overflow-wrap:anywhere;max-width:100%;} dialog{width:min(760px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:24px;} #dialog-body .table-wrap{max-width:100%;overflow:visible;} #dialog-body table{min-width:0;table-layout:fixed;} #dialog-body .setting-row{gap:10px;} #dialog-body .setting-row>div{min-width:0;overflow-wrap:anywhere;} @container admin (max-width:1199px){ #license-table .license-grid th:nth-child(n+5):nth-child(-n+10),#license-table .license-grid td:nth-child(n+5):nth-child(-n+10){display:none;} #license-table .license-grid th:first-child,#license-table .license-grid td:first-child{width:36%;} #license-table .license-grid th:nth-child(2),#license-table .license-grid td:nth-child(2){width:14%;} #license-table .license-grid th:nth-child(3),#license-table .license-grid td:nth-child(3){width:14%;} #license-table .license-grid th:nth-child(4),#license-table .license-grid td:nth-child(4){width:10%;} #license-table .license-grid th:last-child,#license-table .license-grid td:last-child{width:26%;} #main.overview-page .stats{grid-template-columns:repeat(3,minmax(0,1fr));} #main .release-grid th:last-child{width:45%;} .release-direct{display:none;}.release-folded{display:block;} #task-filters{grid-template-columns:repeat(3,minmax(0,1fr));} #task-filters>input[name],#task-filters>select,#task-filters>.button{grid-column:span 1;} #task-filters>input[name=q]{grid-column:1/-1;} } @container admin (max-width:699px){ #main .page-heading{flex-wrap:wrap;gap:12px;} #main .panel-head{flex-wrap:wrap;} #main .search{width:100%;} #main .grid-two,#main .content-json-grid,#main .content-draft-editor{grid-template-columns:minmax(0,1fr);} #main.overview-page .stats{grid-template-columns:repeat(2,minmax(0,1fr));} #main .stat-value{font-size:26px;overflow-wrap:anywhere;} #main table,#main tbody,#main tr,#main td{display:block;width:100%!important;} #main thead{display:none;} #main tbody tr{padding:12px 0;border-bottom:1px solid var(--line);} #main tbody tr:last-child{border-bottom:0;} #main td{border:0;padding:5px 0!important;font-size:13px;} #main td::before{content:attr(data-label);display:block;color:var(--muted);font-size:11px;margin-bottom:3px;} #main td.empty::before{display:none;} #license-table tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 10px;} #license-table td:first-child,#license-table td:last-child{grid-column:1/-1;} #license-table td:first-child::before,#license-table td:last-child::before{display:none;} #license-table .license-actions{justify-content:flex-end;} #task-filters{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;} #main.tasks-page .task-records-panel{overflow:visible;} #task-table th{position:static;} } @media(max-width:767px){ body .app-header{flex-basis:76px;padding:12px 14px;gap:10px;} .app-header .brand{font-size:20px;gap:8px;} .app-header .brand-logo{width:28px;height:28px;} .app-header .brand small{font-size:8px;margin-top:4px;} .app-header .account-menu summary>span:not(.account-avatar){display:none;} .app-header .account-menu summary{padding:4px;gap:4px;} .app-header #navigation>details>summary{padding:6px 9px;font-size:12px;} body .workspace #main{padding:16px 14px;} body .workspace #main.tasks-page{overflow:visible;height:auto;min-height:100%;} body .workspace.tasks-workspace{display:block;overflow-y:auto;} #main.tasks-page .task-records-panel{flex:none;} .task-records-panel>#task-table{max-height:65dvh;min-height:180px;overflow-y:auto;} dialog{padding:18px;} .form-grid{grid-template-columns:1fr;}.form-grid .full{grid-column:auto;} } .license-direct{display:flex;gap:6px;}.license-folded{display:none;} @container admin (max-width:1199px){.license-direct{display:none;}.license-folded{display:block;}} /* Popover top layer escapes container-query containing blocks and table clipping. */ .ui-menu .menu-items{margin:0;inset:auto;color:var(--text);} #license-table .license-grid td{white-space:normal;overflow:visible;text-overflow:clip;} #license-table .license-grid th:last-child,#license-table .license-grid td:last-child{width:22%;} #license-table .actions{flex-wrap:wrap;} #license-table .license-key-actions{margin-top:0;} @container admin (max-width:1199px){#license-table .license-grid th:last-child,#license-table .license-grid td:last-child{width:26%;}} .app-header #navigation .ui-icon{display:block;width:16px;height:16px;flex:0 0 16px;} .note-preview{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;} /* Five primary product sections; reuse existing tokens and control styles. */ .section-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px} .section-nav a.selected{border-color:var(--accent,#89b6fa);color:#b9d5ff;background:#263141} .entry-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px} .entry-card{display:block;text-decoration:none;color:inherit}.entry-card>.ui-icon{width:24px;height:24px}.entry-card p{color:var(--muted)} .wallet-summary{display:flex;flex-wrap:wrap;gap:16px;padding:16px 0}.wallet-summary span{display:flex;gap:8px;align-items:center}.wallet-summary strong{font-size:22px} .customer-license{border-top:1px solid #34383e;padding:16px 0}.customer-license .actions{margin:12px 0}.back-link{display:inline-block;margin:0 0 16px;color:#b5cdf2} #dialog-body .panel{margin:12px 0}#dialog-body .license-key-line{max-width:100%} /* Content tabs sit below the common page heading. */ .section-nav{gap:6px;margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid var(--border,#303338)} .section-nav .button{min-height:34px;padding:6px 10px;font-size:13px} .app-header #navigation{flex:1 1 0;justify-content:flex-end} .app-header #navigation>.nav-collapse{flex:0 0 auto} .advanced-config{border:1px solid var(--border,#303338);border-radius:10px;padding:16px;margin-top:20px} .advanced-config>summary{cursor:pointer;font-weight:600} .advanced-config .panel{margin-top:16px} #dialog-body form{display:grid;gap:14px} #dialog-body label{display:grid;gap:8px} #dialog-body .panel{margin-bottom:16px} #main #task-filters{display:flex;align-items:center;flex-wrap:wrap;gap:10px;} #main #task-filters>select{flex:0 0 145px;width:auto;height:40px;} #main #task-filters>input[name="q"]{flex:1 1 360px;width:auto;min-width:min(100%,300px);height:40px;} #main #task-filters>.button{flex:0 0 auto;width:auto;height:40px;} @container admin (max-width:767px){ #main #task-filters>select{flex:1 1 calc(50% - 10px);min-width:0;} #main #task-filters>input[name="q"]{flex:1 1 100%;min-width:0;} } #dialog-body>.content-modal-section{margin:10px 0;border:1px solid var(--line);border-radius:9px;background:#191a1e;} #dialog-body>.content-modal-section>summary{padding:12px 15px;color:var(--text);font-weight:600;cursor:pointer;} #dialog-body>.content-modal-section[open]>summary{border-bottom:1px solid var(--line);} #dialog-body>.content-modal-section>.panel{margin:0;padding:14px 15px;border:0;background:transparent;} #dialog-body>.content-modal-section>.panel .panel-head{display:none;} /* Customer page: compact search and aligned, consistently iconized controls. */ #main .customer-page-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap} #main .customer-page-actions>.button, #main .customer-page-actions>.ui-menu>summary{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:36px;min-height:36px;padding:0 12px;gap:8px;font-size:13px;font-weight:600;line-height:1;border-radius:8px;white-space:nowrap} #main .customer-page-actions>.ui-menu{display:block} #main .customer-page-actions .ui-icon{width:16px;height:16px;flex:0 0 16px;stroke-width:1.7} #main .customer-page-search{display:flex;align-items:center;justify-content:flex-end;flex:0 0 auto;min-width:0;margin-left:auto} #main .customer-page-search #customer-search{box-sizing:border-box;width:240px;height:34px;min-height:34px;margin:0;padding:0 10px;line-height:32px} #main .customer-page-search #customer-search:focus, #main .page-search input:focus,#main .page-search input:focus-visible{outline:none;outline-offset:0;box-shadow:none;border-color:var(--purple)} @container admin (max-width:620px){#main .customer-page-search{flex:1 1 100%;min-width:0}.panel-head:has(.customer-page-search){align-items:stretch;flex-wrap:wrap}} /* ========================================================================== 2026-10-13 统一按钮与控件规范（A–F 级；只加共享规则，不给单个按钮写样式） A 顶部一级导航 40px · B 页面主要操作 34px · C 面板/工具条常规 32px D 筛选/状态切换 30px · E 表格行内 28px · F 危险操作沿用 E 级尺寸 + 警示色 ========================================================================== */ :root{--btn-h-a:44px;--btn-h-b:34px;--btn-h-c:32px;--btn-h-d:30px;--btn-h-e:28px;--btn-r:7px;--btn-gap:8px;--btn-gap-tight:6px;--btn-icon:15px;} .button{display:inline-flex;align-items:center;justify-content:center;gap:var(--btn-gap-tight);height:var(--btn-h-c);min-height:var(--btn-h-c);padding:0 14px;border-radius:var(--btn-r);font-size:13px;font-weight:500;line-height:1;box-sizing:border-box;vertical-align:middle;} .button svg{width:var(--btn-icon);height:var(--btn-icon);flex:0 0 auto;} .button.small{height:var(--btn-h-e);min-height:var(--btn-h-e);padding:0 10px;font-size:12px;} .button.small svg{width:13px;height:13px;} /* A 级：顶部一级导航 */ .app-header #navigation a{display:inline-flex;align-items:center;gap:var(--btn-gap-tight);height:var(--btn-h-a);min-height:var(--btn-h-a);padding:0 14px;border-radius:var(--btn-r);font-size:13px;} .app-header #navigation a svg{width:16px;height:16px;} /* B 级：页面主要操作（标题行 / 面板头） */ .page-heading .button,.page-heading>.button,.panel-head>.actions .button:not(.small){height:var(--btn-h-b);min-height:var(--btn-h-b);padding:0 16px;font-size:13px;} /* C 级：工具条与面板内常规操作 */ .toolbar>.button,.panel>.button:not(.small){height:var(--btn-h-c);min-height:var(--btn-h-c);} /* D 级：筛选与状态切换 */ .tabs button{height:var(--btn-h-d);min-height:var(--btn-h-d);padding:0 12px;font-size:12px;border-radius:6px;} .toolbar select{height:var(--btn-h-d);min-height:var(--btn-h-d);padding:0 10px;font-size:12px;} /* E/F 级：表格行内操作（危险操作只换色，不改尺寸） */ #main table .actions{display:flex;align-items:center;gap:var(--btn-gap-tight);flex-wrap:nowrap;} #main table .actions .button{height:var(--btn-h-e);min-height:var(--btn-h-e);padding:0 9px;font-size:12px;line-height:1;} #main table .actions .button svg{width:13px;height:13px;} #main table .actions .button.danger{color:var(--red);border-color:#5c3138;} #main table .actions .button.danger:hover{background:#3a252b;border-color:#7c414b;color:#ff9aa8;} /* 搜索框（客户管理 / 任务记录）：240×34、靠右、单层聚焦边框、无多余上下留白 */ #main .page-search{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-left:auto;flex:0 0 auto;min-width:0;} #main .page-search input, #main .page-search input[type="search"], #main.commercial-page .page-search input[type="search"]{box-sizing:border-box;width:240px;height:34px;min-height:34px;margin:0;padding:0 10px;font-size:13px;line-height:32px;border-radius:var(--btn-r);} #main .page-search input:focus,#main .page-search input:focus-visible{outline:none;outline-offset:0;box-shadow:none;border-color:var(--purple);} .panel-head:has(.page-search){margin-bottom:14px;} #task-filters.toolbar{margin-bottom:14px;} /* ========================================================================== 2026-10-13 第二轮统一（按用户截图圈选范围）： · 分段控件（全部/充值/消费/退款）= **一个外框**，段内高亮，与相邻按钮同高； · 页面主操作 34 / 工具条操作 32 / 行内操作 28，同级唯一； · 所有输入框与搜索框统一 34px、圆角 7px、同一焦点样式（单层边框）； · 状态徽标统一 22px 高、同一内边距与圆点尺寸。 ========================================================================== */ /* 分段控件：单个外框 + 段内高亮 */ #main .tabs{display:inline-flex;align-items:center;gap:3px;height:34px;padding:3px;border:1px solid var(--line);border-radius:7px;background:#141519;box-sizing:border-box;} #main .tabs button{height:26px;min-height:26px;padding:0 12px;border-radius:5px;font-size:12px;line-height:1;border:0;background:none;color:var(--muted);} #main .tabs button.selected{background:#30363f;color:#c2d8f9;} /* 工具条与面板内的普通操作：C 级（与分段控件同高对齐） */ #main .toolbar>.button,#main .toolbar .button.small,#main .panel-head .actions .button:not(.small),#main .panel>.button:not(.primary){height:34px;min-height:34px;padding:0 12px;font-size:12px;} /* 页面主操作：B 级 */ #main .page-heading .actions .button,#main .page-heading>.button,#main .page-heading .button.small{height:34px;min-height:34px;padding:0 14px;font-size:13px;border-radius:7px;} /* 状态徽标统一 */ .badge{height:22px;padding:0 8px;border-radius:5px;font-size:12px;line-height:22px;box-sizing:border-box;gap:5px;} .badge:before{width:5px;height:5px;flex:0 0 5px;} /* 表单控件（含所有搜索框）：统一 34px / 圆角 7 / 单层聚焦边框 */ #main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),#main select{height:34px;min-height:34px;padding:0 10px;font-size:13px;border-radius:7px;box-sizing:border-box;} #main input:focus,#main select:focus,#main input:focus-visible,#main select:focus-visible{outline:none;outline-offset:0;box-shadow:none;border-color:var(--purple);} /* ========================================================================== 2026-10-13 第三轮：六个一级页面跨页对齐 + 表格精修 + 文字层级 + 长名单行省略 ========================================================================== */ :root{--head-min-h:76px;--head-gap:20px;} /* 页头：所有页面同一高度、同一起点，切页不跳动 */ #main .page-heading{min-height:var(--head-min-h);display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin:0 0 var(--head-gap);} #main .page-heading h1{font-size:24px;font-weight:600;line-height:32px;letter-spacing:.01em;margin:0 0 6px;} #main .page-heading p{font-size:13px;line-height:20px;margin:0;max-width:920px;} #main .page-heading .actions{align-items:flex-start;flex-wrap:nowrap;} /* 页头之后的第一块内容统一起点 */ #main .page-heading + .panel,#main .page-heading + .stats,#main .page-heading + p,#main .page-heading + .grid-two{margin-top:0;} #main .stats{margin:0 0 20px;} #main .stat{padding:18px 20px;} #main .stat-value{font-size:28px;line-height:1.25;font-weight:500;margin:8px 0;} #main .stat-label{font-size:12px;line-height:18px;} #main .stat-note{font-size:12px;line-height:1.5;} /* 表格：压缩行高、统一表头、统一单元格间距 */ #main table th{height:40px;padding:0 12px;font-size:12px;font-weight:500;color:#9a9ba8;background:#202126;white-space:nowrap;} #main table td{padding:10px 12px;font-size:13px;line-height:18px;} #main .panel{padding:20px 22px;margin-bottom:20px;} #main .panel-head{margin-bottom:16px;} #main .panel-head h2{font-size:15px;font-weight:600;} /* 客户名称超长：单行省略（完整名称仍可通过悬停 title 与「详情」查看） */ #main .customer-name-button{max-width:220px;min-width:0;overflow:hidden;} #main .customer-name{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* 统一灰阶文字层级（沿用现有深紫主题，不引入新色系） */ #main h2{color:#e8e8ee;} #main td{color:#cfcfda;} #main .hint,#main .muted,.stat-note{color:#8d8e9c;} /* 对齐收口：概览页头高度与其余五页一致；任务页第一块内容不再多出上边距 */ #main.overview-page .page-heading{min-height:var(--head-min-h);} #main.overview-page .page-heading>h1{margin:0 0 6px;} #main.tasks-page .page-heading+header,#main.tasks-page .page-heading+section,#main.tasks-page .page-heading+.panel,#main.tasks-page .page-heading+.task-records-panel{margin-top:0;} /* ========================================================================== 2026-10-13 第四轮（按用户标注）：① logo 与一级导航垂直居中对齐； ② 页头（标题+按钮）与下方面板左右边缘严格对齐；③ 页头与内容整体下移。 ========================================================================== */ .app-header .brand{align-self:center;display:inline-flex;align-items:center;height:var(--btn-h-a);min-height:var(--btn-h-a);padding:0;box-sizing:border-box;} .app-header .brand span{line-height:1;} #main{padding-top:48px;} /* ③ 页头与内容整体下移（六页一致，不破坏对齐） */ #main .page-heading{padding:0;margin:0 0 var(--head-gap);align-items:flex-start;} #main .page-heading .actions{margin:0;} /* 页头与面板同宽：两侧留白一致，右侧按钮与面板右边缘对齐 */ #main>.page-heading,#main>.stats,#main>.panel,#main>.grid-two{box-sizing:border-box;} /* 页头上方统一留白：覆盖各页面类里的 12px（六页一致，整体下移） */ #main,body>#main,#main.commercial-page,#main.overview-page,#main.tasks-page{padding-top:48px;} /* 页头上方留白收口：覆盖 body .workspace #main 的 12px（同级选择器 + 更靠后） */ body .workspace #main{padding-top:48px;} /* 2026-10-13 第五轮（用户标注：去掉页头与面板之间的空白缝；页头与面板“内容”左右对齐） */ :root{--head-gap:0px;} #main .page-heading{padding:0 22px;} /* 与面板 padding 一致 ⇒ 标题左/按钮右 与表格、搜索框对齐 */ #main .page-heading+.panel,#main .page-heading+.stats,#main .page-heading+.task-records-panel{margin-top:0;} #main .panel{margin-top:0;} /* 页头与面板内容对齐收口：页头内边距 = 面板 24px；去掉面板 20px 上边距（那条空缝） */ #main .page-heading{padding:0 24px;} #main.commercial-page .page-heading{margin-bottom:0;} #main.commercial-page .panel{margin-top:0;} #main.commercial-page .panel:first-of-type{margin-top:0;} /* 左线收口：logo / 页头标题 / 面板 三者左边缘同为 40px（右侧按钮与面板外框右边缘对齐） */ #main .page-heading{padding:0;} #main.commercial-page .page-heading{padding:0;} body .workspace #main .page-heading{padding:0;} .app-header .brand{padding-left:0;} /* 页头：右侧按钮底边与左侧说明文字底边对齐 */ #main .page-heading{align-items:flex-end;} #main .page-heading .actions{margin-bottom:0;align-self:flex-end;} body .workspace #main .page-heading{align-items:flex-end;} /* 页头与面板之间恢复合理间距（16px），不再贴在一起；内容框仍撑满到页面底部 */ :root{--head-gap:16px;} #main .page-heading{margin:0 0 var(--head-gap);} #main.commercial-page .page-heading{margin-bottom:var(--head-gap);} #main .customer-name-button:hover{background:transparent;color:#fff;text-decoration:underline;text-underline-offset:3px;} /* 左上角 logo 与下方内容同一条左线（40px） */ .app-header{padding-left:40px;} .app-header .brand,.app-header .brand img{margin-left:0;padding-left:0;} /* logo 与内容同一条左线：头部与主区左内边距在所有宽度下都取 40px（覆盖窄屏的 24px） */ .app-header{padding-left:40px !important;} body .workspace #main{padding-left:40px;} /* 左上角品牌：单行 XuangJing Ai；文字基线盒底（g 的下缘）与 logo 最底对齐 */ .app-header .brand{align-items:flex-end;gap:10px;} .app-header .brand span{font-size:20px;font-weight:600;line-height:1;letter-spacing:.01em;padding-bottom:0;} .app-header .brand small{display:none;} .app-header .brand img{display:block;} /* 版本发布：安装包（PKG … · CCX …）保持一排，不换行 */ #main .release-grid td,#main .release-grid th{white-space:nowrap;} #main .release-grid td:nth-child(4){min-width:210px;} /* 顶部留白收紧：页头与导航之间不再有大片空白（六页一致） */ body .workspace #main{padding-top:20px;} #main,body>#main,#main.commercial-page,#main.overview-page,#main.tasks-page{padding-top:20px;} /* 顶部导航右端与内容右边缘对齐（与左线同为 40px） */ .app-header{padding-right:40px !important;} .account-menu{margin-right:0;} /* 内容区右内边距与导航统一为 40px（左右对称） */ body .workspace #main{padding-right:40px;} /* 导航右端再左移 15px，与内容右边缘严格对齐 */ .app-header{padding-right:55px !important;} /* 筛选/状态切换：拆成各自独立的小卡片按钮（不再共用一个外框） */ #main .tabs{display:flex;align-items:center;gap:8px;height:auto;padding:0;border:0;background:none;border-radius:0;} #main .tabs button{height:34px;min-height:34px;padding:0 14px;border:1px solid #3c3d46;border-radius:7px;background:#25262c;color:var(--muted);font-size:12px;line-height:1;} #main .tabs button:hover{background:#30313a;border-color:#5b5c68;color:var(--text);} #main .tabs button.selected{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:500;} /* 二级页面改为页面内联区块（深色卡片，不再遮挡页面、不再有白色原生弹窗感） */ #dialog::backdrop{background:transparent;} #dialog .dialog-head{border-bottom:1px solid var(--line);} /* 表单控件分档：普通字段整宽 36px；短字段（天数/数量）窄档；日期字段不被自带样式挤成两截 */ #main label input,#main label select{width:100%;height:34px;min-height:34px;padding:0 10px;box-sizing:border-box;} #main label textarea{width:100%;min-height:96px;padding:8px 10px;box-sizing:border-box;} #main input[type="date"],#main input[type="datetime-local"],#main input[type="time"]{width:100%;min-width:0;height:36px;} #main .form-grid{gap:16px 20px;align-items:start;} #main .form-grid .short input,#main input[name="validDays"],#main input[name="days"]{max-width:140px;} /* 二级页面内联到页面里（稳定宿主，换页不重建；不遮罩、不浮层） */ #xj-action-host{display:block;width:100%;} #dialog::backdrop{background:transparent;} #xj-action-host:empty{display:none;} /* 自绘深色确认框（替换浏览器原生白色弹窗） */ #xj-confirm{width:min(420px,92vw);border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);padding:20px 22px;box-shadow:0 18px 48px #0008;} #xj-confirm::backdrop{background:#0009;} #xj-confirm p{margin:0 0 18px;color:var(--text);font-size:14px;line-height:1.6;} #xj-confirm .xj-confirm-actions{display:flex;justify-content:flex-end;gap:10px;} /* 二级页面内联区块：作为页面里一张正常卡片展开（不再挤在下面、字段不再错位） */ #xj-action-host{display:block;width:100%;margin:20px 0 0;} #dialog .dialog-heading{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--line);} #dialog #dialog-title{font-size:15px;font-weight:600;margin:0;} #dialog .dialog-heading .icon-button{font-size:18px;line-height:1;} #dialog #dialog-body{padding:20px 22px;} #dialog #dialog-body .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;} #dialog #dialog-body .form-grid .full{grid-column:1/-1;} #dialog #dialog-body label{display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--muted);} #dialog #dialog-body input,#dialog #dialog-body select{width:100%;height:36px;box-sizing:border-box;padding:0 10px;} #dialog #dialog-body textarea{width:100%;min-height:84px;box-sizing:border-box;padding:8px 10px;} #dialog #dialog-body .form-actions,#dialog #dialog-body .dialog-actions,#dialog #dialog-body .actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;} #dialog #dialog-body table{margin-top:4px;} /* 收口：面板不再强行撑满整屏（否则内联卡片会被推到页面最底部）；内联卡片紧跟内容之后 */ #main>.panel:last-of-type{flex:0 0 auto;min-height:0;} #xj-action-host{margin-top:16px;} /* 主区不再强制 100% 高（否则内联卡片会被顶到页面最底部） */ body .workspace #main{min-height:0;} /* 二级弹窗恢复标准模态：居中 + 半透明遮罩；内容过长才内部滚动；不撑大主页面、不留占位 */ #xj-action-host{display:none !important;} /* 已不再使用，彻底不占位 */ #dialog::backdrop{background:rgba(0,0,0,.55);} #dialog .dialog-heading{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--line);} #dialog #dialog-title{font-size:15px;font-weight:600;margin:0;} #dialog #dialog-body{padding:20px 22px;max-height:calc(82vh - 57px);overflow:auto;overscroll-behavior:contain;} #dialog #dialog-body .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;} #dialog #dialog-body .form-grid .full{grid-column:1/-1;} #dialog #dialog-body label{display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--muted);} #dialog #dialog-body input,#dialog #dialog-body select{width:100%;height:36px;box-sizing:border-box;padding:0 10px;} #dialog #dialog-body textarea{width:100%;min-height:84px;box-sizing:border-box;padding:8px 10px;} #dialog #dialog-body .form-actions,#dialog #dialog-body .dialog-actions,#dialog #dialog-body .actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;} #xj-confirm{position:fixed;inset:0;margin:auto;width:min(420px,92vw);height:fit-content;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);padding:20px 22px;box-shadow:0 18px 48px #000a;} #xj-confirm::backdrop{background:rgba(0,0,0,.55);} /* 二级弹窗容器（唯一一套，不再叠加）：居中、宽 600px、上限 = 视口 - 32px、高度随内容、内部滚动 */ #dialog{position:fixed;inset:0;margin:auto;width:min(600px,calc(100vw - 32px));max-width:calc(100vw - 32px);height:fit-content;max-height:82vh;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);box-shadow:0 24px 64px #000a;overflow:hidden;} #dialog[open]{display:block;width:min(600px,calc(100vw - 32px));max-width:calc(100vw - 32px);margin:auto;} #dialog::backdrop{background:rgba(0,0,0,.55);} /* 弹窗内输入内容用白色，日期/时间不再发灰 */ #dialog #dialog-body input,#dialog #dialog-body select,#dialog #dialog-body textarea{color:#fff;} #dialog #dialog-body input[type="datetime-local"],#dialog #dialog-body input[type="date"],#dialog #dialog-body input[type="time"]{color:#fff;} /* 全站搜索框统一：任何宽度下都固定 240×34（窄屏 760 以下才整宽），不再被媒体查询压窄 */ /* 【2026-10-13 用户：搜索框太大了】200×34 / 13px 收到 176×30 / 12px： 高度与字号改用设计系统里现成的 --btn-h-d 一档（30px 工具栏 select、tabs 同一档）， 宽度收到刚好容下占位符「搜索客户 / 授权码 / 备注」，去掉右侧那一大片空白。 窄屏（760 以下）仍走下面的整宽规则。 */ #main .page-search input,#main .customer-page-search #customer-search,#main #task-filters .page-search input{ width:176px;min-width:176px;flex:0 0 176px;height:30px;min-height:30px;box-sizing:border-box;padding:0 10px;font-size:12px;line-height:28px;border-radius:6px;} #main .page-search{flex:0 0 auto;min-width:0;} @media(max-width:760px){#main .page-search input,#main .customer-page-search #customer-search,#main #task-filters .page-search input{width:100%;min-width:0;flex:1 1 auto;}} #main .expiry-cell{height:auto;min-height:0;padding:2px 6px;border:1px dashed transparent;background:transparent;color:var(--text);font-size:13px;font-weight:400;border-radius:6px;justify-content:flex-start;} #main .expiry-cell:hover{border-color:#5b5c68;background:#23242b;} #main .expiry-input{width:168px;height:30px;min-height:30px;box-sizing:border-box;padding:0 8px;font-size:12px;border-radius:6px;background:#17181c;color:#fff;border:1px solid #3c3d46;} #main .expiry-input:focus{border-color:var(--accent);outline:none;} #main .expiry-cell{color:var(--text);font-size:13px;} /* 有效期：表格内下拉直接改 */ #main .valid-input{width:104px;height:30px;min-height:30px;box-sizing:border-box;padding:0 6px;font-size:12px;border-radius:6px;background:#17181c;color:#fff;border:1px solid #3c3d46;} #main .valid-input:focus{border-color:var(--accent);outline:none;} /* ① 恢复主区高度约束：任务记录/概览表格恢复内部滚动（页面不再"滑不动"）② 时间列去掉外框 */ body .workspace #main{min-height:100%;} #main.tasks-page .task-records-panel{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden;} #main.tasks-page .task-records-panel>#task-table{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;} #main .task-records-panel table td:first-child,#main .task-records-panel table td:first-child *{border:0 !important;background:transparent !important;border-radius:0 !important;padding-left:0;} #xj-wheel{position:fixed;inset:0;margin:auto;width:min(420px,92vw);height:fit-content;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);box-shadow:0 24px 64px #000a;overflow:hidden;} #xj-wheel::backdrop{background:rgba(0,0,0,.55);} #xj-wheel .xj-wheel-head{padding:14px 20px;border-bottom:1px solid var(--line);font-size:14px;font-weight:600;} #xj-wheel .xj-wheel-body{display:flex;gap:6px;padding:12px 16px 4px;} #xj-wheel .xj-colwrap{flex:1 1 0;display:flex;flex-direction:column;align-items:center;min-width:0;} #xj-wheel .xj-col{height:160px;width:100%;overflow-y:auto;scrollbar-width:none;text-align:center;} #xj-wheel .xj-col::-webkit-scrollbar{display:none;} #xj-wheel .xj-item{height:32px;line-height:32px;font-size:13px;color:#8f90a0;} #xj-wheel .xj-item.on{color:#fff;font-weight:600;background:#23242b;border-radius:6px;} #xj-wheel .xj-collabel{font-size:11px;color:var(--muted);margin-top:4px;} #xj-wheel .xj-wheel-actions{display:flex;justify-content:flex-end;gap:10px;padding:12px 16px 16px;} @container admin (max-width:820px){#main .release-inline-grid{grid-template-columns:minmax(0,1fr);}} /* 到期时间滚轮：只保留 年/月/日 三列，列更宽更好点 */ #xj-wheel{width:min(380px,92vw);} #xj-wheel .xj-wheel-body{gap:10px;padding:12px 18px 4px;} #xj-wheel .xj-item{font-size:14px;} /* 系统设置：单张「系统信息」卡片 + 两列横向对齐（只作用于本页 .settings-card） */ #main .settings-card{padding:22px 24px;} #main .settings-card .panel-head{margin-bottom:2px;} #main .settings-card .setting-row{display:grid;grid-template-columns:168px minmax(0,1fr);align-items:center;gap:16px;padding:11px 0;border-bottom:0;} #main .settings-card .setting-row>div{font-size:14px;color:var(--muted);} #main .settings-card .setting-row>div>p{display:none;} /* row() 的说明位为空，不再占高度 */ #main .settings-card .setting-row>span.badge{justify-self:start;} #main .settings-card .sys-note{margin-left:10px;font-size:12px;color:var(--muted);} #main .badge.warn{color:#f0c98a;border-color:#5a4a2c;background:#2a2418;} /* ========================================================================== 客户与授权：卡片化宫格（2026-10-13 用户）· 只作用于本页 桌面 3 列 → 中等 2 列 → 窄屏 1 列；头部名称+状态、内容区上下分组、底部操作 ========================================================================== */ #main .customer-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch;} @media(max-width:1500px){#main .customer-cards{grid-template-columns:repeat(2,minmax(0,1fr));}} @media(max-width:900px){#main .customer-cards{grid-template-columns:minmax(0,1fr);}} #main .customer-card{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);min-width:0;} #main .customer-card:hover{border-color:#3c3d46;} #main .customer-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;} #main .customer-card-name{min-width:0;flex:1 1 auto;} #main .customer-card-name .customer-name-button{max-width:100%;height:auto;min-height:0;padding:0;border:0;background:none;justify-content:flex-start;} #main .customer-card-name .customer-name{font-size:15px;font-weight:600;white-space:normal;word-break:break-word;text-align:left;} #main .customer-card-state{flex:0 0 auto;display:flex;align-items:center;gap:6px;} #main .customer-card-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;padding:12px 0;border-top:1px solid #2b2c33;border-bottom:1px solid #2b2c33;} #main .customer-card-block{display:flex;flex-direction:column;gap:4px;min-width:0;} #main .customer-card-block .k{font-size:11px;color:var(--muted);letter-spacing:.02em;} #main .customer-card-block .v{font-size:13px;color:#d0d0db;min-width:0;overflow-wrap:anywhere;} #main .customer-card-block .v .mono{font-size:12px;} #main .customer-card-block .valid-input{height:30px;min-height:30px;width:100%;font-size:12px;} #main .customer-card-block .expiry-btn{height:30px;min-height:30px;padding:0 9px;font-size:12px;max-width:100%;} #main .customer-card-foot{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;} #main .customer-card-foot .customer-actions{margin:0;} #main .customer-card .name-field{display:block;} #main .customer-card .name-text{font-size:15px;font-weight:600;overflow-wrap:anywhere;} /* 系统设置：账户与安全（2026-10-13 用户）· 只作用于本页 */ #main .acct-card{padding:22px 24px;} #main .acct-row{display:grid;grid-template-columns:132px minmax(0,1fr) auto;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid #2b2c33;} #main .acct-row:last-of-type{border-bottom:0;} #main .acct-row .k{font-size:13px;color:var(--muted);} #main .acct-row .v{font-size:14px;color:#e8e7ee;min-width:0;overflow-wrap:anywhere;} #main .acct-dots{letter-spacing:2px;color:#9a9aa8;} #main .acct-error{margin:0;color:#f099a5;font-size:12px;} @media(max-width:760px){#main .acct-row{grid-template-columns:minmax(0,1fr);}#main .acct-sub,#main .acct-error{grid-column:1/-1;}} /* 授权卡片统一：新增态 / 编辑态 与正式态共用同一套外框（2026-10-13 用户） */ #main .customer-card-pending{border-style:dashed;border-color:#5a4a2c;background:#1e1c17;} #main .customer-card-editing{border-color:var(--accent);} #main .customer-card-form label{display:grid;gap:6px;font-size:11px;color:var(--muted);} #main .customer-card-form label.full{grid-column:1/-1;} #main .customer-card-form input,#main .customer-card-form select{height:30px;min-height:30px;width:100%;font-size:12px;box-sizing:border-box;} #main .customer-card-pending .customer-card-foot .button,#main .customer-card-editing .customer-card-foot .button{min-width:84px;justify-content:center;} /* 行内原地编辑：整行切成编辑控件（不新增卡片、不重复标题、不套外框） */ #main .acct-row-editing{gap:10px 16px;} #main .acct-row-editing .v input{height:32px;min-height:32px;font-size:13px;width:100%;max-width:320px;box-sizing:border-box;} #main .acct-row-editing .a{display:flex;gap:8px;} #main .acct-v-stack{display:grid;gap:8px;max-width:320px;} #main .acct-v-stack label{display:grid;gap:4px;font-size:11px;color:var(--muted);} #main .acct-v-stack input{max-width:100%!important;} #main .acct-sub{grid-column:2/4;display:grid;gap:4px;font-size:11px;color:var(--muted);max-width:320px;} #main .acct-sub input{height:32px;min-height:32px;font-size:13px;} #main .acct-error{grid-column:2/4;margin:0;color:#f099a5;font-size:12px;} /* 授权卡片：行内字段编辑（名称 / 期限）+ 紧凑授权码（2026-10-13 第 2 轮） */ #main .customer-card-block.full{grid-column:1/-1;} #main .link-name,#main .link-value{display:inline-block;max-width:100%;border:0;background:none;padding:0;color:#e8e7ee;font-size:15px;font-weight:600;text-align:left;cursor:pointer;overflow-wrap:anywhere;} #main .link-value{font-size:13px;font-weight:400;color:#d0d0db;} #main .link-name:hover,#main .link-value:hover{color:#fff;text-decoration:underline dotted;} #main .inline-edit{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} #main .inline-edit input,#main .inline-edit select{height:30px;min-height:30px;font-size:12px;box-sizing:border-box;} #main .inline-edit input[name="note"]{flex:1 1 200px;min-width:140px;font-size:13px;font-weight:600;} #main .inline-edit .inline-date{flex:0 0 auto;} #main .inline-edit .inline-date[hidden]{display:none;} #main .inline-actions{display:flex;gap:6px;flex:0 0 auto;} #main .inline-actions .button{min-width:64px;justify-content:center;} #main .customer-card-block .license-key-line{gap:8px;min-height:0;} /* 客户授权页：一步完成（＋入口 / 搜索居中 / 原地自动保存 / 设备列表） */ #main .customer-head-tools{display:flex;align-items:center;gap:8px;} #main .customer-head-tools .icon-only{width:34px!important;height:34px!important;min-height:34px!important;padding:0!important;display:inline-flex;align-items:center;justify-content:center;font-size:16px;line-height:1;} #main .customer-page-search input{box-sizing:border-box;height:34px!important;min-height:34px!important;padding:0 12px;font-size:13px;line-height:32px;text-align:center;text-align-last:center;} #main .name-edit-input{padding:0;margin:0;border:0;outline:none;background:transparent;box-shadow:none;font:inherit;font-size:15px;font-weight:600;line-height:inherit;height:auto;min-height:0;color:#e8e7ee;max-width:100%;} #main .customer-card-name{display:flex;align-items:center;min-height:22px;} #main .period-edit{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;} #main .period-select{height:28px;min-height:28px;font-size:12px;} #main .period-date{height:28px;min-height:28px;font-size:12px;} #main .period-date[hidden]{display:none;} #main .link-count{border:0;background:none;padding:0;color:#83d5b4;font-size:13px;text-decoration:underline dotted;cursor:pointer;} #main .device-list{margin-top:8px;border-top:1px dashed #2b2c33;padding-top:8px;display:grid;gap:4px;} #main .device-row{display:flex;justify-content:space-between;gap:10px;font-size:12px;} /* 授权卡片：仅局部两列与文字式编辑 */ #main .customer-card-head{align-items:center;height:24px;} #main .customer-card-name{height:24px;max-width:calc(100% - 72px);} #main .customer-card-name .link-name{line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #main .customer-card-name input.name-edit-input{width:auto;min-width:4ch;max-width:min(32ch,100%);height:24px!important;min-height:24px!important;line-height:24px!important;padding:0!important;border:0!important;border-radius:0;background:transparent!important;box-shadow:none!important;outline:none!important;flex:0 1 auto;box-sizing:border-box;} #main .customer-card-body{gap:14px 20px;padding:10px 0;} #main .customer-card-block .v{font-size:15px;line-height:28px;min-height:28px;} #main .customer-card-block .link-value{font-size:15px;line-height:28px;} #main .customer-card-block .license-key-line{gap:4px;flex-wrap:wrap;} #main .customer-card-block .license-key-text{font-size:14px;} #main .period-edit{gap:4px;} #main .period-select,#main .period-date,#main .max-devices-select{width:auto;max-width:100%;height:28px!important;min-height:28px!important;padding:0 4px!important;box-sizing:border-box;} #main .customer-card-foot{margin-top:0;} @media(max-width:380px){#main .customer-card-body{grid-template-columns:1fr;}} #main .period-edit:has(.period-date) .period-select{display:none;} #main .customer-card-block .license-key-text{flex:0 1 auto;} /* 授权卡片：显示与编辑采用同一套文字指标 */ #main .customer-card-name .link-name,#main .customer-card-name input.name-edit-input{font-family:inherit!important;font-size:15px!important;font-weight:600!important;line-height:24px!important;letter-spacing:normal!important;height:24px!important;min-height:24px!important;padding:0!important;} #main .customer-card .period-edit{position:relative;display:inline-flex;} #main .customer-card .period-edit .period-select{display:inline-block!important;font:inherit;font-size:15px!important;font-weight:400;line-height:24px;padding:0 22px 0 4px!important;background:transparent;border:1px solid var(--line);color:inherit;} #main .customer-card .period-date{position:absolute;top:30px;left:0;z-index:5;width:220px;background:var(--panel2);} #main .card-device-info{display:flex;align-items:center;gap:4px;flex-wrap:wrap;} #main .card-device-info .max-devices-select{font-size:15px!important;} #main .card-key-control{display:inline-block;position:relative;max-width:100%;} #main .card-key-text{display:block;font:inherit;font-size:13px;color:inherit;background:none;border:0;padding:0;line-height:28px;overflow-wrap:anywhere;text-align:left;cursor:pointer;} #main .card-key-menu{position:absolute;top:100%;left:0;z-index:10;min-width:72px;padding:4px;background:var(--panel2);border:1px solid var(--line);border-radius:6px;box-shadow:0 4px 12px #0005;} #main .card-key-menu[hidden]{display:none;} #main .card-key-menu .button{display:block;width:100%;height:28px;min-height:28px;padding:0 8px;background:none;border:0;text-align:left;} /* 客户授权卡片：全部设备在当前卡片展示，统一文字层级。 */ #main .customer-cards{align-items:start;} #main .customer-card-body{border:0;padding:0;gap:12px 16px;} #main .customer-card-name .link-name,#main .customer-card-name input.name-edit-input{font-size:16px!important;font-weight:600!important;line-height:24px!important;} #main .customer-card-state .badge{font-size:12px;font-weight:400;} #main .customer-card-block .k{font-size:12px;font-weight:400;line-height:18px;letter-spacing:normal;color:var(--muted);} #main .customer-card-block .v,#main .customer-card-block .link-value,#main .customer-card .card-key-text,#main .customer-card .period-edit .period-select,#main .card-device-info .max-devices-select{font-size:14px!important;font-weight:500;line-height:24px;color:#e3e3ed;} #main .card-device-details{display:grid;gap:8px;min-width:0;} #main .card-device-row{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap;font-size:13px;font-weight:400;line-height:20px;overflow-wrap:anywhere;} #main .customer-card-foot .license-actions{display:flex;justify-content:space-between;width:100%;} #main .customer-card-foot{justify-content:flex-end;} #main .card-confirm-text{font-size:13px;margin-right:auto;} #main .customer-card-block.full{flex-direction:row;align-items:baseline;gap:12px;} /* 授权卡片单一信息结构，局部作用于已保存的授权。 */ #main .authorization-card{background:var(--panel2);gap:14px;height:auto;} #main .authorization-card .customer-card-body{display:flex;flex-direction:column;gap:14px;border:0;background:transparent;padding:0;} #main .authorization-card .customer-card-head,#main .authorization-card .customer-card-foot,#main .authorization-card .card-device-details,#main .authorization-card .customer-card-block{border:0;background:transparent;} #main .authorization-card .customer-card-state .badge{font-size:12px;font-weight:500;line-height:20px;} #main .authorization-card .k,#main .authorization-card .card-device-row,#main .authorization-card .card-expiry-note{font-size:12px;font-weight:400;line-height:20px;} #main .authorization-card .v,#main .authorization-card .card-key-text{font-size:14px!important;font-weight:500;line-height:24px;} #main .authorization-card .card-key-primary{min-width:0;} #main .authorization-card .card-period-options{display:flex;gap:6px;flex-wrap:wrap;} #main .authorization-card .card-period-option{height:28px;min-height:28px;padding:0 9px;border:1px solid var(--line);border-radius:6px;background:transparent;color:#e3e3ed;font-family:inherit;font-size:14px;font-weight:500;line-height:24px;} #main .authorization-card .card-period-option[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:var(--accent);} #main .authorization-card .card-period-option:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} #main .authorization-card .card-device-heading{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;} #main .authorization-card .card-device-row{display:flex;flex-direction:column;align-items:flex-start;gap:0;} #main .authorization-card .customer-card-foot .license-actions{justify-content:flex-end;gap:8px;} #main .authorization-card .customer-card-foot .button{height:28px;min-height:28px;font-size:14px;font-weight:500;line-height:24px;} #main .authorization-card .k{color:var(--muted);} /* 客户管理：一行一张横向授权卡片。 */ #main .customer-cards{grid-template-columns:minmax(0,1fr);gap:12px;align-items:stretch;} #main .horizontal-license-card{gap:14px;padding:18px 20px;} #main .horizontal-license-card .customer-card-head{display:flex;align-items:center;gap:12px;height:24px;} #main .horizontal-license-card .customer-card-name{flex:0 1 auto;max-width:min(40%,360px);} #main .horizontal-license-card .card-key-primary{margin-left:auto;min-width:0;} #main .horizontal-license-card .card-key-text{white-space:nowrap;line-height:24px;} #main .horizontal-license-card .card-key-menu{left:auto;right:0;} #main .horizontal-license-card .card-period-row{display:flex;align-items:center;gap:16px;min-height:28px;} #main .horizontal-license-card .card-info-row{display:grid;grid-template-columns:minmax(110px,1fr) minmax(175px,1.3fr) minmax(175px,1.3fr) minmax(240px,1.4fr);gap:16px;align-items:end;} #main .horizontal-license-card .card-info-field{display:flex;flex-direction:column;gap:4px;min-width:0;} #main .horizontal-license-card .card-info-field .v{font-size:14px;font-weight:500;line-height:24px;} #main .horizontal-license-card .card-time{white-space:nowrap;} #main .horizontal-license-card .customer-card-foot{margin:0;min-height:28px;} #main .horizontal-license-card .card-confirm-text{font-size:12px;line-height:20px;} @media(max-width:1000px){ #main .horizontal-license-card .card-info-row{grid-template-columns:1fr 1fr;gap:12px 20px;} } @media(max-width:600px){ #main .horizontal-license-card .customer-card-head{display:grid;grid-template-columns:minmax(0,1fr) auto;height:62px;gap:8px 12px;} #main .horizontal-license-card .customer-card-name{max-width:100%;} #main .horizontal-license-card .card-key-primary{grid-column:1/-1;margin-left:0;} #main .horizontal-license-card .card-period-row{flex-direction:column;align-items:flex-start;gap:6px;} #main .horizontal-license-card .card-info-row{grid-template-columns:minmax(0,1fr);gap:12px;} #main .horizontal-license-card .card-period-options{min-height:62px;align-content:start;} } /* 客户授权卡片左右排列，保留内部三行结构。 */ @media(min-width:1101px){ #main .customer-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;} #main .horizontal-license-card .card-info-row{grid-template-columns:minmax(70px,.8fr) minmax(120px,1.2fr) minmax(120px,1.2fr) minmax(100px,1fr);gap:8px;} } /* 客户、任务工具栏对齐；版本安装包与操作分列。 */ #main .panel:has(> #customer-list)>.panel-head,#main .task-records-panel>#task-filters{display:flex;align-items:center;justify-content:space-between;min-height:34px;gap:12px;margin-bottom:16px;} #main .panel:has(> #customer-list)>.panel-head h2,#main .task-records-panel>#task-filters>.task-records-title{margin:0;font-size:15px;font-weight:600;line-height:34px;} #main .customer-head-tools{margin-left:auto;align-items:center;} #main .task-records-panel>#task-filters .page-search input{height:34px;min-height:34px;} #main .release-grid{table-layout:auto;} #main .release-grid th:last-child{width:auto;} #main .release-grid th:nth-child(4),#main .release-grid td:nth-child(4){min-width:260px;padding-right:28px;} #main .release-grid th:last-child,#main .release-grid td:last-child{padding-left:20px;} #main .release-grid .release-actions{display:flex;flex-wrap:wrap;gap:8px;min-width:220px;} @media(max-width:700px){#main .table-wrap:has(>.release-grid){overflow-x:auto;}#main .release-grid{min-width:760px;}} /* 五个一级页面共用外框；保留原有内容组件与操作绑定。 */ #main>.primary-page-frame{width:100%;min-width:0;box-sizing:border-box;flex:1 1 auto;display:flex;flex-direction:column;gap:0;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--panel);} body .workspace #main .primary-page-frame>.page-heading{padding:0;min-height:0;margin:0 0 24px;align-items:center;} #main .primary-page-frame>.page-heading h1{font-size:26px;font-weight:600;line-height:34px;margin:0 0 8px;} #main .primary-page-frame>.page-heading p{font-size:13px;line-height:20px;margin:0;color:var(--muted);} #main .primary-page-frame>.panel,#main.commercial-page .primary-page-frame>.panel{width:100%;min-width:0;box-sizing:border-box;background:transparent;border:0;border-radius:0;padding:0;margin:0;box-shadow:none;} #main .primary-page-frame>.panel>.panel-head{min-height:34px;margin:0 0 16px;align-items:center;} #main .primary-page-frame>.panel>.panel-head>h2:empty{display:none;} #main .primary-page-frame .customer-head-tools{margin-left:auto;} #main .primary-page-frame>.task-records-panel>#task-filters{margin:0 0 16px;min-height:34px;justify-content:flex-end;} #main .primary-page-frame>.stats{margin:0;} #main .primary-page-frame>.stats>.stat{background:transparent;border:0;border-radius:0;box-shadow:none;} #main .primary-page-frame>.panel>.panel-head h2{font-size:14px;font-weight:600;line-height:20px;margin:0;} @media(max-width:700px){#main>.primary-page-frame{padding:16px;}#main .primary-page-frame>.page-heading h1{font-size:24px;line-height:32px;}#main .primary-page-frame>.page-heading p{overflow-wrap:anywhere;}} /* 搜索与新增贴合页头，底部对齐左侧说明。 */ body .workspace #main .primary-page-frame>.page-heading{align-items:flex-end;gap:16px;} #main .primary-page-frame>.page-heading>div:first-child{min-width:0;} #main .primary-page-frame>.page-heading>.customer-head-tools,#main .primary-page-frame>.page-heading>#task-filters{display:flex;align-items:center;flex:0 0 auto;margin:0 0 0 auto;min-height:34px;gap:8px;} #main .primary-page-frame>.page-heading>#task-filters .page-search input{height:34px;min-height:34px;} @media(max-width:700px){body .workspace #main .primary-page-frame>.page-heading{flex-wrap:wrap;}#main .primary-page-frame>.page-heading>.customer-head-tools,#main .primary-page-frame>.page-heading>#task-filters{max-width:100%;}} /* 五页固定骨架：统一两区页头及内部内容框，滚动仅限后台内容框。 */ #main>.fixed-page-frame{height:calc(100dvh - 148px);min-height:0;flex:0 0 auto;display:grid;grid-template-rows:96px minmax(0,1fr);gap:16px;padding:24px;overflow:hidden;} body .workspace #main .fixed-page-frame>.primary-page-header{display:grid;grid-template-columns:minmax(0,1fr) 280px;align-items:end;gap:24px;width:100%;height:96px;min-height:0;margin:0;padding:0;box-sizing:border-box;} #main .fixed-page-frame .primary-page-title{height:96px;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;} #main .fixed-page-frame .primary-page-title h1{font-size:26px;font-weight:600;line-height:34px;margin:0 0 8px;} #main .fixed-page-frame .primary-page-title p{font-size:13px;line-height:20px;height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;} #main .fixed-page-frame .primary-page-tools{width:280px;height:96px;display:flex;justify-content:flex-end;align-items:flex-end;min-width:0;} #main .fixed-page-frame .primary-page-tools>.customer-head-tools,#main .fixed-page-frame .primary-page-tools>#task-filters{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:0;min-height:34px;width:100%;} #main .fixed-page-frame .primary-page-tools .page-search input{height:34px;min-height:34px;} #main .fixed-page-frame .primary-page-content{min-height:0;min-width:0;width:100%;box-sizing:border-box;padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);overflow:auto;} #main .fixed-page-frame .primary-page-content>.panel,#main.commercial-page .fixed-page-frame .primary-page-content>.panel{background:transparent;border:0;border-radius:0;box-shadow:none;margin:0;padding:0;width:100%;min-width:0;} #main .fixed-page-frame .primary-page-content>.panel>.panel-head{min-height:34px;margin:0 0 16px;} #main .fixed-page-frame .primary-page-content>.panel>.panel-head h2{font-size:14px;line-height:20px;margin:0;} #main .fixed-page-frame .primary-page-content>.stats{margin:0;} #main .fixed-page-frame .primary-page-content>.stats>.stat{background:transparent;border:0;border-radius:0;box-shadow:none;} #main.tasks-page .fixed-page-frame .task-records-panel{display:block;overflow:visible;} #main.tasks-page .fixed-page-frame #task-table{overflow:visible;} @media(max-width:700px){ #main>.fixed-page-frame{padding:16px;gap:12px;grid-template-rows:88px minmax(0,1fr);} body .workspace #main .fixed-page-frame>.primary-page-header{height:88px;grid-template-columns:minmax(0,1fr) 180px;gap:12px;} #main .fixed-page-frame .primary-page-title,#main .fixed-page-frame .primary-page-tools{height:88px;} #main .fixed-page-frame .primary-page-tools{width:180px;} #main .fixed-page-frame .primary-page-title h1{font-size:24px;line-height:32px;} #main .fixed-page-frame .primary-page-content{padding:12px;} #main .fixed-page-frame .primary-page-tools .page-search{flex:1 1 auto;} } #main .fixed-page-frame .primary-page-tools .page-search{margin-left:0;} /* Five primary pages: retain inner content frame and existing geometry. */ #main>.primary-page-frame.fixed-page-frame{border-color:transparent;border-radius:0;background:transparent;box-shadow:none;} /* Header follows existing main 40px gutter + frame 24px + border 1px. The workspace reserves a 15px scrollbar gutter on the right. */ body:has(#main>.fixed-page-frame) .app-header{padding-left:65px !important;padding-right:80px !important;} @media(max-width:700px){body:has(#main>.fixed-page-frame) .app-header{padding-left:57px !important;padding-right:72px !important;}} /* Overview: retain a separate frame around each statistic. */ #main.overview-page .fixed-page-frame .primary-page-content>.stats>.stat{border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:none;} /* Compact the blank area above primary page titles. */ #main>.primary-page-frame.fixed-page-frame{padding-top:8px;grid-template-rows:64px minmax(0,1fr);} body .workspace #main .fixed-page-frame>.primary-page-header{height:64px;} #main .fixed-page-frame .primary-page-title,#main .fixed-page-frame .primary-page-tools{height:64px;} /* Task records: balanced columns and a shared centered alignment. */ #main.tasks-page #task-table th,#main.tasks-page #task-table td{text-align:center;vertical-align:middle;padding-inline:12px;} #main.tasks-page #task-table .button{justify-content:center;text-align:center;} @container admin (min-width:700px){ #main.tasks-page #task-table table{table-layout:fixed;width:100%;} #main.tasks-page #task-table th:nth-child(1),#main.tasks-page #task-table td:nth-child(1){width:18%;} #main.tasks-page #task-table th:nth-child(2),#main.tasks-page #task-table td:nth-child(2){width:12%;} #main.tasks-page #task-table th:nth-child(3),#main.tasks-page #task-table td:nth-child(3){width:16%;} #main.tasks-page #task-table th:nth-child(4),#main.tasks-page #task-table td:nth-child(4){width:14%;} #main.tasks-page #task-table th:nth-child(5),#main.tasks-page #task-table td:nth-child(5){width:17%;} #main.tasks-page #task-table th:nth-child(6),#main.tasks-page #task-table td:nth-child(6){width:7%;} #main.tasks-page #task-table th:nth-child(7),#main.tasks-page #task-table td:nth-child(7){width:7%;} #main.tasks-page #task-table th:nth-child(8),#main.tasks-page #task-table td:nth-child(8){width:9%;} #main.tasks-page #task-table td:first-child .button{white-space:nowrap;max-width:100%;padding-inline:0;} } /* Task table owns scrolling so no row can enter the space above its header. */ @container admin (min-width:700px){ #main.tasks-page .fixed-page-frame .primary-page-content{overflow:hidden;} #main.tasks-page .fixed-page-frame .task-records-panel{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;} #main.tasks-page .fixed-page-frame #task-table{flex:1 1 auto;min-height:0;overflow:auto;isolation:isolate;} #main.tasks-page #task-table table{border-collapse:separate;border-spacing:0;} #main.tasks-page #task-table thead{position:static;box-shadow:none;} #main.tasks-page #task-table thead th{position:sticky;top:0;z-index:3;background:#202126;} } /* Five primary content areas: outline only; preserve inner cards. */ #main .fixed-page-frame .primary-page-content{background:transparent;box-shadow:none;} /* Overview charts adapted from the delivered Stitch SVG and model-share layout. */ #main.overview-page .ov-charts{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;margin-top:16px;align-items:stretch;} #main.overview-page .ov-chart,#main.overview-page .ov-recent{min-width:0;padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--panel);} #main.overview-page .ov-chart{display:flex;flex-direction:column;} #main.overview-page .ov-chart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;} #main.overview-page .ov-chart h2{font-size:15px;font-weight:600;margin:0;} #main.overview-page .ov-source{font-size:11px;line-height:18px;color:var(--muted);margin:8px 0 0;} #main.overview-page .ov-chart-head>.ov-source{margin:0;} #main.overview-page .ov-legend{display:flex;gap:12px;font-size:11px;flex-wrap:wrap;color:#9fc0f1;} #main.overview-page .ov-legend span:last-child{color:var(--green);} #main.overview-page .ov-trend{display:block;width:100%;height:auto;color:#9fc0f1;min-height:150px;} #main.overview-page .ov-trend text{font:11px sans-serif;fill:var(--muted);} #main.overview-page .ov-grid{stroke:var(--line);stroke-dasharray:3 3;} #main.overview-page .ov-volume{stroke:currentColor;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;} #main.overview-page .ov-volume-dot{fill:currentColor;} #main.overview-page .ov-rate{stroke:var(--green);stroke-width:2;stroke-dasharray:4 2;} #main.overview-page .ov-rate-dot{fill:var(--green);} #main.overview-page .ov-empty{min-height:180px;display:grid;place-items:center;color:var(--muted);margin:0;} #main.overview-page .ov-models{display:grid;gap:20px;flex:1;align-content:start;} #main.overview-page .ov-model-label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:12px;margin-bottom:8px;} #main.overview-page .ov-model-label span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} #main.overview-page .ov-model-label span:last-child{flex-shrink:0;color:var(--muted);font-size:11px;} #main.overview-page .ov-bar{height:6px;background:var(--line);border-radius:6px;overflow:hidden;} #main.overview-page .ov-bar>div{height:100%;background:#9fc0f1;border-radius:6px;} #main.overview-page .ov-color-1 .ov-bar>div{background:#bda2e8;} #main.overview-page .ov-color-2 .ov-bar>div{background:var(--green);} #main.overview-page .ov-chart-data{font-size:11px;color:var(--muted);margin-top:8px;} #main.overview-page .ov-chart-data summary{cursor:pointer;} #main.overview-page .ov-recent{margin-top:16px;} #main.overview-page .ov-recent>.panel{padding:0;margin:0;background:transparent;border:0;} #main.overview-page .ov-recent .table-wrap{overflow-x:auto;} #main.overview-page .ov-recent table{min-width:600px;} @container admin (max-width:900px){#main.overview-page .ov-charts{grid-template-columns:minmax(0,1fr);}} /* Delete actions use pure red, including hover; other status colors stay unchanged. */ .button[data-action*="delete"],.button[data-action*="delete"]:hover{color:#ff0000 !important;} /* Task table fills the outline at the top and both sides. */ #main.tasks-page .fixed-page-frame .primary-page-content{padding:0;} #main.tasks-page .fixed-page-frame .task-records-panel>.hint{margin:0;padding:12px 16px;} /* Shared content scrollbars: rounded gray thumb with no track backdrop. */ #main .fixed-page-frame .primary-page-content,#main .fixed-page-frame .primary-page-content *{scrollbar-width:thin;scrollbar-color:#666 transparent;} #main .fixed-page-frame .primary-page-content::-webkit-scrollbar,#main .fixed-page-frame .primary-page-content *::-webkit-scrollbar{width:6px;height:6px;background:transparent;} #main .fixed-page-frame .primary-page-content::-webkit-scrollbar-track,#main .fixed-page-frame .primary-page-content *::-webkit-scrollbar-track{background:transparent;border:0;box-shadow:none;} #main .fixed-page-frame .primary-page-content::-webkit-scrollbar-track-piece,#main .fixed-page-frame .primary-page-content *::-webkit-scrollbar-track-piece{background:transparent;border:0;box-shadow:none;} #main .fixed-page-frame .primary-page-content::-webkit-scrollbar-thumb,#main .fixed-page-frame .primary-page-content *::-webkit-scrollbar-thumb{background:#666;border:0;border-radius:999px;box-shadow:none;} #main .fixed-page-frame .primary-page-content::-webkit-scrollbar-corner,#main .fixed-page-frame .primary-page-content *::-webkit-scrollbar-corner{background:transparent;} /* Safari/Chromium: use one custom scrollbar renderer instead of native thin styling. */ @supports selector(::-webkit-scrollbar){ #main .fixed-page-frame .primary-page-content,#main .fixed-page-frame .primary-page-content *{scrollbar-width:auto;scrollbar-color:auto;} } /* Inset the whole task table consistently; round the header's upper corners. */ @container admin (min-width:700px){ #main.tasks-page #task-table>.table-wrap{box-sizing:border-box;padding-inline:24px;} #main.tasks-page #task-table thead th:first-child{background:#202126;border-top-left-radius:8px;} #main.tasks-page #task-table thead th:last-child{background:#202126;border-top-right-radius:8px;} #main.tasks-page .fixed-page-frame .task-records-panel>.hint{padding-inline:24px;} } /* Round both ends of task headers and highlighted rows. */ @container admin (min-width:700px){ #main.tasks-page #task-table thead th:first-child{border-radius:8px 0 0 8px} #main.tasks-page #task-table thead th:last-child{border-radius:0 8px 8px 0} #main.tasks-page #task-table tbody tr:hover{background:transparent} #main.tasks-page #task-table tbody tr:hover>td{background:#202126 !important} #main.tasks-page #task-table tbody tr>td:first-child{border-radius:8px 0 0 8px !important} #main.tasks-page #task-table tbody tr>td:last-child{border-radius:0 8px 8px 0} } /* Leave breathing room above the task header, including while scrolling. */ @container admin (min-width:700px){ #main.tasks-page.commercial-page .fixed-page-frame .primary-page-content>.panel.task-records-panel{padding-top:24px;box-sizing:border-box} } /* Equal task columns and symmetric scroll gutters. */ @container admin (min-width:700px){ #main.tasks-page .fixed-page-frame #task-table{scrollbar-gutter:stable both-edges} #main.tasks-page #task-table table{table-layout:fixed;width:100%} #main.tasks-page #task-table th:nth-child(n), #main.tasks-page #task-table td:nth-child(n){width:12.5%;text-align:center;padding-inline:10px;overflow-wrap:anywhere} } /* ══════════════════════════════════════════════════════════════════════════ 版本发布（353 兼容集成） 全部复用线上已有的设计令牌与组件（--panel/--line/--muted/--accent、 .panel/.badge/.button/.file-meta/.setting-row），不引入第二套视觉系统： 没有新配色、没有渐变炫光、没有大幅动画。 作用域限定在 #main.release-page / #main.imageapi-page，绝不影响其他页面。 ══════════════════════════════════════════════════════════════════════════ */ /* 内容区里的分节：线上把 .primary-page-content 的直接 .panel 压平了， 这里用细分隔线恢复"章节感"，不新增卡片嵌套。 */ #main.release-page .primary-page-content>.panel+.panel{border-top:1px solid var(--line);margin-top:22px;padding-top:22px;} /* 上传区：两块拖放区并排，宽度随容器自适应（不写死像素） */ .release-drop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .release-drop{display:grid;gap:7px;align-content:start;border:1px dashed #4b3f5c;border-radius:10px;background:#1e1b26;padding:18px;cursor:pointer;min-height:132px;transition:border-color .12s ease,background .12s ease} .release-drop:hover{border-color:#6b5a86;background:#221e2b} .release-drop:focus-visible{outline:2px solid var(--purple);outline-offset:2px} .release-drop.dragover{border-color:var(--purple);border-style:solid;background:#2a2436} .release-drop.has-file{border-style:solid;border-color:#3b4741;background:#1c211f} .release-drop-title{display:block;color:var(--text);font-size:13px} .release-drop-title em{font-style:normal;color:var(--muted);font-size:11px;border:1px solid var(--line);border-radius:4px;padding:1px 6px;margin-left:6px} .release-drop-note{display:block;font-size:11px;color:var(--muted);line-height:1.5} .release-drop .file-meta{display:grid;gap:4px;margin-top:2px} .release-drop .file-meta b{color:var(--text);font-weight:500;overflow-wrap:anywhere} .release-drop .file-meta em{font-style:normal;color:var(--muted);font-size:11px} .release-drop .file-meta .mono{overflow-wrap:anywhere} .release-meta-form{margin-top:22px} .release-meta-form textarea{min-height:88px} /* 上传进度：细条，不使用炫光 */ .release-progress{height:6px;margin-top:20px;border-radius:4px;background:#26272e;overflow:hidden} .release-progress > span{display:block;height:100%;width:0;background:var(--accent);transition:width .15s linear} /* 五状态：每格都直接来自服务端事实，配色只用已有的 ok/warn/fail */ .release-stages{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:0;margin:16px 0 0} .release-stages li{display:grid;gap:8px;justify-items:start;border:1px solid var(--line);border-radius:9px;background:#1a1b1f;padding:12px 14px} .release-stages li b{font-size:12px;font-weight:500;color:var(--muted)} .release-stages li[data-state="ok"]{border-color:#2f4a3f} .release-stages li[data-state="ok"] b{color:var(--green)} .release-stages li[data-state="active"]{border-color:#4a4128} .release-stages li[data-state="active"] b{color:var(--yellow)} .release-stages li[data-state="fail"]{border-color:#4d2f34} .release-stages li[data-state="fail"] b{color:var(--red)} /* 操作日志：只保留最近 12 条，不用内嵌滚动条 */ .rel-log{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px} .rel-log li{display:flex;gap:12px;font-size:12px;color:var(--muted);border-left:2px solid var(--line);padding:2px 0 2px 10px;overflow-wrap:anywhere} .rel-log li span{color:#757582;font:11px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;flex:0 0 auto;padding-top:1px} .rel-log li.rel-log-ok{border-left-color:var(--green);color:#a8d9c3} .rel-log li.rel-log-warn{border-left-color:var(--yellow);color:#dbc79a} .rel-log li.rel-log-fail{border-left-color:var(--red);color:#e4a8ad} /* 版本记录表：固定列宽，超长 SHA256 换行而不是撑破容器 */ .release-grid{table-layout:fixed;width:100%} .release-grid th:nth-child(1),.release-grid td:nth-child(1){width:9%} .release-grid th:nth-child(2),.release-grid td:nth-child(2){width:12%} .release-grid th:nth-child(3),.release-grid td:nth-child(3){width:14%} .release-grid th:nth-child(4),.release-grid td:nth-child(4){width:19%} .release-grid th:nth-child(5),.release-grid td:nth-child(5){width:17%} .release-grid th:nth-child(6),.release-grid td:nth-child(6){width:11%} .release-grid th:nth-child(7),.release-grid td:nth-child(7){width:18%} .release-grid td{overflow-wrap:anywhere} .release-grid th{white-space:nowrap} .release-grid .rel-sub{margin-top:5px} .release-grid .rel-sub .badge{font-size:11px;padding:2px 7px} .release-empty{border:1px solid var(--line);border-radius:10px;background:#1a1b1f;padding:26px;text-align:center} .release-empty h3{margin-bottom:8px} .release-empty p{margin-bottom:16px;font-size:13px} /* 发布接口配置（API）：左侧只读事实 + 右侧可编辑表单 */ .release-config-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:0 24px} .release-config-grid .setting-row{gap:14px} .release-config-grid .setting-row > .mono{text-align:right;overflow-wrap:anywhere;min-width:0} .release-config-grid .setting-row > div{min-width:0} .release-endpoint-form label input{max-width:100%} /* 发布确认：必须逐字输入版本号 */ .rel-confirm{display:grid;gap:8px;margin-top:18px;font-size:13px;color:#b9b9c6} .rel-confirm b{color:var(--text)} .rel-consequences{margin:14px 0 0;padding-left:20px;color:var(--muted);font-size:13px;display:grid;gap:5px} /* 图片接口管理：只补充列表页在固定框架里的间距 */ #main.imageapi-page .primary-page-content>.panel+.panel{border-top:1px solid var(--line);margin-top:22px;padding-top:22px;} /* 【335 变更 · 卡片化】服务商列表＝客户管理那套卡片宫格。 复用既有组件（.customer-cards / .customer-card / .customer-card-head / .customer-card-body / .customer-card-block / .customer-card-foot）， 不新造第二套视觉；也因此**不再需要**横向滚动（原表格 10 列在 1440/1920 下会裁掉最右操作）。 下面只做本页需要的最小补充，不改全局 .table-wrap 与页面滚动。 */ /* 【列数说明】客户管理页现在是"一行一张横向授权卡"，因此全局 `.customer-cards` 在 ≥1101px 时被写成 2 列。服务商信息量小、卡片高度低，**宫格更适合**， 所以在服务商页显式覆盖列数：宽屏 3 列 → 窄屏 2 列 → 手机 1 列。 只覆盖本页，不影响客户管理。 */ #main.imageapi-page .provider-cards{margin-top:2px;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch;} /* 客户卡的 .customer-card-body 默认两列；服务商字段较短，改成三列更紧凑 */ #main.imageapi-page .provider-card .customer-card-body{grid-template-columns:repeat(3,minmax(0,1fr));} #main.imageapi-page .provider-card .customer-card-name .name-text{ overflow-wrap:anywhere;font-size:15px;font-weight:600;line-height:24px;} /* Key 掩码沿用客户卡的等宽文字指标；这里不需要下拉菜单（改 Key 走底部按钮） */ #main.imageapi-page .provider-card .card-key-text{cursor:default;} #main.imageapi-page .provider-card .customer-card-foot .provider-actions{width:100%;justify-content:flex-end;} @media(max-width:1500px){#main.imageapi-page .provider-cards{grid-template-columns:repeat(2,minmax(0,1fr));}} @media(max-width:1200px){#main.imageapi-page .provider-card .customer-card-body{grid-template-columns:repeat(2,minmax(0,1fr));}} @media(max-width:900px){#main.imageapi-page .provider-cards{grid-template-columns:minmax(0,1fr);}} @media(max-width:760px){#main.imageapi-page .provider-card .customer-card-body{grid-template-columns:minmax(0,1fr);}} @media(max-width:1250px){ .release-stages{grid-template-columns:repeat(3,minmax(0,1fr))} .release-config-grid{grid-template-columns:1fr;gap:0} } @media(max-width:900px){ .release-drop-grid{grid-template-columns:1fr} .release-stages{grid-template-columns:repeat(2,minmax(0,1fr))} .release-grid{table-layout:auto} } @media(max-width:760px){ .release-stages{grid-template-columns:1fr} .release-drop{padding:15px;min-height:0} .release-drop .file-meta .mono{font-size:11px} } /* 版本记录表：本身给一个可读的最小宽度，横向滚动发生在**表格自己的包裹层**内部， 绝不把 .primary-page-content 撑出横向溢出（线上 CSS 在 <700px 已有同类规则）。 */ #main.release-page .release-table-wrap{width:100%;min-width:0;overflow-x:auto;} #main.release-page .release-grid{min-width:880px;} @media(max-width:1250px){#main.release-page .release-grid{min-width:820px;}} /* 353 表单细节：表单里"强制更新"这类勾选项标签不要被窄列折行 */ #main.release-page .release-meta-form .check{white-space:nowrap;} /* Cloud update page only; shared navigation and provider management stay unchanged. */ .cloud-update{width:100%;max-width:900px;margin:0 auto;padding:8px 0 36px} .cloud-update-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;gap:16px} .cloud-update-heading h1{font-size:26px;line-height:1.4;margin:0} .cloud-upload-zone{min-height:350px;border:1px solid #34373d;border-radius:12px;background:#17191d;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:42px 24px;text-align:center} .cloud-upload-zone.is-dragover{border-color:#7189ad;background:#1b2028} .cloud-upload-zone h2{font-size:18px;font-weight:500;margin:0 0 24px} .cloud-update .button.primary{background:#4f719e;border-color:#5c7da6;color:#f4f6fa} .cloud-update .button.primary:hover{background:#5a7ca8} .cloud-upload-zone p{max-width:100%;overflow-wrap:anywhere} #cloud-upload-name{margin:22px 0 0;color:#c1c5ce;font-size:14px} .cloud-upload-message{font-size:13px;color:#9da5b2;margin:12px 0;min-height:20px} .cloud-upload-message.is-error{color:#e49a9a} #cloud-upload-progress{width:280px;max-width:100%;height:6px;margin-top:22px;accent-color:#6686b0} #cloud-confirm-publish{margin-top:6px} .cloud-history-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:80;display:flex;justify-content:flex-end} .cloud-history{width:420px;max-width:100%;height:100%;background:#181a1f;border-left:1px solid #34373d;display:flex;flex-direction:column;outline:none} .cloud-history header{padding:26px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #30333a} .cloud-history h2{margin:0;font-size:19px} .cloud-history ul{list-style:none;padding:0 24px;margin:0;overflow:auto;flex:1} .cloud-history-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px 0;border-bottom:1px solid #30333a} .cloud-history-row strong{font-size:15px;font-weight:500} .cloud-history-row time{display:block;color:#929aa7;font-size:12px;margin-top:8px} #cloud-history-status{font-size:13px;color:#aeb7c6;padding:0 24px 16px;margin:0} .cloud-update [hidden],.cloud-history-backdrop[hidden],.cloud-history [hidden]{display:none!important} /* This page has one content region; the shared two-row table frame must not constrain it. */ #main.release-page>.fixed-page-frame{display:block;height:auto;min-height:calc(100dvh - 148px);padding:24px;border:0;overflow:visible} /* 云端更新：恢复统一外框（与客户管理一致） */ @media(max-width:700px){#main.release-page>.fixed-page-frame{padding:16px 0}.cloud-upload-zone{padding:32px 18px}.cloud-update-heading h1{font-size:24px}} /* ════════════════════════════════════════════════════════════════════════════ 图片接口管理 2.0 · 作用域样式（2026-10-17） 只作用于 #main.imageapi-page，不改动其它五个页面，也不触碰任何滚动系统。 部署方式：追加到 admin-next.css 末尾。回滚：删掉本段。 ════════════════════════════════════════════════════════════════════════════ */ /* ① 内容区沿用后台统一的外框（与客户管理一致），本页不再单独改框架。 */ /* ② 名单骨架：表头 + 行 + 幽灵新增行，全部对齐同一套列 */ #main.imageapi-page .pa { display: flex; flex-direction: column; min-width: 0; } #main.imageapi-page .pa-th, #main.imageapi-page .pa-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.35fr) 96px 112px 76px minmax(112px, auto); grid-template-areas: "name up key state time act"; align-items: center; gap: 16px; min-width: 0; } #main.imageapi-page .pa-th { height: 32px; padding-left: 10px; border-bottom: 1px solid var(--line); color: #8b8c9a; font-size: 11px; font-weight: 500; letter-spacing: .04em; } #main.imageapi-page .pa-row { padding: 14px 0 14px 10px; border-bottom: 1px solid #26272e; transition: background-color .15s ease; } #main.imageapi-page .pa-row:hover { background: #1f2025; } /* 唯一使用强调色的地方：正在服务的那条通道。 */ #main.imageapi-page .pa-row.is-live { box-shadow: inset 2px 0 0 var(--accent); } #main.imageapi-page .pa-name { grid-area: name; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-width: 0; } #main.imageapi-page .pa-title { max-width: 100%; overflow: hidden; color: var(--text); font-size: 15px; font-weight: 600; line-height: 22px; text-overflow: ellipsis; white-space: nowrap; } #main.imageapi-page .pa-pill { flex: 0 0 auto; padding: 0 6px; border: 1px solid #33445c; border-radius: 4px; background: #26313f; color: #bcd6fb; font-size: 11px; line-height: 17px; } #main.imageapi-page .pa-proto { flex: 0 0 100%; color: var(--muted); font-size: 12px; line-height: 17px; } #main.imageapi-page .pa-up { grid-area: up; display: grid; gap: 2px; min-width: 0; } #main.imageapi-page .pa-model { overflow: hidden; color: #cdced9; font-size: 12px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; } #main.imageapi-page .pa-url { overflow: hidden; color: #83848f; font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; } #main.imageapi-page .pa-key { grid-area: key; min-width: 0; overflow: hidden; color: #b3b4c0; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } #main.imageapi-page .pa-nokey { color: var(--yellow); } #main.imageapi-page .pa-state { grid-area: state; min-width: 0; } #main.imageapi-page .pa-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; } #main.imageapi-page .pa-st i { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; } #main.imageapi-page .st-live { color: var(--green); } #main.imageapi-page .st-live i { background: var(--green); } #main.imageapi-page .st-idle { color: #a9b2c1; } #main.imageapi-page .st-idle i { background: #6f7a8b; } #main.imageapi-page .st-off { color: #7f8089; } #main.imageapi-page .st-off i { background: #5a5b64; } #main.imageapi-page .st-bad { color: var(--red); } #main.imageapi-page .st-bad i { background: var(--red); } #main.imageapi-page .pa-sub-bad { display: block; margin-top: 3px; color: var(--red); font-size: 11px; line-height: 16px; } #main.imageapi-page .pa-time { grid-area: time; color: #83848f; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; } #main.imageapi-page .pa-act .ui-menu[open] > summary { border-color: #334156; background: #262f3d; color: #b9d3fa; } #main.imageapi-page .pa-act { grid-area: act; display: flex; align-items: center; justify-content: flex-end; gap: 6px; } /* ③ 幽灵新增行：把名单收住，而不是留白 */ #main.imageapi-page .pa-add { display: flex; align-items: center; width: 100%; height: 48px; padding: 0 0 0 10px; border: 0; border-bottom: 1px solid #26272e; background: transparent; color: var(--muted); font-size: 13px; text-align: left; cursor: pointer; transition: color .15s ease, background-color .15s ease; } #main.imageapi-page .pa-add:hover { background: #1f2025; color: var(--text); } #main.imageapi-page .pa-add:disabled { background: transparent; color: #5a5b64; cursor: not-allowed; } /* ④ 提示条：只有真异常才出现 */ #main.imageapi-page .pa-banner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 16px; padding: 10px 14px; border: 1px solid; border-radius: 8px; font-size: 12px; line-height: 18px; } #main.imageapi-page .pa-banner b { font-weight: 600; } #main.imageapi-page .pa-banner.is-warn { border-color: #4b3f28; background: #211e17; color: #dcc79b; } #main.imageapi-page .pa-banner.is-bad { border-color: #4f3036; background: #241a1c; color: #e6aeb3; } /* ⑤ 空态与脚注 */ #main.imageapi-page .pa-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 56px 24px 40px; text-align: center; } #main.imageapi-page .pa-empty-t { color: var(--text); font-size: 15px; font-weight: 600; } #main.imageapi-page .pa-empty-d { max-width: 36em; color: var(--muted); font-size: 13px; line-height: 20px; } #main.imageapi-page .pa-empty .button { margin-top: 8px; } #main.imageapi-page .pa-note { margin: 14px 0 0 10px; color: #83848f; font-size: 12px; line-height: 18px; } /* ⑥ 菜单分隔与无障碍文本 */ #main.imageapi-page .pa-sep { height: 1px; margin: 6px 4px; border: 0; background: #41444a; } #main.imageapi-page .pa-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ⑦ 窄屏：先丢「更新」，再退成两行块，不回到客户卡片那套宫格 */ @media (max-width: 1200px) { #main.imageapi-page .pa-th, #main.imageapi-page .pa-row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.3fr) 92px 108px minmax(108px, auto); grid-template-areas: "name up key state act"; } #main.imageapi-page .pa-time, #main.imageapi-page .pa-h5 { display: none; } } @media (max-width: 900px) { #main.imageapi-page .pa-th { display: none; } #main.imageapi-page .pa-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name act" "up up" "key state"; gap: 8px 12px; padding: 16px 0; } #main.imageapi-page .pa-key { justify-self: start; } #main.imageapi-page .pa-state { justify-self: end; } } /* ═══ 2026-10-17 客户管理：点「＋」直接生成授权卡；点授权码显示并复制 ═══ */ @keyframes xjCardFlash { 0% { outline-color: rgba(82, 131, 204, .95); } 70% { outline-color: rgba(82, 131, 204, .95); } 100% { outline-color: rgba(82, 131, 204, 0); } } #main .customer-card.card-flash { outline: 1px solid transparent; outline-offset: 3px; animation: xjCardFlash 1.6s ease-out forwards; } #main .card-key-text:hover { color: #bcd6fb; } #main .card-key-text:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; } /* ═══ 2026-10-17 删除/停用确认改为全局对话框；危险操作使用红色确认按钮 ═══ */ #xj-confirm[data-danger] [data-xj-confirm="1"] { background: #3a2529; border-color: #5c3138; color: var(--red); } #xj-confirm[data-danger] [data-xj-confirm="1"]:hover { background: #462b30; border-color: #7a3b43; color: #f6b3b8; } /* 对话框自身接收焦点（避免打开瞬间给「取消」画蓝框）；键盘 Tab 到按钮时仍有焦点环 */ #xj-confirm:focus, #xj-confirm:focus-visible { outline: none; } /* ═══ 2026-10-17 云端更新 / 结构管理与客户管理统一格式 ═══ */ /* 云端更新：外框内铺满上传区，不再限宽居中 */ #main.release-page .cloud-update { max-width: none; margin: 0; padding: 0; height: 100%; display: flex; flex-direction: column; } #main.release-page .cloud-upload-zone { flex: 1 1 auto; min-height: 280px; } /* 云端更新：骨架回到五个一级页共用的固定网格（内容框才会撑满） */ #main.release-page > .fixed-page-frame { display: grid; height: calc(100dvh - 148px); min-height: 0; grid-template-rows: 64px minmax(0, 1fr); padding: 24px; padding-top: 8px; overflow: hidden; } /* ═══ 2026-10-17 任务记录：跟主页一样在最外框内滚动，上下留白不贴边 ═══ */ #main.tasks-page .fixed-page-frame .primary-page-content { overflow: auto; padding: 16px; } #main.tasks-page .fixed-page-frame .task-records-panel { display: block; height: auto; min-height: 0; overflow: visible; } #main.tasks-page .fixed-page-frame #task-table { overflow: visible; } #main.tasks-page #task-table > .table-wrap { padding-inline: 0; } #main.tasks-page #task-table thead th { background: #202126; } /* ═══ 2026-10-17 系统设置：账户与安全做成卡片 ═══ */ #main .fixed-page-frame .primary-page-content > .panel.acct-card { width: 100%; max-width: 760px; margin: 0; padding: 20px 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; } /* ═══ 2026-10-17 内容区底色统一成概览面板色 ═══ */ #main .fixed-page-frame .primary-page-content { background: var(--panel); } #main .fixed-page-frame .primary-page-content > .panel.acct-card { background: var(--panel2); } /* 底色变亮后，行悬停/分隔线跟着调 */ #main.imageapi-page .pa-row { border-bottom-color: rgba(255, 255, 255, .06); } #main.imageapi-page .pa-row:hover { background: #26272e; } #main.imageapi-page .pa-add { border-bottom-color: rgba(255, 255, 255, .06); } #main.imageapi-page .pa-add:hover { background: #26272e; } /* ═══ 2026-10-17 结构管理：编辑/新增改为列表内就地展开 ═══ */ #main.imageapi-page .pa-edit { padding: 10px 0 14px; } #main.imageapi-page .pa-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; padding: 18px 18px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); } #main.imageapi-page .pa-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; } #main.imageapi-page .pa-form input, #main.imageapi-page .pa-form select { width: 100%; height: 32px; min-height: 32px; font-size: 13px; } #main.imageapi-page .pa-form .pa-form-key { grid-column: 1 / -1; } #main.imageapi-page .pa-form .hint { margin: 0; color: #83848f; font-size: 11px; } #main.imageapi-page .pa-form-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } #main.imageapi-page .pa-form-flags { display: flex; align-items: center; gap: 20px; } #main.imageapi-page .pa-form-flags .check { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 13px; } #main.imageapi-page .pa-form-flags input { width: 16px; height: 16px; min-height: 16px; } #main.imageapi-page .pa-form-actions { display: flex; gap: 8px; margin-left: auto; } /* ═══ 2026-10-17 所有底框透明：只留 1px 描边，不再有填充色 ═══ */ #main .fixed-page-frame .primary-page-content { background: transparent; } #main .customer-card { background: transparent; } #main .stat { background: transparent; } #main .fixed-page-frame .primary-page-content > .panel.acct-card { background: transparent; } #main.imageapi-page .pa-form { background: transparent; } #main .cloud-upload-zone { background: transparent; } /* 概览页的直挂面板也不再填充底色（与其它页一致） */ #main > .panel { background: transparent; } /* ═══ 2026-10-17 系统设置·账户与安全：普通态与编辑态共用同一套三列网格 ═══ */ #main .acct-card .acct-row { grid-template-columns: 132px minmax(0, 1fr) 148px; align-items: start; gap: 8px 16px; padding: 14px 0; } #main .acct-card .acct-row .k { line-height: 30px; } #main .acct-card .acct-row .v { line-height: 30px; } #main .acct-card .acct-row .a { display: flex; justify-content: flex-end; gap: 8px; } #main .acct-card .acct-row .a .button { height: 30px; min-height: 30px; padding: 0 12px; } #main .acct-card .acct-row-editing .v input, #main .acct-card .acct-v-stack input, #main .acct-card .acct-sub input { width: 100%; max-width: 360px; height: 30px; min-height: 30px; font-size: 13px; } #main .acct-card .acct-sub { grid-column: 2 / 3; max-width: none; margin-top: 2px; } #main .acct-card .acct-v-stack { max-width: none; gap: 10px; } #main .acct-card .acct-error { grid-column: 2 / 4; } /* ═══ 2026-10-17 卡片恢复底色，全局统一成 --panel（#1c1d21，与概览统计卡同色） ═══ */ #main .customer-card, #main .stat, #main > .panel, #main .cloud-upload-zone { background: var(--panel); } #main .fixed-page-frame .primary-page-content > .panel.acct-card { background: var(--panel); } #main.imageapi-page .pa-form { background: var(--panel); } /* 内容外框仍保持透明（上一轮要求） */ #main .fixed-page-frame .primary-page-content { background: transparent; } /* ═══ 2026-10-17 任务记录：表头钉死在框内，只有行滚动（表头不再随滚动位移） ═══ */ #main.tasks-page .fixed-page-frame .primary-page-content { overflow: hidden; padding: 16px; } #main.tasks-page .fixed-page-frame .task-records-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; } #main.tasks-page .fixed-page-frame #task-table { flex: 1 1 auto; min-height: 0; overflow: auto; } #main.tasks-page #task-table thead th { background: #202126; } #main.tasks-page #task-table thead { position: sticky; top: 0; z-index: 3; } /* ═══ 2026-10-17 所有页头搜索框统一 34px 高（客户管理 / 任务记录 …） ═══ */ #main .page-search input, #main .page-search input[type="search"], #main .customer-page-search #customer-search, #main #task-filters .page-search input { height: 34px; min-height: 34px; line-height: 32px; } /* ═══ 2026-10-17 模型设置：卡片宫格 ═══ */ #main.imageapi-page .pm { display: flex; flex-direction: column; min-width: 0; } #main.imageapi-page .pm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; } #main.imageapi-page .pm-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); } #main.imageapi-page .pm-card.is-live { box-shadow: inset 2px 0 0 var(--accent); } #main.imageapi-page .pm-card.is-bad { box-shadow: inset 2px 0 0 var(--red); } #main.imageapi-page .pm-head { display: flex; align-items: center; gap: 8px; min-width: 0; } #main.imageapi-page .pm-name { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--text); font-size: 15px; font-weight: 600; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #main.imageapi-page .pm-pill { flex: 0 0 auto; padding: 0 6px; border: 1px solid #33445c; border-radius: 4px; background: #26313f; color: #bcd6fb; font-size: 11px; line-height: 17px; } #main.imageapi-page .pm-state { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; } #main.imageapi-page .pm-state i { width: 6px; height: 6px; border-radius: 50%; } #main.imageapi-page .pm-proto { margin: 0; color: var(--muted); font-size: 12px; line-height: 17px; } #main.imageapi-page .pm-bad { margin-left: 8px; color: var(--red); } #main.imageapi-page .pm-fields { display: grid; gap: 0; margin: 2px 0 0; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .06); border-bottom: 1px solid rgba(255, 255, 255, .06); } #main.imageapi-page .pm-fields > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: baseline; line-height: 26px; } #main.imageapi-page .pm-fields dt { color: var(--muted); font-size: 12px; } #main.imageapi-page .pm-fields dd { margin: 0; min-width: 0; color: #d6d6e0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #main.imageapi-page .pm-fields dd .mono { font-size: 12px; } #main.imageapi-page .pm-nokey { color: var(--yellow); } #main.imageapi-page .pm-foot { display: flex; justify-content: flex-end; gap: 6px; margin-top: auto; } /* 表单卡 */ #main.imageapi-page .pm-card-edit { border-color: #3c4761; } #main.imageapi-page .pm-form { display: grid; gap: 10px; } #main.imageapi-page .pm-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: start; gap: 12px; color: var(--muted); font-size: 12px; } #main.imageapi-page .pm-row .pm-k { line-height: 30px; } #main.imageapi-page .pm-row .pm-v { display: grid; gap: 4px; min-width: 0; } #main.imageapi-page .pm-row input, #main.imageapi-page .pm-row select { width: 100%; height: 30px; min-height: 30px; box-sizing: border-box; font-size: 13px; } #main.imageapi-page .pm-hint { font-style: normal; color: #83848f; font-size: 11px; line-height: 16px; } #main.imageapi-page .pm-checks { display: flex; align-items: center; gap: 20px; padding-left: 88px; color: var(--text); font-size: 13px; } #main.imageapi-page .pm-checks .check { display: flex; align-items: center; gap: 8px; } #main.imageapi-page .pm-checks input { width: 16px; height: 16px; min-height: 16px; } #main.imageapi-page .pm-form-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; } /* 空态 / 提示条 / 脚注 */ #main.imageapi-page .pm-empty { grid-column: 1 / -1; align-items: center; justify-content: center; padding: 40px 24px; text-align: center; border-style: dashed; } #main.imageapi-page .pm-empty-t { margin: 0; color: var(--text); font-size: 15px; font-weight: 600; } #main.imageapi-page .pm-empty-d { max-width: 36em; margin: 0; color: var(--muted); font-size: 13px; line-height: 20px; } #main.imageapi-page .pm-banner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 16px; padding: 10px 14px; border: 1px solid; border-radius: 8px; font-size: 12px; line-height: 18px; } #main.imageapi-page .pm-banner b { font-weight: 600; } #main.imageapi-page .pm-banner.is-warn { border-color: #4b3f28; background: #211e17; color: #dcc79b; } #main.imageapi-page .pm-banner.is-bad { border-color: #4f3036; background: #241a1c; color: #e6aeb3; } #main.imageapi-page .pm-note { margin: 14px 0 0; color: #83848f; font-size: 12px; line-height: 18px; } #main.imageapi-page .pm-sep { height: 1px; margin: 6px 4px; border: 0; background: #41444a; } /* ═══ 2026-10-17 编辑/新增表单卡：整行铺开，两列字段 ═══ */ #main.imageapi-page .pm-card-edit { grid-column: 1 / -1; border-color: #3c4761; } #main.imageapi-page .pm-card.is-editing { border-color: var(--accent); } #main.imageapi-page .pm-card-edit .pm-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; } #main.imageapi-page .pm-card-edit .pm-row { grid-template-columns: 76px minmax(0, 1fr); } #main.imageapi-page .pm-card-edit .pm-row-full, #main.imageapi-page .pm-card-edit .pm-checks, #main.imageapi-page .pm-card-edit .pm-form-foot { grid-column: 1 / -1; } #main.imageapi-page .pm-card-edit .pm-checks { padding-left: 88px; } #main.imageapi-page .pm-card-edit .pm-form-foot { justify-content: flex-end; } /* ═══ 2026-10-17 编辑/新增表单卡：收成一张卡、单列字段，不再铺满整行 ═══ */ #main.imageapi-page .pm-card-edit { grid-column: auto; } #main.imageapi-page .pm-card-edit .pm-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } #main.imageapi-page .pm-card-edit .pm-row { grid-template-columns: 76px minmax(0, 1fr); } #main.imageapi-page .pm-card-edit .pm-row-full, #main.imageapi-page .pm-card-edit .pm-checks, #main.imageapi-page .pm-card-edit .pm-form-foot { grid-column: auto; } #main.imageapi-page .pm-card-edit .pm-checks { padding-left: 88px; flex-wrap: wrap; gap: 10px 16px; } #main.imageapi-page .pm-card-edit .pm-form-foot { justify-content: flex-end; } /* 模型设置：每个服务商常驻完整表单，操作与结果都在本卡片。 */ #main.imageapi-page .pm-grid { align-items: stretch; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); } #main.imageapi-page .pm-card-manage .pm-editor { border: 0; padding: 0; margin: 0; min-width: 0; } #main.imageapi-page .pm-card-manage .pm-form { grid-template-columns: minmax(0, 1fr); } #main.imageapi-page .pm-card-manage .pm-checks { padding-left: 0; flex-wrap: wrap; gap: 10px 16px; } #main.imageapi-page .pm-card-manage .pm-form-foot { border-top: 1px solid var(--line); padding-top: 12px; } #main.imageapi-page .pm-updated { color: var(--muted); font-size: 11px; line-height: 18px; font-variant-numeric: tabular-nums; } #main.imageapi-page .pm-direct-actions { flex-wrap: wrap; justify-content: flex-start; padding-top: 10px; border-top: 1px solid var(--line); } #main.imageapi-page .pm-result:empty { display: none; } #main.imageapi-page .pm-result { min-width: 0; font-size: 12px; overflow-wrap: anywhere; } #main.imageapi-page .pm-result h4 { margin: 8px 0; font-size: 13px; } #main.imageapi-page .pm-result table { width: 100%; table-layout: fixed; } #main.imageapi-page .pm-result th, #main.imageapi-page .pm-result td { padding: 6px 3px; white-space: normal; overflow-wrap: anywhere; font-size: 10px; } #main.imageapi-page .pm-version { border-top: 1px solid var(--line); padding: 10px 0; } #main.imageapi-page .pm-version dl { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 6px; } #main.imageapi-page .pm-version dt { color: var(--muted); } #main.imageapi-page .pm-version dd { margin: 0; min-width: 0; } #main.imageapi-page .pm-result .row { display: flex; flex-wrap: wrap; gap: 6px; } /* 任务记录与首页共用内容框滚动条，表格不再另占一条内层滚动轨道。 */ #main.tasks-page .fixed-page-frame .primary-page-content { overflow: auto; } #main.tasks-page .fixed-page-frame .task-records-panel { display: block; height: auto; overflow: visible; } #main.tasks-page .fixed-page-frame #task-table { overflow: visible; scrollbar-gutter: auto; } @container admin (min-width:700px) { #main.tasks-page #task-table > .table-wrap { overflow: visible; } #main.tasks-page #task-table thead { position: sticky; top: 0; z-index: 3; } } @container admin (min-width:700px) { /* 固定表头贴住内容框内缘，避免数据行从顶部留白处露出。 */ #main.tasks-page #task-table thead { top: -16px; } #main.tasks-page #task-table thead th { position: static; } } /* 模型设置 · 450 单卡布局。仅修改本页的呈现，保留现有滚动及表单行为。 */ #main.imageapi-page .ms-shell { width: 100%; } #main.imageapi-page .ms-providers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; } #main.imageapi-page .ms-provider { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; min-height: 34px; padding: 6px 12px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 7px; text-align: left; } #main.imageapi-page .ms-provider:hover { border-color: var(--muted); } #main.imageapi-page .ms-provider.is-selected { border-color: var(--accent); background: var(--panel2); } #main.imageapi-page .ms-provider-name { font-size: 13px; font-weight: 500; overflow-wrap: anywhere; } #main.imageapi-page .ms-badges { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; } #main.imageapi-page .ms-status { color: var(--muted); font-size: 12px; font-weight: 400; white-space: nowrap; } #main.imageapi-page .ms-status.is-on { color: var(--green); } #main.imageapi-page .ms-provider .pm-pill { display: none; } #main.imageapi-page .ms-form { width: 100%; margin: 0; } #main.imageapi-page .ms-fields { display: block; min-width: 0; margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); } #main.imageapi-page .ms-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } #main.imageapi-page .ms-section-head h2 { color: var(--text); font-size: 15px; font-weight: 600; line-height: 22px; } #main.imageapi-page .ms-row { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: start; gap: 16px; margin-top: 10px; font-size: 13px; color: var(--muted); } #main.imageapi-page .ms-row > span:first-child { line-height: 34px; } #main.imageapi-page .ms-row input, #main.imageapi-page .ms-row select { width: 100%; height: 34px; min-height: 34px; padding: 0 10px; font-size: 13px; } #main.imageapi-page .ms-key { display: grid; gap: 4px; } #main.imageapi-page .ms-key small { color: var(--muted); font-size: 11px; line-height: 16px; } #main.imageapi-page .ms-model-area { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); } #main.imageapi-page .ms-model-area h3 { color: var(--text); font-size: 14px; font-weight: 600; line-height: 20px; margin: 0 0 12px; } #main.imageapi-page .ms-model-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } #main.imageapi-page .ms-model { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; min-height: 40px; padding: 10px 30px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: var(--text); text-align: center; font-size: 13px; overflow-wrap: anywhere; } #main.imageapi-page .ms-model:hover { border-color: var(--muted); } #main.imageapi-page .ms-model.is-selected { border-color: var(--accent); background: var(--panel2); } #main.imageapi-page .ms-model-mark { position: absolute; right: 12px; color: var(--purple); font-weight: 600; } #main.imageapi-page .ms-custom { margin-top: 12px; } #main.imageapi-page .ms-empty-models { grid-column: 1 / -1; color: var(--muted); font-size: 12px; } #main.imageapi-page .ms-advanced { margin-top: 12px; color: var(--muted); font-size: 12px; } #main.imageapi-page .ms-advanced summary { cursor: pointer; width: fit-content; } #main.imageapi-page .ms-save-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); } #main.imageapi-page .ms-flags { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-right: auto; } #main.imageapi-page .ms-flags .check { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; white-space: nowrap; font-size: 13px; } #main.imageapi-page .ms-flags .check input { flex: 0 0 16px; width: 16px; height: 16px; min-height: 16px; margin: 0; padding: 0; } #main.imageapi-page .ms-save-row .button { min-height: 34px; padding: 0 20px; } #main.imageapi-page .ms-form-status { flex-basis: 100%; color: var(--yellow); font-size: 12px; } #main.imageapi-page .ms-form-status:empty { display: none; } #main.imageapi-page .ms-warning { padding: 10px 0; color: var(--yellow); font-size: 12px; } @media (max-width: 700px) { #main.imageapi-page .ms-fields { padding: 16px; } #main.imageapi-page .ms-row { grid-template-columns: minmax(0, 1fr); gap: 4px; } #main.imageapi-page .ms-row > span:first-child { line-height: 20px; } #main.imageapi-page .ms-flags { gap: 10px; } #main.imageapi-page .ms-model { padding-inline: 20px; } #main.imageapi-page .ms-model-mark { right: 6px; } body .workspace #main.imageapi-page .fixed-page-frame > .primary-page-header { grid-template-columns: minmax(0, 1fr) 40px; gap: 12px; } #main.imageapi-page .fixed-page-frame .primary-page-tools { width: 40px; } } /* 两个服务商分别成卡，并排展示，卡内保留两列模型按钮。 */ #main.imageapi-page .ms-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 16px; } #main.imageapi-page .ms-form { display: flex; min-width: 0; } #main.imageapi-page .ms-form .ms-fields { display: flex; flex: 1 1 auto; flex-direction: column; width: 100%; padding: 18px; } #main.imageapi-page .ms-row { grid-template-columns: minmax(0, 1fr); gap: 5px; } #main.imageapi-page .ms-row > span:first-child { line-height: 20px; } #main.imageapi-page .ms-save-row { margin-top: auto; } #main.imageapi-page .ms-advanced { margin-bottom: 16px; } #main.imageapi-page .ms-model { padding-inline: 22px; } #main.imageapi-page .ms-flags { gap: 10px 16px; } #main.imageapi-page .ms-flags .check { font-size: 12px; } @media (max-width: 600px) { #main.imageapi-page .ms-cards { grid-template-columns: minmax(0, 1fr); } } /* 452 · Only model settings. Existing outer frame and page scroll stay unchanged. */ #main.imageapi-page .ma-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; align-items: start; } #main.imageapi-page .ma-card { min-width: 0; padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; } #main.imageapi-page .ma-head { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; } #main.imageapi-page .ma-head h2 { margin: 0; min-width: 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; } #main.imageapi-page [data-provider-state] { flex-shrink: 0; } #main.imageapi-page [data-provider-state] .badge { font-size: 12px; font-weight: 500; line-height: 20px; } #main.imageapi-page .ma-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; } #main.imageapi-page .ma-actions:empty { display: none; } #main.imageapi-page .ma-actions .button { height: 28px; min-height: 28px; font-size: 14px; font-weight: 500; line-height: 24px; } #main.imageapi-page .ma-row { display: grid; gap: 5px; margin-top: 10px; color: var(--muted); font-size: 13px; } #main.imageapi-page .ma-row input { width: 100%; height: 34px; min-height: 34px; padding: 0 10px; font-size: 13px; } #main.imageapi-page .ma-save-status { min-height: 18px; margin-top: 6px; color: var(--green); font-size: 11px; line-height: 18px; } #main.imageapi-page .ma-save-status.is-error, #main.imageapi-page .ma-warning { color: var(--yellow); } #main.imageapi-page .ma-model-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 14px; margin-top: 8px; border-top: 1px solid var(--line); } #main.imageapi-page .ma-model-head h3 { margin: 0; font-size: 14px; font-weight: 600; } #main.imageapi-page .ma-model-head span { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; } #main.imageapi-page .ma-model-state { padding-top: 10px; color: var(--muted); font-size: 12px; } #main.imageapi-page .ma-model-state[hidden] { display: none; } /* User-requested catalogue scroll, isolated to the list inside each provider card. */ #main.imageapi-page .ma-model-list { display: block; max-height: 240px; overflow-y: auto; list-style: none; margin: 10px 0 0; padding: 0 8px 0 0; } #main.imageapi-page .ma-model-list:empty { display: none; } #main.imageapi-page .ma-model-list li { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 20px; overflow-wrap: anywhere; } #main.imageapi-page .ma-model-list li:last-child { border-bottom: 0; } @media(max-width:600px) { #main.imageapi-page .ma-cards { grid-template-columns: minmax(0,1fr); } } @media(max-width:700px) { body .workspace #main.imageapi-page .fixed-page-frame>.primary-page-header { grid-template-columns: minmax(0,1fr) 40px; gap: 12px; } #main.imageapi-page .fixed-page-frame .primary-page-tools { width: 40px; } } /* 454: align status/actions in their own cards; keep scroll and data behavior unchanged. */ #main.imageapi-page .ma-head { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; } #main.imageapi-page [data-provider-state] { justify-self: end; } #main.imageapi-page .ma-actions { width: 100%; height: auto; min-height: 28px; padding: 12px 0 0; justify-content: flex-end; } #main .horizontal-license-card .customer-card-head { display: grid; grid-template-columns: minmax(0,1fr) auto; height: auto; min-height: 24px; align-items: center; } #main .horizontal-license-card .customer-card-name { max-width: 100%; } #main .horizontal-license-card .customer-card-state { justify-self: end; justify-content: flex-end; } #main .horizontal-license-card .card-info-row { grid-template-columns: minmax(70px,.8fr) minmax(120px,1.2fr) minmax(120px,1.2fr); } #main .horizontal-license-card .customer-card-foot { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; margin-top: auto; } #main .horizontal-license-card .customer-card-foot .card-key-primary { grid-column: auto; margin: 0; justify-self: start; text-align: left; } #main .horizontal-license-card .customer-card-foot .card-key-text { white-space: normal; text-align: left; } #main .horizontal-license-card .customer-card-foot .license-actions { width: auto; margin: 0; justify-self: end; justify-content: flex-end; flex-wrap: nowrap; } @media(max-width:600px) { #main .horizontal-license-card .card-info-row { grid-template-columns: minmax(0,1fr); } } /* 455: read-only model IDs flow across each card and wrap by their natural width. */ #main.imageapi-page .ma-model-list { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 8px; } #main.imageapi-page .ma-model-list li, #main.imageapi-page .ma-model-list li:last-child { flex: 0 1 auto; max-width: 100%; padding: 5px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel2); } /* Cloud upload: fixed compact zone, existing width/border and upload controls retained. */ #main.release-page .cloud-update { height: auto; } #main.release-page .cloud-upload-zone { flex: 0 0 320px; height: 320px; min-height: 320px; box-sizing: border-box; } /* Task headers stick inside the existing outer content scroller; no scroll geometry changes. */ @container admin (min-width:700px) { #main.tasks-page #task-table thead { position: sticky; top: 0; z-index: 4; box-shadow: 0 -16px 0 var(--bg); } #main.tasks-page #task-table thead th { position: static; } } /* New provider cards use the same full-card frame and follow existing cards. */ #main.imageapi-page .ma-cards { align-items: stretch; } #main.imageapi-page .ma-card-draft { display: flex; flex-direction: column; } #main.imageapi-page .ma-card-draft .ma-head { margin-bottom: 4px; } #main.imageapi-page .ma-card-draft .ma-actions { margin-top: auto; } /* Provider cards follow the available content width, with at most two columns. */ #main.imageapi-page .ma-shell { container-name: provider-cards; container-type: inline-size; } #main.imageapi-page .ma-cards > .ma-card:only-child { grid-column: 1 / -1; } @container provider-cards (max-width: 680px) { #main.imageapi-page .ma-cards { grid-template-columns: minmax(0,1fr); } } /* Model region only: no nested cards or changes to page/card scrolling. */ #main.imageapi-page .ma-model-columns { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; margin-top: 8px; } #main.imageapi-page .ma-model-column { min-width: 0; } #main.imageapi-page .ma-model-columns .ma-model-head { margin-top: 0; } #main.imageapi-page .ma-model-column .ma-model-head h3 { font-size: 13px; } #main.imageapi-page .ma-model-column .ma-model-list { margin-top: 8px; } #main.imageapi-page .ma-prompt-state { min-height: 18px; margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 18px; overflow-wrap: anywhere; } #main.imageapi-page .ma-model-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; } #main.imageapi-page .ma-model-id { overflow-wrap: anywhere; } #main.imageapi-page .ma-model-list .ma-text-option { display: flex; align-items: center; gap: 6px; width: 100%; padding: 0; background: transparent; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; } #main.imageapi-page .ma-text-option .ma-model-id { min-width: 0; } #main.imageapi-page .ma-model-item.is-current { border-color: var(--accent); background: color-mix(in srgb,var(--accent) 12%,var(--panel2)); } #main.imageapi-page .ma-current-marker { color: var(--green); white-space: nowrap; font-size: 11px; } #main.imageapi-page .ma-model-category { width: 100%; max-width: 136px; min-height: 26px; padding: 3px 6px; font-size: 11px; } #main.imageapi-page .ma-model-list > li.ma-unclassified { flex-basis: 100%; width: 100%; padding: 0; margin-top: 4px; border: 0; background: transparent; } #main.imageapi-page .ma-unknown-items { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; list-style: none; margin: 8px 0 0; padding: 0; } #main.imageapi-page .ma-catalog-status { margin-top: 10px; } #main.imageapi-page .ma-text-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } #main.imageapi-page .ma-classification-group { border-top: 1px solid transparent; padding-top: 10px; } #main.imageapi-page .ma-classification-group summary { cursor: pointer; color: var(--muted); font-size: 12px; line-height: 20px; } #main.imageapi-page .ma-classification-group summary span { float: right; font-variant-numeric: tabular-nums; } #main.imageapi-page .ma-classification-group summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } #main.imageapi-page .ma-classification-title { color: var(--muted); font-size: 12px; line-height: 20px; } #main.imageapi-page .ma-classification-title span { float: right; font-variant-numeric: tabular-nums; } #main.imageapi-page .ma-model-columns[hidden] { display: none; } /* Provider cards form the visible outer frame; retain the existing scroll container. */ #main.imageapi-page .fixed-page-frame .primary-page-content { padding: 0; border: 0; background: transparent; box-shadow: none; } /* Show every model in normal flow; only the existing page container scrolls. */ #main.imageapi-page .ma-model-list { max-height: none; overflow: visible; padding-right: 0; } /* Model headings, counts and supporting copy share the same page typography. */ #main.imageapi-page .ma-model-columns .ma-model-head h3, #main.imageapi-page .ma-classification-title { font-family: inherit; font-size: 13px; font-weight: 600; line-height: 20.8px; color: var(--text); } #main.imageapi-page .ma-classification-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 20px; } #main.imageapi-page .ma-model-head > span, #main.imageapi-page .ma-classification-title > span { margin-left: auto; float: none; font-size: 12px; font-weight: 400; line-height: 19.2px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; } #main.imageapi-page .ma-prompt-state { margin: 6px 0 0; min-height: 18px; font-size: 12px; font-weight: 400; line-height: 18px; color: var(--muted); text-align: left; } /* Approved 12px horizontal inset for the existing native page scrollbar. */ #main.imageapi-page .fixed-page-frame .primary-page-content { width: calc(100% - 12px); margin-right: 12px; } /* Keep the native scrollbar inside the single-provider frame, with 12px clear space. */ #main.imageapi-page .fixed-page-frame .primary-page-content { width: 100%; margin-right: 0; } #main.imageapi-page .fixed-page-frame .primary-page-content:has(.ma-cards > .ma-card:only-child) { background: var(--panel); outline: 1px solid var(--line); outline-offset: -1px; } #main.imageapi-page .ma-cards > .ma-card:only-child { border-color: transparent; background: transparent; } @supports selector(::-webkit-scrollbar) { #main.imageapi-page .fixed-page-frame .primary-page-content::-webkit-scrollbar:vertical { width: 18px; } #main.imageapi-page .fixed-page-frame .primary-page-content::-webkit-scrollbar-thumb:vertical { border-right: 12px solid transparent; background-clip: padding-box; border-radius: 3px 15px 15px 3px / 3px; } } /* Match overview: original 6px native rail and 16px content clearance, without the extra gutter. */ #main.imageapi-page .ma-cards > .ma-card:only-child { padding-right: 16px; } @supports selector(::-webkit-scrollbar) { #main.imageapi-page .fixed-page-frame .primary-page-content::-webkit-scrollbar:vertical { width: 6px; } #main.imageapi-page .fixed-page-frame .primary-page-content::-webkit-scrollbar-thumb:vertical { border: 0; background-clip: border-box; border-radius: 999px; } } /* A single compact, vertically centered status row for loading and automatic saves. */ #main.imageapi-page .ma-status-row { display: flex; align-items: center; min-height: 28px; padding: 5px 0; box-sizing: border-box; } #main.imageapi-page .ma-status-row > .ma-save-status, #main.imageapi-page .ma-status-row > .ma-catalog-status { min-height: 0; margin: 0; padding: 0; font-size: 11px; line-height: 18px; } #main.imageapi-page .ma-status-row > .ma-save-status:empty { display: none; } #main.imageapi-page .ma-status-row:has(.ma-catalog-status:not([hidden])) > .ma-save-status:not(.is-error) { display: none; } #main.imageapi-page .ma-status-row:has(.ma-save-status.is-error:not(:empty)) > .ma-catalog-status { display: none; } #main.imageapi-page .ma-model-columns { margin-top: 0; } #main.imageapi-page .ma-card:has(.ma-model-columns[hidden]) > .ma-actions { margin-top: 0; } /* Reserve the same native scrollbar slot before and after the model catalogue arrives. */ #main.imageapi-page .fixed-page-frame .primary-page-content { scrollbar-gutter: stable; } /* Three framed sections: provider configuration, image catalogue, and text catalogue. */ #main.imageapi-page .ma-card, #main.imageapi-page .ma-cards > .ma-card:only-child { padding: 8px; } #main.imageapi-page .ma-config-section, #main.imageapi-page .ma-model-column { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-sizing: border-box; } #main.imageapi-page .ma-config-section { margin-bottom: 14px; } #main.imageapi-page .ma-model-columns .ma-model-head { margin-top: 0; padding-top: 0; border-top: 0; } #main.imageapi-page .ma-classification-group { border-top: 0; } #main.imageapi-page .ma-card > .ma-actions { margin-top: 14px; padding-top: 0; border-top: 0; } /* 客户管理卡片：积分单独一行；流水走轻量浮层；底部只留授权码与操作。 */ #main .authorization-cards{align-items:stretch;} #main .authorization-card .card-credit-row{display:flex;align-items:center;gap:10px;min-height:28px;padding-top:10px;border-top:1px solid #2b2c33;} #main .authorization-card .card-credit-row .k{font-size:12px;font-weight:400;line-height:20px;color:var(--muted);} #main .authorization-card .card-credit-row b{font-size:18px;font-weight:600;line-height:28px;color:#e8e7ee;font-variant-numeric:tabular-nums;} #main .authorization-card .customer-card-foot{margin-top:auto;display:flex;align-items:center;flex-wrap:nowrap;gap:10px;min-height:28px;} #main .authorization-card .customer-card-foot .card-key-primary{margin-left:0;flex:1 1 auto;min-width:0;} #main .authorization-card .customer-card-foot .card-key-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #main .authorization-card .customer-card-foot .license-actions{width:auto;flex:0 0 auto;justify-content:flex-end;gap:8px;flex-wrap:nowrap;} #main .authorization-card .customer-card-foot .button{height:28px;min-height:28px;font-size:14px;font-weight:500;line-height:24px;} @media(min-width:1101px){#main .authorization-card .card-info-row{grid-template-columns:repeat(3,minmax(0,1fr));}} /* 积分记录：卡片网格外的独立区域，不改变卡片高度。 */ /* ════════════════════════════════════════════════════════════════════════════ 控制中心（2026-10-19） 页面只负责排列卡片：一个功能一张独立卡片，两列自适应，卡片高度随内容。 只作用于 #main.control-page / .cc-*；不改动导航外的页面与任何滚动代码。 ════════════════════════════════════════════════════════════════════════════ */ #main .cc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start;} #main .cc-card{ min-width:0;display:flex;flex-direction:column;gap:14px; padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:var(--panel); } #main .cc-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;min-width:0;} #main .cc-card-head>div:first-child{min-width:0;} #main .cc-card-head h2{font-size:15px;line-height:22px;font-weight:600;margin:0;} #main .cc-card-head p{font-size:12px;line-height:18px;margin:4px 0 0;color:var(--muted);} #main .cc-card-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto;} /* 账号安全：沿用原有 .acct-row 结构，只把列宽收进卡片。 */ #main .cc-account-card .acct-row{grid-template-columns:96px minmax(0,1fr) auto;align-items:start;gap:8px 12px;padding:12px 0;} #main .cc-account-card .acct-row:first-child{padding-top:2px;} #main .cc-account-card .acct-row:last-of-type{padding-bottom:0;border-bottom:0;} #main .cc-account-card .acct-row .k{line-height:30px;} #main .cc-account-card .acct-row .v{line-height:30px;font-size:14px;} #main .cc-account-card .acct-row .a{display:flex;justify-content:flex-end;gap:8px;} #main .cc-account-card .acct-row .a .button{height:30px;min-height:30px;padding:0 12px;} #main .cc-account-card .acct-row-editing{grid-template-columns:96px minmax(0,1fr);gap:10px 12px;} #main .cc-account-card .acct-row-editing>.a{grid-column:1/-1;justify-content:flex-end;} #main .cc-account-card .acct-row-editing .v input, #main .cc-account-card .acct-v-stack input, #main .cc-account-card .acct-sub input{width:100%;max-width:none;height:32px;min-height:32px;font-size:13px;} #main .cc-account-card .acct-v-stack{max-width:none;gap:8px;} #main .cc-account-card .acct-sub{grid-column:1/-1;max-width:none;margin-top:2px;} #main .cc-account-card .acct-error{grid-column:1/-1;} /* 云端更新：原有上传控件与原流程不变，只把上传区收成卡片内的紧凑区域。 */ #main .cc-cloud-card .cloud-upload-zone{ min-height:0;height:auto;padding:14px 16px;gap:10px; align-items:stretch;justify-content:flex-start;text-align:left; border:1px dashed #3a3d46;border-radius:10px;background:transparent; } #main .cc-cloud-card .cloud-upload-zone.is-dragover{border-color:#7189ad;background:#1b2028;} #main .cc-cloud-card .cc-upload-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0;} #main .cc-cloud-card #cloud-upload-name{margin:0;color:#c1c5ce;font-size:13px;min-width:0;overflow-wrap:anywhere;} #main .cc-cloud-card .cloud-upload-message{margin:0;min-height:18px;font-size:12px;} #main .cc-cloud-card #cloud-upload-progress{width:100%;height:6px;margin:0;accent-color:#6686b0;} #main .cc-cloud-card #cloud-confirm-publish{align-self:flex-start;margin:0;} #main .cc-cloud-card .cloud-update [hidden], #main .cc-cloud-card [hidden]{display:none!important;} /* 系统状态：只显示原有健康检查结果。 */ #main .cc-status-card .cc-status-list{display:grid;gap:0;} #main .cc-status-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid #2b2c33;font-size:13px;color:var(--muted);} #main .cc-status-row:last-child{border-bottom:0;padding-bottom:0;} #main .cc-status-row .badge{justify-self:end;} #main .cc-status-note{margin:0;color:var(--red);font-size:12px;line-height:18px;} @media(max-width:1000px){ #main .cc-grid{grid-template-columns:minmax(0,1fr);} } @media(max-width:760px){ #main .cc-card{padding:16px;} #main .cc-card-head{flex-wrap:wrap;} #main .cc-account-card .acct-row{grid-template-columns:minmax(0,1fr);} #main .cc-account-card .acct-row .k, #main .cc-account-card .acct-row .v{line-height:22px;} #main .cc-account-card .acct-row .a{grid-column:1/-1;justify-content:flex-start;} } /* 账号编辑：当前密码在操作按钮之前，避免先看到保存再看到验证项。 */ #main .cc-account-card .acct-row-editing{grid-template-areas:"k v" "sub sub" "actions actions" "error error";} #main .cc-account-card .acct-row-editing>.k{grid-area:k;} #main .cc-account-card .acct-row-editing>.v{grid-area:v;} #main .cc-account-card .acct-row-editing>.a{grid-area:actions;} #main .cc-account-card .acct-row-editing>.acct-sub{grid-area:sub;} #main .cc-account-card .acct-row-editing>.acct-error{grid-area:error;} @media(max-width:760px){ #main .cc-account-card .acct-row-editing{grid-template-columns:minmax(0,1fr);grid-template-areas:"k" "v" "sub" "actions" "error";} } /* ════════════════════════════════════════════════════════════════════════════ 控制中心统一三列布局（2026-10-19） 只覆盖 .cc-* 与控制中心外层公共边框；不改滚动、其他页面或客户管理。 ════════════════════════════════════════════════════════════════════════════ */ /* 去掉包住全部卡片的大公共边框，卡片各自保留独立边框。 */ #main.control-page .primary-page-content{ border:0; border-radius:0; background:transparent; box-shadow:none; } /* 三列等宽、等高、顶部对齐；新增卡片自动进入下一行。 */ #main .cc-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:stretch; } #main .cc-card{ height:100%; padding:18px 20px; gap:14px; } #main .cc-card-body{flex:1 1 auto;min-width:0;} /* 统一卡片内按钮尺寸、字号、圆角和行高；主按钮仍沿用原蓝色。 */ #main .cc-card .button{ height:30px; min-height:30px; padding:0 12px; font-size:12px; line-height:28px; border-radius:7px; } /* 账号安全：两列信息行；操作统一放到卡片底部。 */ #main .cc-account-card .acct-row{ grid-template-columns:96px minmax(0,1fr); gap:6px 12px; padding:10px 0; } #main .cc-account-card .acct-row:not(.acct-row-editing) .a{display:none;} #main .cc-account-card .cc-card-body{display:flex;flex-direction:column;} #main .cc-card-foot{ display:flex; align-items:center; justify-content:flex-start; gap:8px; margin-top:auto; padding-top:14px; } /* 云端更新：上传区再收紧，历史版本固定在卡片右上角。 */ #main .cc-cloud-card .cc-card-body{display:flex;align-items:flex-start;} #main .cc-cloud-card .cloud-upload-zone{ width:100%; padding:12px 14px; gap:8px; } #main .cc-cloud-card .cc-upload-row{gap:10px;} #main .cc-cloud-card #cloud-upload-name{font-size:12px;} #main .cc-cloud-card .cloud-upload-message{min-height:16px;} /* 系统状态：运行状态、服务接口、数据库统一右对齐。 */ #main .cc-status-card .cc-status-list{display:flex;flex-direction:column;flex:1 1 auto;} #main .cc-status-card .cc-status-row{min-height:42px;} #main .cc-status-card .cc-status-row .badge{margin-left:auto;} #main .cc-status-note{margin-top:2px;} /* 窄屏自动降列。 */ @media(max-width:1180px){ #main .cc-grid{grid-template-columns:repeat(2,minmax(0,1fr));} } @media(max-width:820px){ #main .cc-grid{grid-template-columns:minmax(0,1fr);} } @media(max-width:760px){ #main .cc-card{height:auto;padding:16px;} } /* Model settings: remove outer decoration while preserving the existing scroll geometry. */ #main.imageapi-page .fixed-page-frame .primary-page-content, #main.imageapi-page .fixed-page-frame .primary-page-content:has(.ma-cards > .ma-card:only-child) { border-color: transparent; background: transparent; border-radius: 0; outline: none; box-shadow: none; } #main.imageapi-page .ma-card { border-color: transparent; background: transparent; border-radius: 0; box-shadow: none; } /* One complete card per provider; all providers share the existing page scroller. */ #main.imageapi-page .ma-cards { align-items: start; } #main.imageapi-page .ma-card, #main.imageapi-page .ma-cards > .ma-card:only-child { border-color: var(--line); border-radius: 10px; background: var(--panel); } #main.imageapi-page .ma-config-section, #main.imageapi-page .ma-model-column { border-color: transparent; border-radius: 0; background: transparent; } #main.imageapi-page .ma-model-column, #main.imageapi-page .ma-classification-group { box-shadow: none; } #main.imageapi-page .ma-card > .ma-actions { padding-inline: 13px; } /* Match overview's outer content frame; retain the shared native content scroller. */ #main.imageapi-page .fixed-page-frame .primary-page-content, #main.imageapi-page .fixed-page-frame .primary-page-content:has(.ma-cards > .ma-card:only-child) { padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: transparent; outline: none; } @media(max-width:700px) { #main.imageapi-page .fixed-page-frame .primary-page-content, #main.imageapi-page .fixed-page-frame .primary-page-content:has(.ma-cards > .ma-card:only-child) { padding: 12px; } } /* Remove only the divider above unidentified models. */ #main.imageapi-page .ma-classification-group { box-shadow: none; } /* Consistent provider spacing and full-width section rules. */ #main.imageapi-page .ma-card, #main.imageapi-page .ma-cards > .ma-card:only-child { padding: 0; } #main.imageapi-page .ma-config-section { padding: 20px; margin-bottom: 0; border: 0; } #main.imageapi-page .ma-head { margin-bottom: 16px; } #main.imageapi-page .ma-row { margin-top: 12px; gap: 6px; } #main.imageapi-page .ma-head + .ma-row { margin-top: 0; } #main.imageapi-page .ma-status-row { min-height: 0; padding: 0; margin-top: 8px; } #main.imageapi-page .ma-status-row:has(.ma-save-status:empty):has(.ma-catalog-status[hidden]) { display: none; } #main.imageapi-page .ma-model-columns { gap: 0; margin-top: 0; } #main.imageapi-page .ma-model-column { padding: 20px; border: 0; border-top: 1px solid var(--line); box-shadow: none; } #main.imageapi-page .ma-prompt-state { margin: 8px 0 0; } #main.imageapi-page .ma-model-column .ma-model-list { margin-top: 8px; } #main.imageapi-page .ma-model-list > li.ma-unclassified { margin-top: 8px; } #main.imageapi-page .ma-classification-group { padding-top: 0; border: 0; box-shadow: none; } #main.imageapi-page .ma-unknown-items { margin-top: 8px; } #main.imageapi-page .ma-card > .ma-actions, #main.imageapi-page .ma-card:has(.ma-model-columns[hidden]) > .ma-actions { margin-top: 0; padding: 0 20px 20px; } /* Balance the catalogue status between the API Key field and provider actions. */ #main.imageapi-page .ma-config-section:has(.ma-catalog-status:not([hidden])) { padding-bottom: 0; } #main.imageapi-page .ma-status-row:has(.ma-catalog-status:not([hidden])) { margin-top: 0; padding: 16px 0; min-height: 50px; align-items: center; } /* Confirmed control-center layout: account left, update/status stacked right. */ #main.control-page .primary-page-content { border:1px solid var(--line); border-radius:10px; background:transparent; } #main.control-page .cc-grid { grid-template-columns:minmax(0,55fr) minmax(0,45fr); gap:18px; align-items:start; } #main.control-page .cc-right { display:flex; flex-direction:column; gap:18px; min-width:0; } #main.control-page .cc-card { height:auto; padding:20px; gap:18px; } #main.control-page #cc-account-form { display:flex; flex-direction:column; gap:16px; margin:0; } #main.control-page #cc-account-form label { display:flex; flex-direction:column; gap:8px; color:var(--muted); font-size:13px; } #main.control-page #cc-account-form input { width:100%; max-width:none; height:36px; min-height:36px; font-size:13px; } #main.control-page .cc-account-save { display:flex; justify-content:flex-end; } #main.control-page .acct-error { margin:0; } #main.control-page .cc-account-save .button,#main.control-page #cloud-select-file { height:36px; min-height:36px; line-height:34px; } #main.control-page .cc-cloud-card .cloud-upload-zone { border:0; border-radius:0; padding:16px 0 8px; background:transparent; align-items:center; text-align:center; gap:12px; } #main.control-page .cc-cloud-card .cc-upload-row { justify-content:center; flex-direction:column; } #main.control-page #cloud-select-file { min-width:110px; } #main.control-page #cloud-drop::before,#main.control-page #cloud-drop::after { content:none; display:none; } #main.control-page #cloud-confirm-publish { align-self:center; } #main.control-page .cc-status-row { min-height:42px; padding:10px 0; } #main.control-page .cc-status-row:last-child { padding-bottom:0; } @media(max-width:820px) { #main.control-page .cc-grid { grid-template-columns:minmax(0,1fr); } } /* Align the two-card right column with the account card at desktop widths. */ @media(min-width:821px) { #main.control-page .cc-grid { align-items: stretch; } #main.control-page .cc-right { display: grid; grid-template-rows: auto auto; align-content: stretch; } } /* The visual task header is outside the native scroller, so rubber-band motion only affects data. */ #main.tasks-page > .fixed-page-frame { position: relative; } #main.tasks-page #task-table thead.task-header-source { visibility: hidden; } #main.tasks-page .task-pinned-header { position:absolute; z-index:6; pointer-events:none; background:var(--bg); box-shadow:0 -16px 0 var(--bg); } #main.tasks-page .task-pinned-header table { margin:0; table-layout:fixed; } #main.tasks-page .task-pinned-header th { background:#202126; } @container admin (max-width:699px) { #main.tasks-page .task-pinned-header { display:none; } } /* Cover the full top inset, including its boundary pixel, above the fixed task header. */ #main.tasks-page .task-pinned-header::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 18px; background: var(--bg); } /* Stop the header cover at the inner edge, leaving the outer top border visible. */ #main.tasks-page .task-pinned-header::before { height: 16px; } /* One vertical label/value rhythm throughout each customer card. */ #main .horizontal-license-card { padding:24px; display:flex; flex-direction:column; gap:16px; height:auto; } #main .horizontal-license-card .customer-card-head { margin:0; } #main .horizontal-license-card .card-period-row { display:flex; flex-direction:column; align-items:stretch; gap:6px; margin:0; padding:0; } #main .horizontal-license-card .card-period-options { justify-content:flex-start; flex-wrap:wrap; } #main .horizontal-license-card .card-info-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 24px; margin:0; padding:0; border:0; } #main .horizontal-license-card .card-info-field,#main .horizontal-license-card .card-key-section { display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; } #main .horizontal-license-card .k { font-size:12px; color:var(--muted); } #main .horizontal-license-card .card-info-field .v { margin:0; } #main .horizontal-license-card .card-key-primary { margin:0; padding:0; text-align:left; } #main .horizontal-license-card .customer-card-foot { display:flex; justify-content:flex-end; margin:0; padding:0; border:0; min-height:0; } #main .horizontal-license-card .license-actions { width:auto; margin:0; justify-content:flex-end; flex-wrap:wrap; } #card-credit-form { display:flex; flex-direction:column; gap:16px; } #card-credit-form label { display:flex; flex-direction:column; gap:6px; } /* Edit credit amount and reason directly within the owning customer card. */ #main .horizontal-license-card .card-credit-inline { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 24px; margin:0; } #main .card-credit-inline label { display:flex; flex-direction:column; gap:6px; min-width:0; } #main .card-credit-inline input { width:100%; min-width:0; } #main .card-credit-inline [role="status"] { grid-column:1/-1; margin:0; } /* 客户管理：三列两行信息区。 第一行：首次绑定 / 到期时间 / 绑定设备 第二行：当前积分 / 累计充值 / 留空 字段类型顺序固定，5 个字段由三列网格自然落位，第三行末列留空。 */ @media(min-width:1001px){ #main .horizontal-license-card .card-info-row{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 16px; align-items:start; } } /* 任务记录：9 列固定布局，列宽合计 100%，消除耗时与状态之间的空白。 */ #main.tasks-page #task-table table{ width:100%; min-width:0; table-layout:fixed; } #main.tasks-page #task-table th:nth-child(n), #main.tasks-page #task-table td:nth-child(n){ text-align:left; padding:12px 10px; vertical-align:middle; } #main.tasks-page #task-table th:nth-child(1),#main.tasks-page #task-table td:nth-child(1){width:15%;} #main.tasks-page #task-table th:nth-child(2),#main.tasks-page #task-table td:nth-child(2){width:13%;} #main.tasks-page #task-table th:nth-child(3),#main.tasks-page #task-table td:nth-child(3){width:11%;} #main.tasks-page #task-table th:nth-child(4),#main.tasks-page #task-table td:nth-child(4){width:6%;text-align:center;} #main.tasks-page #task-table th:nth-child(5),#main.tasks-page #task-table td:nth-child(5){width:12%;} #main.tasks-page #task-table th:nth-child(6),#main.tasks-page #task-table td:nth-child(6){width:15%;} #main.tasks-page #task-table th:nth-child(7),#main.tasks-page #task-table td:nth-child(7){width:7%;text-align:center;} #main.tasks-page #task-table th:nth-child(8),#main.tasks-page #task-table td:nth-child(8){width:7%;text-align:center;} #main.tasks-page #task-table th:nth-child(9),#main.tasks-page #task-table td:nth-child(9){width:14%;} #main.tasks-page #task-table td:nth-child(6), #main.tasks-page #task-table td:nth-child(9){ white-space:normal; overflow-wrap:anywhere; word-break:break-word; line-height:1.45; } #main.tasks-page #task-table th:nth-child(6), #main.tasks-page #task-table th:nth-child(9){white-space:nowrap;} #main.tasks-page #task-table td:nth-child(6) .button, #main.tasks-page #task-table td:nth-child(9) .button{white-space:normal;} /* 客户管理：六项信息三列两行，授权码并入第三列第二行；紧凑间距，去掉下半部分空白。 */ #main .horizontal-license-card{ padding:20px; display:flex; flex-direction:column; gap:0; height:auto; } #main .horizontal-license-card .customer-card-head{margin:0;} #main .horizontal-license-card .card-period-row{margin:16px 0 0;padding:0;gap:6px;} #main .horizontal-license-card .card-info-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start; margin:16px 0 0; padding:0; border:0; } #main .horizontal-license-card .card-info-field{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; } #main .horizontal-license-card .card-info-field .k{ font-size:12px; font-weight:400; line-height:18px; color:var(--muted); } #main .horizontal-license-card .card-info-field .v{ margin:0; font-size:14px; font-weight:500; line-height:22px; } #main .horizontal-license-card .card-key-field .card-key-primary{ width:100%; min-width:0; max-width:100%; margin:0; padding:0; text-align:left; } #main .horizontal-license-card .card-key-field .card-key-text{ white-space:normal; overflow-wrap:anywhere; word-break:break-word; text-align:left; font-size:12px!important; font-weight:500; line-height:20px!important; } #main .horizontal-license-card .customer-card-foot{ display:flex; justify-content:flex-end; align-items:center; gap:8px; margin:18px 0 0; padding:0; border:0; min-height:0; } #main .horizontal-license-card .customer-card-foot .license-actions{ width:auto; margin:0; justify-content:flex-end; flex-wrap:nowrap; } @media(max-width:600px){ #main .horizontal-license-card .card-info-row{grid-template-columns:minmax(0,1fr);gap:16px;} } /* 任务记录：按 16/9/11/6/12/18/8/8/12 重新分配列宽，表头与数据统一居中。 */ #main.tasks-page #task-table th:nth-child(n), #main.tasks-page #task-table td:nth-child(n){ text-align:center; padding:12px 8px; vertical-align:middle; } #main.tasks-page #task-table th:nth-child(1),#main.tasks-page #task-table td:nth-child(1){width:16%;} #main.tasks-page #task-table th:nth-child(2),#main.tasks-page #task-table td:nth-child(2){width:9%;} #main.tasks-page #task-table th:nth-child(3),#main.tasks-page #task-table td:nth-child(3){width:11%;} #main.tasks-page #task-table th:nth-child(4),#main.tasks-page #task-table td:nth-child(4){width:6%;} #main.tasks-page #task-table th:nth-child(5),#main.tasks-page #task-table td:nth-child(5){width:12%;} #main.tasks-page #task-table th:nth-child(6),#main.tasks-page #task-table td:nth-child(6){width:18%;} #main.tasks-page #task-table th:nth-child(7),#main.tasks-page #task-table td:nth-child(7){width:8%;} #main.tasks-page #task-table th:nth-child(8),#main.tasks-page #task-table td:nth-child(8){width:8%;} #main.tasks-page #task-table th:nth-child(9),#main.tasks-page #task-table td:nth-child(9){width:12%;} #main.tasks-page #task-table td:nth-child(1), #main.tasks-page #task-table td:nth-child(1) .button{white-space:nowrap;} #main.tasks-page #task-table td:nth-child(3){white-space:normal;overflow-wrap:anywhere;} #main.tasks-page #task-table td:nth-child(6), #main.tasks-page #task-table td:nth-child(9){white-space:normal;overflow-wrap:anywhere;word-break:break-word;line-height:1.45;} /* [2026-10-25] customer-card footer buttons unified to dark secondary */ #main .customer-card-foot .license-actions .button{background:#25262c;border:1px solid #3c3d46;color:var(--text);} #main .customer-card-foot .license-actions .button:hover{background:#30313a;border-color:#61616e;color:var(--text);} #main .customer-card-foot .license-actions .button[data-action*="delete"]{background:#25262c;border-color:#3c3d46;color:var(--text)!important;} #main .customer-card-foot .license-actions .button[data-action*="delete"]:hover{background:#3a252b;border-color:#5c3138;color:var(--red)!important;} /* [2026-10-25] Model settings: protocol select, manual model entry, category/status */ #main.imageapi-page .ma-row select{width:100%;height:34px;min-height:34px;padding:0 10px;font-size:13px;background:#1c1d23;border:1px solid #3c3d46;border-radius:6px;color:var(--text);} #main.imageapi-page .ma-manual-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 0;padding:10px 0 0;border-top:1px solid #30313a;} #main.imageapi-page .ma-manual-bar[hidden]{display:none;} #main.imageapi-page .ma-manual-title{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;} #main.imageapi-page .ma-manual-bar input{flex:1 1 220px;min-width:160px;height:32px;min-height:32px;padding:0 10px;font-size:12px;background:#1c1d23;border:1px solid #3c3d46;border-radius:6px;color:var(--text);} #main.imageapi-page .ma-manual-bar select{flex:0 0 132px;width:132px;height:32px;min-height:32px;padding:0 8px;font-size:12px;background:#1c1d23;border:1px solid #3c3d46;border-radius:6px;color:var(--text);} #main.imageapi-page .ma-manual-hint{font-size:11px;color:var(--muted);} #main.imageapi-page .ma-model-status{display:inline-flex;align-items:center;height:20px;padding:0 6px;margin-left:6px;border-radius:4px;font-size:10px;line-height:1;white-space:nowrap;vertical-align:middle;} #main.imageapi-page .ma-model-status.retiring{background:#3a3020;border:1px solid #6b5425;color:#e7c477;} #main.imageapi-page .ma-model-status.shutdown{background:#352428;border:1px solid #5c3138;color:#e58793;} #main.imageapi-page .ma-model-item .ma-model-category{margin-left:6px;} #main.imageapi-page .ma-model-item{flex-wrap:wrap;} /* 【2026-10-26 价格卡片重做】暗色、细灰边框、统一尺寸；无蓝色大框、无重复换算说明。 */ #main.imageapi-page .ma-model-list li.ma-price-card{ flex:1 1 220px; min-width:200px; max-width:100%; height:84px; min-height:84px; padding:7px 8px; overflow:hidden; border:1px solid #34353d; border-radius:7px; background:#1b1c22; display:flex; flex-direction:column; justify-content:space-between; gap:6px; box-sizing:border-box; } #main.imageapi-page .ma-model-list li.ma-price-card.is-current{ border-color:#555863; background:#202127; box-shadow:none; } #main.imageapi-page .ma-model-list li.ma-price-card.is-retiring{ border-color:#4d432f; } #main.imageapi-page .ma-price-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; width:100%; padding:0; border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; } #main.imageapi-page .ma-price-card-head:disabled{cursor:not-allowed;opacity:.62;} #main.imageapi-page .ma-price-card-name{ min-width:0; max-height:28px; color:#ececf2; font-size:11px; font-weight:600; line-height:14px; overflow:hidden; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } #main.imageapi-page .ma-price-card.is-current .ma-price-card-name::before{ content:none; } #main.imageapi-page .ma-price-card-status{ flex:0 0 auto; display:inline-flex; align-items:center; height:16px; padding:0 5px; border:1px solid #2f7a50; border-radius:999px; background:#102018; color:#3ee08a; font-size:9px; font-weight:600; line-height:1; white-space:nowrap; } #main.imageapi-page .ma-price-card-status.retiring{ border-color:#5a4a28; background:#2a2418; color:#d9b56a; } #main.imageapi-page .ma-price-body{ display:flex; flex-direction:column; gap:2px; width:140px; max-width:100%; } #main.imageapi-page .ma-price-field{ display:flex; align-items:center; gap:5px; width:140px; max-width:100%; height:22px; padding:1px 5px; border:1px solid #34353d; border-radius:5px; background:#18191f; box-shadow:none; box-sizing:border-box; } #main.imageapi-page .ma-price-currency, #main.imageapi-page .ma-price-suffix{ flex:0 0 auto; color:#8b8f99; font-size:11px; line-height:1; } #main.imageapi-page .ma-price-input{ flex:1 1 auto; min-width:0; width:100%; height:16px; padding:0; border:0; outline:0; background:transparent; color:#f0f0f3; font-size:11.5px; box-shadow:none; font-variant-numeric:tabular-nums; appearance:textfield; -moz-appearance:textfield; } #main.imageapi-page .ma-price-input::-webkit-outer-spin-button, #main.imageapi-page .ma-price-input::-webkit-inner-spin-button{ appearance:none; margin:0; } #main.imageapi-page .ma-price-input::placeholder{color:#5f626c;} #main.imageapi-page .ma-price-field:focus-within{border-color:#5b5e69;} #main.imageapi-page .ma-price-state{ display:block; min-height:10px; color:#7f838d; font-size:9px; line-height:10px; text-align:left; } #main.imageapi-page .ma-price-state.is-saving{color:#d9a441;} #main.imageapi-page .ma-price-state.is-saved{display:none;} #main.imageapi-page .ma-price-state[hidden]{display:none;} #main.imageapi-page .ma-price-state.is-error{color:#e06c75;} #main.imageapi-page .ma-price-state.is-unpriced{color:#9a8f78;} #main.imageapi-page .ma-model-column .ma-prompt-state:empty{min-height:0;margin:0;} /* 【2026-10-26 模型面板】只保留图片/文字两栏；固定高度、各自内部滚动、隐藏滚动条。 */ #main.imageapi-page .ma-model-columns{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; height:480px; min-height:0; align-items:stretch; } #main.imageapi-page .ma-model-column{ display:flex; flex-direction:column; min-height:0; height:100%; } #main.imageapi-page .ma-model-column .ma-model-list{ flex:1 1 auto; min-height:0; max-height:none; overflow-y:auto; overflow-x:hidden; padding-right:0; scrollbar-width:none; -ms-overflow-style:none; overscroll-behavior:contain; } #main.imageapi-page .ma-model-column .ma-model-list::-webkit-scrollbar{ display:none; width:0; height:0; } #main.imageapi-page .ma-price-card-status.unpriced{ border-color:#7a5526; background:#2a1d10; color:#f0a04b; } #main.imageapi-page .ma-price-card-status.active{ border-color:#2f7a50; background:#102018; color:#3ee08a; } /* 【2026-10-26 收口】管理后台页面滚动条也隐藏；模型列表去掉焦点红/蓝框，保留滚轮滚动。 */ html, body { scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; } #main.imageapi-page .ma-model-list:focus, #main.imageapi-page .ma-model-list:focus-visible { outline: none; } #main.imageapi-page .ma-model-list { scroll-padding-bottom: 6px; padding-bottom: 6px; scroll-snap-type: y proximity; } #main.imageapi-page .ma-price-card { scroll-snap-align: start; } #main.imageapi-page .ma-price-card-head:focus, #main.imageapi-page .ma-price-card-head:focus-visible { outline: 1px solid #565966; outline-offset: 2px; } #main.imageapi-page .ma-price-input:focus, #main.imageapi-page .ma-price-input:focus-visible { outline: none; box-shadow: none; } /* 【2026-10-26 p9】图片/文字改为上下堆叠；服务商大卡片内部滚动；图片模型卡片再压缩。 */ #main.imageapi-page .ma-card { max-height: calc(100vh - 190px); overflow-y: auto; overflow-x: hidden; padding: 14px; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior: contain; } #main.imageapi-page .ma-card::-webkit-scrollbar { display: none; width: 0; height: 0; } #main.imageapi-page .ma-model-columns { display: block; height: auto; min-height: 0; gap: 0; margin-top: 6px; } #main.imageapi-page .ma-model-column { display: block; height: auto; min-height: 0; } #main.imageapi-page .ma-model-column + .ma-model-column { margin-top: 14px; padding-top: 12px; border-top: 1px solid #2a2b32; } #main.imageapi-page .ma-model-column .ma-model-list { display: flex; flex-wrap: wrap; gap: 6px; height: auto; max-height: none; overflow: visible; padding: 0; scroll-snap-type: none; } #main.imageapi-page .ma-model-list li.ma-price-card { flex: 1 1 218px; min-width: 196px; max-width: 100%; height: 62px; min-height: 62px; padding: 6px 8px; gap: 3px; } #main.imageapi-page .ma-price-card-head { gap: 4px; } #main.imageapi-page .ma-price-card-name { display: block; max-height: 14px; font-size: 10.5px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; } #main.imageapi-page .ma-price-card-status { height: 15px; padding: 0 4px; font-size: 8.5px; } #main.imageapi-page .ma-price-body { width: 120px; gap: 1px; } #main.imageapi-page .ma-price-field { width: 120px; height: 20px; padding: 1px 4px; gap: 4px; } #main.imageapi-page .ma-price-input { height: 14px; font-size: 10.5px; } #main.imageapi-page .ma-price-currency, #main.imageapi-page .ma-price-suffix { font-size: 9.5px; } #main.imageapi-page .ma-price-state { min-height: 8px; font-size: 8px; line-height: 9px; } /* 【2026-10-26 p10】图片模型严格固定列宽：两列网格，奇数最后一张不再被 flex 拉伸成整行。 */ #main.imageapi-page .ma-model-column .ma-model-list[data-image-models] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } #main.imageapi-page .ma-model-column .ma-model-list[data-image-models] > li.ma-price-card { width: 100%; min-width: 0; max-width: none; flex: none; } @media (max-width: 1100px) { #main.imageapi-page .ma-model-column .ma-model-list[data-image-models] { grid-template-columns: minmax(0, 1fr); } } /* 【2026-10-26 p11】模型设置三列：供应商配置 / 未上架 / 在售；三列独立滚动。 */ #main.imageapi-page .ma-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; height: calc(100vh - 245px); min-height: 560px; overflow: hidden; } #main.imageapi-page .ma-suppliers-panel, #main.imageapi-page .ma-shelf-panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; border: 1px solid #303138; border-radius: 10px; background: #18191e; overflow: hidden; } #main.imageapi-page .ma-layout-head { flex: 0 0 46px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 13px; border-bottom: 1px solid #2a2b32; } #main.imageapi-page .ma-layout-head h2 { margin: 0; font-size: 13px; font-weight: 600; } #main.imageapi-page .ma-layout-head > span { color: #7f808b; font-size: 10px; white-space: nowrap; } #main.imageapi-page .ma-suppliers-panel .ma-cards { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 10px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: none; -ms-overflow-style: none; } #main.imageapi-page .ma-suppliers-panel .ma-cards::-webkit-scrollbar { display: none; width: 0; height: 0; } #main.imageapi-page .ma-suppliers-panel .ma-card { width: 100%; max-height: none; overflow: visible; padding: 11px; border: 1px solid #303138; border-radius: 8px; background: #1b1c22; box-shadow: none; } #main.imageapi-page .ma-suppliers-panel .ma-head { gap: 6px; margin-bottom: 8px; } #main.imageapi-page .ma-suppliers-panel .ma-head h2 { font-size: 13px; } #main.imageapi-page .ma-suppliers-panel .ma-row { margin-top: 7px; gap: 3px; font-size: 10px; } #main.imageapi-page .ma-suppliers-panel .ma-row input { height: 29px; min-height: 29px; padding: 0 8px; font-size: 11px; } #main.imageapi-page .ma-suppliers-panel .ma-row select { height: 29px; min-height: 29px; padding: 0 8px; font-size: 11px; } #main.imageapi-page .ma-suppliers-panel .ma-actions { margin-top: 9px; padding-top: 8px; gap: 5px; border-top: 1px solid #2a2b32; } #main.imageapi-page .ma-suppliers-panel .ma-actions .button { height: 24px; min-height: 24px; padding: 0 8px; font-size: 11px; } #main.imageapi-page .ma-advanced { margin-top: 9px; padding-top: 7px; border-top: 1px solid #2a2b32; } #main.imageapi-page .ma-advanced summary { cursor: pointer; color: #8f909a; font-size: 10px; list-style: none; } #main.imageapi-page .ma-advanced summary::-webkit-details-marker { display: none; } #main.imageapi-page .ma-advanced summary:before { content: "▸ "; color: #6f707b; } #main.imageapi-page .ma-advanced[open] summary:before { content: "▾ "; } #main.imageapi-page .ma-advanced-hint { margin: 5px 0 0; color: #6f707b; font-size: 9px; line-height: 13px; } #main.imageapi-page .ma-shelf-sections { flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: minmax(0, 1.8fr) minmax(145px, .72fr); gap: 9px; padding: 9px; } #main.imageapi-page .ma-shelf-section { min-height: 0; display: flex; flex-direction: column; border: 1px solid #2b2c33; border-radius: 8px; background: #1b1c22; overflow: hidden; } #main.imageapi-page .ma-shelf-section-head { flex: 0 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 9px; border-bottom: 1px solid #2b2c33; } #main.imageapi-page .ma-shelf-section-head h3 { margin: 0; font-size: 11px; font-weight: 600; } #main.imageapi-page .ma-shelf-section-head span { color: #858691; font-size: 9px; } #main.imageapi-page .ma-shelf-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 7px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-content: start; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior: contain; } #main.imageapi-page .ma-shelf-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; } #main.imageapi-page .ma-shelf-empty { grid-column: 1 / -1; margin: 8px 2px; color: #777883; font-size: 10px; } #main.imageapi-page .ma-shelf-card { height: 74px; min-height: 74px; padding: 6px 7px; border: 1px solid #34353d; border-radius: 6px; background: #1b1c22; box-shadow: none; display: flex; flex-direction: column; gap: 3px; overflow: hidden; } #main.imageapi-page .ma-shelf-card.is-on { border-color: #2f4d3e; } #main.imageapi-page .ma-shelf-card-text { height: 66px; min-height: 66px; } #main.imageapi-page .ma-shelf-card-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; } #main.imageapi-page .ma-shelf-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e6e6ec; font-size: 10px; font-weight: 600; line-height: 14px; } #main.imageapi-page .ma-shelf-provider { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #7f808b; font-size: 8px; line-height: 10px; } #main.imageapi-page .ma-shelf-status { flex: 0 0 auto; height: 14px; padding: 0 4px; border: 1px solid #3a3b44; border-radius: 999px; color: #8c8d97; font-size: 8px; line-height: 12px; white-space: nowrap; } #main.imageapi-page .ma-shelf-status.active { border-color: #2f7a50; background: #102018; color: #3ee08a; } #main.imageapi-page .ma-shelf-status.unpriced { border-color: #7a5526; background: #2a1d10; color: #f0a04b; } #main.imageapi-page .ma-shelf-status.ready { border-color: #565863; color: #b8b9c2; } /* 【2026-10-29】标题可单击改名：给文本光标提示，不加任何外框。 */ #main.imageapi-page [data-card-name] { cursor: text; } /* 真正不可用的上架按钮（服务商停用/无 Key/列表读取中）要看得出来，不能和可点的一样 */ #main.imageapi-page .ma-shelf-status[disabled] { opacity: .45; cursor: not-allowed; } /* 【2026-10-29】分组参考价：服务商卡片上的"你的分组"，以及模型卡片上的"参考¥x"小按钮 */ #main.imageapi-page .ma-group-hint { margin: 2px 0 0; color: #8c8d97; font-size: 10px; line-height: 14px; } #main.imageapi-page .ma-shelf-ref { flex: 0 0 auto; height: 14px; padding: 0 4px; border: 1px dashed #3a3b44; border-radius: 999px; background: transparent; color: #9aa0a6; font-size: 8px; line-height: 12px; white-space: nowrap; cursor: pointer; } #main.imageapi-page .ma-shelf-ref:hover { border-color: #565863; color: #d6d7de; } /* 【2026-10-29】上游 Retiring（即将下线）的模型仍然展示，用这个标记提醒。 */ #main.imageapi-page .ma-shelf-retiring { flex: 0 0 auto; height: 14px; padding: 0 4px; border: 1px solid #7a4a26; border-radius: 999px; background: #2a1a10; color: #ff9f43; font-size: 8px; line-height: 12px; white-space: nowrap; } #main.imageapi-page .ma-shelf-foot { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: auto; } #main.imageapi-page .ma-shelf-price { display: flex; align-items: center; gap: 3px; width: 100px; height: 20px; padding: 1px 4px; border: 1px solid #34353d; border-radius: 4px; background: #18191f; box-shadow: none; color: #8b8f99; font-size: 9px; } #main.imageapi-page .ma-shelf-price-input { min-width: 0; width: 100%; height: 14px; padding: 0; border: 0; outline: 0; background: transparent; box-shadow: none; color: #f0f0f3; font-size: 10px; font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; } #main.imageapi-page .ma-shelf-price-input::-webkit-outer-spin-button, #main.imageapi-page .ma-shelf-price-input::-webkit-inner-spin-button { appearance: none; margin: 0; } #main.imageapi-page .ma-shelf-price-input:focus, #main.imageapi-page .ma-shelf-price-input:focus-visible { outline: none; box-shadow: none; } #main.imageapi-page .ma-shelf-action { height: 20px; min-height: 20px; padding: 0 6px; font-size: 9px; line-height: 18px; } #main.imageapi-page .ma-shelf-free { color: #8f909a; font-size: 9px; } @media (max-width: 1200px) { #main.imageapi-page .ma-layout { grid-template-columns: 260px minmax(0, 1fr) minmax(0, 1fr); } #main.imageapi-page .ma-shelf-scroll { grid-template-columns: minmax(0, 1fr); } } #main.imageapi-page .ma-layout-head .ma-head-tools { display: flex; align-items: center; gap: 6px; } #main.imageapi-page .ma-add-provider { width: 20px; height: 20px; padding: 0; border: 1px solid #3c3d46; border-radius: 5px; background: #25262c; color: #d8d8df; font-size: 14px; line-height: 18px; } #main.imageapi-page .ma-add-provider:hover { background: #30313a; border-color: #61616e; } #main.imageapi-page .ma-head-tools span { color: #7f808b; font-size: 10px; white-space: nowrap; } /* 【2026-10-26 p12】去掉三列内部多余的分隔线：保留外框与卡片边框，仅移除头部/区块的横线。 */ #main.imageapi-page .ma-layout-head { border-bottom: 0; } #main.imageapi-page .ma-shelf-section { border: 0; background: transparent; } #main.imageapi-page .ma-shelf-section-head { border-bottom: 0; } #main.imageapi-page .ma-suppliers-panel .ma-advanced { border-top: 0; } #main.imageapi-page .ma-suppliers-panel .ma-actions { border-top: 0; padding-top: 4px; } /* 【2026-10-26 p13】提高供应商标签可读性；去掉卡片内多余竖向空白；未定价输入明确提示。 */ #main.imageapi-page .ma-shelf-card { height: 68px; min-height: 68px; gap: 2px; } #main.imageapi-page .ma-shelf-card-text { height: 64px; min-height: 64px; } #main.imageapi-page .ma-shelf-provider { color: #a0a1ac; font-size: 9.5px; line-height: 12px; } #main.imageapi-page .ma-shelf-name { font-size: 10.5px; line-height: 14px; } #main.imageapi-page .ma-shelf-status { height: 15px; font-size: 8.5px; line-height: 13px; } #main.imageapi-page .ma-shelf-foot { margin-top: 0; } #main.imageapi-page .ma-shelf-price-input::placeholder { color: #777985; opacity: 1; } #main.imageapi-page .ma-suppliers-panel .ma-card { display: flex; flex-direction: column; } #main.imageapi-page .ma-suppliers-panel .ma-actions { margin-top: 8px; } #main.imageapi-page .ma-shelf-provider { font-weight: 500; } #main.imageapi-page .ma-shelf-status { font-size: 9px; } /* 【2026-10-26 p14】去掉图片区标题行，让首行图片卡片与左侧供应商卡片顶部对齐。 */ #main.imageapi-page .ma-shelf-section:first-child .ma-shelf-section-head { display: none; } #main.imageapi-page .ma-shelf-sections { padding-top: 6px; } #main.imageapi-page .ma-shelf-section:first-child .ma-shelf-scroll { padding-top: 4px; } /* 【2026-10-26 p15】标题统一、移除统计/排序文字；文字模型标题与顶部图片模型同字号。 */ #main.imageapi-page .ma-shelf-section-text .ma-shelf-section-head h3 { font-size: 13px; font-weight: 600; } #main.imageapi-page .ma-shelf-section-head > span { display: none; } #main.imageapi-page .ma-layout-head > span { display: none; } /* 【2026-10-26 p16】高级设置不在普通界面展示；供应商卡片收紧；图片价格框缩小。 */ #main.imageapi-page .ma-suppliers-panel .ma-advanced { display: none; } #main.imageapi-page .ma-suppliers-panel .ma-status-row:has(.ma-save-status:empty):has(.ma-catalog-status[hidden]) { display: none; } #main.imageapi-page .ma-suppliers-panel .ma-card { padding: 10px; } #main.imageapi-page .ma-suppliers-panel .ma-row { margin-top: 6px; } #main.imageapi-page .ma-suppliers-panel .ma-actions { margin-top: 7px; padding-top: 0; } #main.imageapi-page .ma-shelf-price { width: 80px; height: 18px; padding: 0 4px; gap: 3px; } #main.imageapi-page .ma-shelf-price-input { height: 12px; font-size: 9.5px; } #main.imageapi-page .ma-shelf-price > span { font-size: 9px; line-height: 1; } /* 【2026-10-26 p17】供应商名称内联编辑：双击标题直接改，无输入框、无外框。 */ #main.imageapi-page .ma-head h2[contenteditable="true"] { outline: none; border: 0; background: transparent; box-shadow: none; padding: 0; margin: 0; min-width: 2ch; cursor: text; user-select: text; } #main.imageapi-page .ma-head h2[contenteditable="true"]:focus, #main.imageapi-page .ma-head h2[contenteditable="true"]:focus-visible { outline: none; box-shadow: none; } /* 【2026-10-26 p18】供应商卡片继续收紧；价格框去掉外框；模型区滚动容器强制可用高度。 */ #main.imageapi-page .ma-suppliers-panel .ma-card { padding: 8px; } #main.imageapi-page .ma-suppliers-panel .ma-config-section { padding: 0; } #main.imageapi-page .ma-suppliers-panel .ma-head { margin-bottom: 5px; } #main.imageapi-page .ma-suppliers-panel .ma-row { margin-top: 4px; gap: 2px; } #main.imageapi-page .ma-suppliers-panel .ma-row input { height: 26px; min-height: 26px; font-size: 10.5px; } #main.imageapi-page .ma-suppliers-panel .ma-actions, #main.imageapi-page .ma-suppliers-panel .ma-card > .ma-actions { margin: 5px 0 0; padding: 0; } #main.imageapi-page .ma-suppliers-panel .ma-actions .button { height: 22px; min-height: 22px; font-size: 10px; } #main.imageapi-page .ma-cards { gap: 8px; } #main.imageapi-page .ma-shelf-sections { height: 0; flex: 1 1 0; min-height: 0; } #main.imageapi-page .ma-shelf-section { height: 100%; max-height: 100%; min-height: 0; } #main.imageapi-page .ma-shelf-scroll { height: 0; flex: 1 1 0; min-height: 0; max-height: 100%; overflow-y: auto; } #main.imageapi-page .ma-shelf-price { width: 70px; height: 18px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: text; } #main.imageapi-page .ma-shelf-price:focus-within { border: 0; box-shadow: none; } #main.imageapi-page .ma-shelf-price-input { height: 18px; font-size: 9.5px; } #main.imageapi-page .ma-shelf-price > span { font-size: 9px; } /* 【2026-10-26 p19】价格与供应商名称同字号；价格框左对齐、缩小间距；卡片等宽；停售标签。 */ #main.imageapi-page .ma-shelf-card { width: 100%; min-width: 0; box-sizing: border-box; } #main.imageapi-page .ma-shelf-price { width: 80px; height: 18px; gap: 1px; align-items: center; justify-content: flex-start; text-align: left; } #main.imageapi-page .ma-shelf-price > span { font-size: 13px; line-height: 18px; } #main.imageapi-page .ma-shelf-price-input { height: 18px; font-size: 13px; line-height: 18px; text-align: left; font-weight: 600; } #main.imageapi-page .ma-shelf-price-input::placeholder { font-size: 13px; font-weight: 400; } /* 【2026-10-26 p20】使用中徽章与客户管理完全同尺寸；价格输入区填满卡片，无死空白。 */ #main.imageapi-page [data-provider-state] .badge { height: 22px; padding: 0 8px; border-radius: 5px; font-size: 12px; font-weight: 500; line-height: 20px; gap: 5px; box-sizing: border-box; } #main.imageapi-page [data-provider-state] .badge:before { width: 5px; height: 5px; flex: 0 0 5px; } #main.imageapi-page .ma-shelf-price { flex: 1 1 auto; width: auto; min-width: 0; max-width: none; gap: 0; justify-content: flex-start; padding: 0; } #main.imageapi-page .ma-shelf-price-input { flex: 1 1 auto; width: 100%; min-width: 0; padding: 0; text-indent: 0; text-align: left; } #main.imageapi-page .ma-shelf-foot { gap: 6px; } /* 【2026-10-26 p21】全局 #main input 规则优先级更高，价格输入被加回 10px 内边距； 这里用更高优先级彻底清零，¥ 与数字紧贴。 */ #main.imageapi-page .ma-shelf-price input.ma-shelf-price-input { padding: 0 !important; height: 18px !important; min-height: 0 !important; line-height: 18px !important; border: 0 !important; background: transparent !important; text-indent: 0 !important; text-align: left !important; } /* 【2026-10-26 p22】图片/文字各自合并为一个列表；在售优先、停售在后。 */ #main.imageapi-page .ma-layout { grid-template-columns: 300px minmax(0, 1fr); } #main.imageapi-page .ma-shelf-scroll { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); } @media (max-width: 1200px) { #main.imageapi-page .ma-layout { grid-template-columns: 260px minmax(0, 1fr); } #main.imageapi-page .ma-shelf-scroll { grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); } } /* 【2026-10-26 p24】三列整体高度按视口收口，底部内容不得越出外框。 */ #main.imageapi-page .ma-layout { height: calc(100vh - 300px); min-height: 520px; max-height: calc(100vh - 300px); overflow: hidden; } #main.imageapi-page .ma-shelf-panel { height: 100%; max-height: 100%; overflow: hidden; } #main.imageapi-page .ma-shelf-sections { overflow: hidden; } #main.imageapi-page .ma-shelf-section { overflow: hidden; } #main.imageapi-page .ma-shelf-scroll { max-height: 100%; overflow-y: auto; } /* 【2026-10-26 p26】模型卡片增加呼吸空间；价格符号改为白色。 */ #main.imageapi-page .ma-shelf-sections { gap: 12px; padding: 10px; } #main.imageapi-page .ma-shelf-scroll { gap: 10px; padding: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } #main.imageapi-page .ma-shelf-card { height: 78px; min-height: 78px; padding: 8px 9px; gap: 4px; } #main.imageapi-page .ma-shelf-card-text { height: 72px; min-height: 72px; } #main.imageapi-page .ma-shelf-price > span { color: #f0f0f3; } @media (max-width: 1200px) { #main.imageapi-page .ma-shelf-scroll { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } } /* 【2026-10-26 p27】恢复 4 列卡片与本来的紧凑间距；只给 ¥ 与价格数字之间留 4px。 */ #main.imageapi-page .ma-shelf-sections { gap: 9px; padding: 9px; } #main.imageapi-page .ma-shelf-scroll { gap: 6px; padding: 7px; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); } #main.imageapi-page .ma-shelf-card { height: 68px; min-height: 68px; padding: 6px 7px; gap: 3px; } #main.imageapi-page .ma-shelf-card-text { height: 64px; min-height: 64px; } #main.imageapi-page .ma-shelf-price { gap: 4px; } @media (max-width: 1200px) { #main.imageapi-page .ma-shelf-scroll { grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); } } /* 【2026-10-26 p28】供应商配置 / 图片模型 分页：两个独立页面，不再同屏混排。 */ :is(#main.imageapi-page, #main.customers-page) .ma-tabs { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; } :is(#main.imageapi-page, #main.customers-page) .ma-tab { height: 32px; padding: 0 14px; border: 1px solid #34353d; border-radius: 6px; background: #1b1c22; color: #9a9ba6; font-size: 12px; cursor: pointer; } :is(#main.imageapi-page, #main.customers-page) .ma-tab:hover { border-color: #4b4d57; color: #e6e6ec; } :is(#main.imageapi-page, #main.customers-page) .ma-tab[aria-selected="true"] { background: #26303d; border-color: #3b4a5e; color: #dbe8fa; } #main.imageapi-page .ma-layout { height: calc(100vh - 350px); max-height: calc(100vh - 350px); min-height: 500px; grid-template-columns: minmax(0, 1fr); } #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-shelf-panel { display: none; } #main.imageapi-page .ma-layout[data-view="models"] .ma-suppliers-panel { display: none; } #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-content: start; } #main.imageapi-page .ma-layout[data-view="models"] .ma-shelf-scroll { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1200px) { #main.imageapi-page .ma-layout[data-view="models"] .ma-shelf-scroll { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { #main.imageapi-page .ma-layout[data-view="models"] .ma-shelf-scroll { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 【2026-10-26 p29】供应商页用 auto-fit，3 张卡片均分整行，右侧不再留空列。 */ #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } /* 【2026-10-26 p30】供应商卡片加高，标签/输入/操作按统一节奏分布。 */ #main.imageapi-page .ma-suppliers-panel .ma-card { min-height: 238px; padding: 12px; } #main.imageapi-page .ma-suppliers-panel .ma-head { margin-bottom: 12px; } #main.imageapi-page .ma-suppliers-panel .ma-row { margin-top: 11px; gap: 6px; } #main.imageapi-page .ma-suppliers-panel .ma-row input { height: 28px; min-height: 28px; } #main.imageapi-page .ma-suppliers-panel .ma-actions { margin-top: auto; padding-top: 13px; } /* 【2026-10-26 p31】供应商页不再留整块空白；三张卡片等宽，内部间距统一。 */ #main.imageapi-page .ma-layout[data-view="suppliers"] { height: auto; max-height: none; min-height: 0; } #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-suppliers-panel { height: auto; } #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-cards { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 12px; padding: 10px; overflow: visible; } #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-card { width: 100%; min-width: 0; min-height: 210px; padding: 12px; } #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-head { margin-bottom: 10px; } #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-row { margin-top: 10px; gap: 7px; } #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-actions { margin-top: auto; padding-top: 12px; } @media (max-width: 1100px) { #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-cards { grid-template-columns: minmax(0, 1fr); } } /* 【2026-10-26 p32】分页改为全宽双段切换，不再挤在左侧。 */ :is(#main.imageapi-page, #main.customers-page) .ma-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; width: 100%; margin: 0 0 10px; padding: 4px; border: 1px solid #2b2c33; border-radius: 8px; background: #15161a; box-sizing: border-box; } :is(#main.imageapi-page, #main.customers-page) .ma-tab { width: 100%; height: 34px; padding: 0 12px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #8f909a; font-size: 13px; font-weight: 500; cursor: pointer; } :is(#main.imageapi-page, #main.customers-page) .ma-tab:hover { background: #202128; color: #e6e6ec; } :is(#main.imageapi-page, #main.customers-page) .ma-tab[aria-selected="true"] { background: #26303d; border-color: #3b4a5e; color: #dbe8fa; } /* 【2026-10-26 p33】分页改为无框文字页签：只保留文字和选中下划线。 */ :is(#main.imageapi-page, #main.customers-page) .ma-tabs { display: flex; justify-content: center; align-items: center; gap: 38px; width: 100%; margin: 0 0 8px; padding: 0; border: 0; border-radius: 0; background: transparent; box-sizing: border-box; } :is(#main.imageapi-page, #main.customers-page) .ma-tab { width: auto; height: 36px; padding: 0 2px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: #8f909a; font-size: 13px; font-weight: 500; cursor: pointer; } :is(#main.imageapi-page, #main.customers-page) .ma-tab:hover { background: transparent; color: #e6e6ec; } :is(#main.imageapi-page, #main.customers-page) .ma-tab[aria-selected="true"] { background: transparent; border: 0; border-bottom: 2px solid #7aa7f5; color: #f0f0f3; } /* 【2026-10-26 p34】两个窄选项卡：独立小按钮，无整条外框、无大色块。 */ :is(#main.imageapi-page, #main.customers-page) .ma-tabs { display: flex; justify-content: flex-start; align-items: center; gap: 8px; width: auto; margin: 0 0 10px; padding: 0; border: 0; border-radius: 0; background: transparent; } :is(#main.imageapi-page, #main.customers-page) .ma-tab { width: 132px; height: 34px; padding: 0 12px; border: 1px solid #34353d; border-radius: 6px; background: #1b1c22; color: #9a9ba6; font-size: 12.5px; font-weight: 500; } :is(#main.imageapi-page, #main.customers-page) .ma-tab:hover { background: #202128; border-color: #4b4d57; color: #e6e6ec; } :is(#main.imageapi-page, #main.customers-page) .ma-tab[aria-selected="true"] { background: #26303d; border: 1px solid #3b4a5e; color: #dbe8fa; } /* 【2026-10-26 p35】页签上下留白统一，不再上宽下窄。 */ #main.imageapi-page .page-heading { margin-bottom: 12px; } :is(#main.imageapi-page, #main.customers-page) .ma-tabs { margin: 0 0 12px; } /* 【2026-10-26 p36】积分弹窗顶部收紧；确认按钮与调整行同一行。 */ #dialog #dialog-body:has(#card-credit-form) { padding-top: 10px; } #card-credit-form { gap: 12px; } #card-credit-form .credit-adjust-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 2px; } #card-credit-form .credit-preview { margin: 0; color: #dbe8fa; font-size: 12px; } #card-credit-form .credit-adjust-row .button { height: 32px; min-height: 32px; padding: 0 14px; white-space: nowrap; } #card-credit-form .acct-error { margin: 0; } /* AI 额度管理：与软件授权同卡片栅格 */ #main .quota-card .card-info-row{grid-template-columns:0.9fr 0.9fr 1.4fr;} #main .quota-card .card-info-field .v{overflow-wrap:anywhere;} #main .quota-card .customer-card-name{flex-direction:column;align-items:flex-start;gap:2px;} #main .quota-empty-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:220px;border-style:dashed;gap:8px;padding:24px;} #main .quota-empty-mark{width:42px;height:42px;border:1px solid #4a4d5a;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;color:#9ea3b3;} #main .quota-empty-card h2{font-size:15px;margin:0;color:#e6e6ef;} #main .quota-empty-card p{margin:0;max-width:360px;color:var(--muted);font-size:12px;line-height:1.6;} #main .quota-empty-card .button{margin-top:4px;} #main .quota-amount-row .card-period-options{flex-wrap:wrap;gap:6px;} /* 所有页面删除按钮统一为供应商配置的删除色，尺寸/内边距不变 */ #main .button[data-action*="delete"]:not(:disabled){color:var(--red);border-color:#5c3138;} #main .button[data-action*="delete"]:not(:disabled):hover{background:#3a252b;border-color:#7c414b;color:#ff9aa8;} /* 页面切换时固定滚动条占位，避免软件授权 / AI 额度卡片宽度跳动 */ body .workspace{overflow-y:scroll;} /* 供应商配置：与图片模型使用同样的固定框高；底图透明，不再只包住三张卡 */ #main.imageapi-page .ma-layout[data-view="suppliers"]{ height:calc(100vh - 350px); max-height:calc(100vh - 350px); min-height:500px; } #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-suppliers-panel{ height:100%; background:transparent; } #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-cards{ flex:1 1 auto; min-height:0; overflow-y:auto; align-content:start; } /* 模型价格参考/同步状态：只加说明行，不改现有价格输入与卡片尺寸 */ #main.imageapi-page .ma-price-meta{display:flex;align-items:center;flex-wrap:wrap;gap:5px 8px;margin-top:5px;padding-top:5px;border-top:1px solid #2a2b32;font-size:10px;line-height:14px;color:#8f909a;} #main.imageapi-page .ma-price-ref{color:#c9b07a;} #main.imageapi-page .ma-price-charge{color:#cfd0d8;} #main.imageapi-page .ma-price-time{color:#7f808b;} #main.imageapi-page .ma-price-source{color:#9fc0f1;text-decoration:none;} #main.imageapi-page .ma-price-meta .button{height:22px;min-height:22px;padding:0 7px;font-size:10px;} /* 价格同步提示放在模型卡片内部，卡片不再固定 68px 导致文字溢出到下一行 */ #main.imageapi-page .ma-shelf-card[data-kind="image"]{ height:auto; min-height:100px; max-height:none; overflow:hidden; } #main.imageapi-page .ma-shelf-card[data-kind="image"] .ma-price-meta{ margin-top:3px; padding-top:3px; gap:2px 6px; font-size:9px; line-height:12px; } #main.imageapi-page .ma-shelf-card[data-kind="image"] .ma-price-meta .button{ height:19px; min-height:19px; font-size:9px; padding:0 5px; } /* 模型卡片：三行文字，销售状态直接切换，拉开卡片间距。 */ #main.imageapi-page .ma-layout[data-view="models"] .ma-shelf-scroll { gap: 14px; padding: 12px; } #main.imageapi-page .ma-shelf-card, #main.imageapi-page .ma-shelf-card.is-on { border-color: #34353d; padding: 12px; gap: 9px; } #main.imageapi-page .ma-shelf-card[data-kind="image"] { min-height: 112px; } #main.imageapi-page .ma-shelf-card-text { height: auto; min-height: 92px; } #main.imageapi-page .ma-shelf-card .ma-shelf-provider { display: none; } #main.imageapi-page .ma-shelf-card-head { gap: 10px; align-items: flex-start; } #main.imageapi-page .ma-shelf-name { font-size: 11px; line-height: 16px; } #main.imageapi-page button.ma-shelf-status, #main.imageapi-page button.ma-shelf-status.active, #main.imageapi-page button.ma-shelf-status.unpriced { appearance: none; border: 0; background: transparent; box-shadow: none; padding: 0; margin: 0; height: auto; min-height: 0; font: inherit; font-size: 11px; line-height: 16px; flex-shrink: 0; cursor: pointer; } #main.imageapi-page button.ma-shelf-status:hover { text-decoration: underline; } #main.imageapi-page button.ma-shelf-status:focus-visible { outline: 1px solid #9fc0f1; outline-offset: 3px; } #main.imageapi-page button.ma-shelf-status:disabled { cursor: not-allowed; opacity: .5; } #main.imageapi-page .ma-shelf-card[data-kind="image"] .ma-price-meta { border: 0; padding: 0; margin: 0; gap: 4px 8px; justify-content: flex-start; font-size: 11px; line-height: 16px; } #main.imageapi-page .ma-price-sync { font-size: inherit; font-weight: 400; } #main.imageapi-page .ma-price-sync.fail { color: #ed858d; } #main.imageapi-page .ma-price-sync.ok { color: #72b99b; } #main.imageapi-page .ma-price-sync.warn { color: #d4ad65; } #main.imageapi-page .ma-price-sync.muted { color: #92939f; } /* 模型设置：图片与文字模型按内容展开，由页面统一滚动。 */ #main.imageapi-page .ma-layout[data-view="models"], #main.imageapi-page .ma-layout[data-view="models"] .ma-shelf-panel, #main.imageapi-page .ma-layout[data-view="models"] .ma-shelf-sections, #main.imageapi-page .ma-layout[data-view="models"] .ma-shelf-section, #main.imageapi-page .ma-layout[data-view="models"] .ma-shelf-scroll { height: auto; min-height: 0; max-height: none; overflow: visible; flex: none; } #main.imageapi-page .ma-layout[data-view="models"] .ma-shelf-sections { grid-template-rows: auto auto; align-content: start; gap: 20px; } #main.imageapi-page .ma-layout[data-view="models"] .ma-shelf-section-head { position: static; } /* 两组模型共用标题行：左边缘对齐卡片外边缘，上下留白统一。 */ #main.imageapi-page .ma-layout[data-view="models"] .ma-shelf-panel > .ma-layout-head { display: none; } #main.imageapi-page .ma-layout[data-view="models"] .ma-shelf-sections { gap: 0; padding: 0 9px 16px; } #main.imageapi-page .ma-layout[data-view="models"] .ma-shelf-section .ma-shelf-section-head { display: flex; flex: none; padding: 16px 12px; margin: 0; } #main.imageapi-page .ma-layout[data-view="models"] .ma-shelf-section-head h3 { margin: 0; font-size: 13px; font-weight: 600; line-height: 20px; } #main.imageapi-page .ma-layout[data-view="models"] .ma-shelf-section .ma-shelf-scroll { padding: 0 12px; } /* 以软件授权的 16px（窄屏 12px）内容内边距为统一基准，清除模型页叠加留白。 */ #main .fixed-page-frame .primary-page-content { --page-content-inset: 16px; padding: var(--page-content-inset); } #main.imageapi-page .fixed-page-frame .primary-page-content, #main.imageapi-page .fixed-page-frame .primary-page-content:has(.ma-cards > .ma-card:only-child) { padding: var(--page-content-inset); } #main.imageapi-page .ma-shell { padding: 0; margin: 0; } #main.imageapi-page .ma-layout { gap: 0; } #main.imageapi-page .ma-shelf-panel, #main.imageapi-page .ma-suppliers-panel { border: 0; background: transparent; } #main.imageapi-page .ma-layout[data-view="models"] .ma-shelf-sections { padding: 0; } #main.imageapi-page .ma-layout[data-view="models"] .ma-shelf-section .ma-shelf-scroll { padding: 0; } #main.imageapi-page .ma-layout[data-view="models"] .ma-shelf-section .ma-shelf-section-head { padding: 16px 0; justify-content: flex-start; gap: 12px; } #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-suppliers-panel > .ma-layout-head { padding-inline: 0; } #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-cards { padding: 0; } #main.imageapi-page .ma-text-current { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid #34353d; border-radius: 6px; font-size: 12px; } #main.imageapi-page .ma-text-free { color: var(--muted); } #main.imageapi-page .ma-text-search { padding: 14px 0; } #main.imageapi-page .ma-text-search input { width: min(100%,320px); } #main.imageapi-page [data-text-chooser][hidden] { display: none; } #main.imageapi-page .ma-text-candidates:not(.is-expanded) > .ma-shelf-card:nth-child(n+13) { display: none; } @media(max-width:1200px) { #main.imageapi-page .ma-text-candidates:not(.is-expanded) > .ma-shelf-card:nth-child(n+10) { display: none; } } @media(max-width:900px) { #main.imageapi-page .ma-text-candidates:not(.is-expanded) > .ma-shelf-card:nth-child(n+7) { display: none; } } @media(max-width:700px) { #main .fixed-page-frame .primary-page-content { --page-content-inset: 12px; } } /* 任务列表移除额外的第二层顶部留白，与公共内容框一致。 */ #main.tasks-page.commercial-page .fixed-page-frame .primary-page-content { padding: var(--page-content-inset); } #main.tasks-page.commercial-page .fixed-page-frame .primary-page-content > .panel.task-records-panel { padding: 0; } /* 模型卡片按内容收紧；同步和展开操作使用无框图标。 */ #main.imageapi-page .ma-shelf-card[data-kind="image"], #main.imageapi-page .ma-shelf-card[data-kind="text"] { height: auto; min-height: 0; padding: 12px; gap: 8px; } #main.imageapi-page .ma-sync-prices, #main.imageapi-page .ma-sync-prices:hover, #main.imageapi-page .ma-text-fold, #main.imageapi-page .ma-text-fold:hover { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: transparent; box-shadow: none; color: var(--text); padding: 0; min-height: 20px; height: 20px; cursor: pointer; } #main.imageapi-page .ma-sync-prices:hover, #main.imageapi-page .ma-text-fold:hover { color: #9fc0f1; } #main.imageapi-page .ma-text-fold:focus-visible { outline: 1px solid #9fc0f1; outline-offset: 3px; } /* 待核实与删除操作共用红色。 */ #main.imageapi-page .ma-price-sync.fail { color: var(--red); } /* 红色文字统一纯红；未定价的停售保留禁用行为但不降低文字明度。 */ :root { --red: #ff0000; } body .danger, body .badge.fail, body .is-error, body .cloud-upload-message.is-error, body .rel-log li.rel-log-fail, body #main .ma-price-state.is-error, body #main .ma-price-sync.fail, body #main .button[data-action*="delete"], body #main .button[data-action*="delete"]:hover, body #main .customer-card-foot .license-actions .button[data-action*="delete"], body #main .customer-card-foot .license-actions .button[data-action*="delete"]:hover, body #xj-confirm[data-danger] [data-xj-confirm="1"], body #xj-confirm[data-danger] [data-xj-confirm="1"]:hover { color: #ff0000 !important; } #main.imageapi-page button.ma-shelf-status.unpriced, #main.imageapi-page button.ma-shelf-status.unpriced:disabled { color: #ff0000; opacity: 1; -webkit-text-fill-color: #ff0000; } /* 模型卡片供应商单独成行，四行统一节奏，按内容自然撑高。 */ #main.imageapi-page .ma-shelf-card .ma-shelf-provider { display: block; margin: 0; color: var(--muted); font-size: 11px; line-height: 16px; font-weight: 400; } #main.imageapi-page .ma-shelf-card[data-kind="image"], #main.imageapi-page .ma-shelf-card[data-kind="text"] { gap: 8px; } /* 顶部分页两个等宽长条，与下方卡片区域左右对齐。 */ :is(#main.imageapi-page, #main.customers-page) .ma-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 14px; } :is(#main.imageapi-page, #main.customers-page) .ma-tabs .ma-tab { width: 100%; min-width: 0; height: 36px; text-align: center; } /* Price monitoring: ordinary content only; existing scrolling is unchanged. */ .ma-price-monitor{margin:0 0 18px;border:1px solid var(--border,#34363e);border-radius:8px;padding:12px 14px;} .ma-price-monitor>summary{cursor:pointer;font-weight:600;} .ma-price-monitor .pm-table{width:100%;table-layout:fixed;font-size:12px;border-collapse:collapse;} .pm-table th,.pm-table td{padding:10px 8px;text-align:left;vertical-align:top;border-bottom:1px solid #34363e;word-break:break-word;} .pm-table th:nth-child(2){width:38%;} .pm-quote{display:grid;gap:4px;margin-bottom:10px;} .pm-quote strong{font-weight:500;color:#aeb4c0;} .ma-price-monitor pre{white-space:pre-wrap;word-break:break-word;font:inherit;} .ma-price-monitor h4{margin:20px 0 8px;} /* API03: keep editable customer price once; only evidenced exceptions add a row. */ #main.imageapi-page .ma-shelf-credits { flex: 0 1 auto; min-width: 0; max-width: 50%; font-size: 11px; line-height: 16px; color: var(--text); overflow-wrap: anywhere; } #main.imageapi-page .ma-shelf-card[data-kind="image"] .ma-price-meta .ma-price-sync { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; } /* On narrow cards keep points together on the next line when necessary. */ #main.imageapi-page .ma-shelf-card[data-kind="image"] .ma-shelf-foot { flex-wrap: wrap; } #main.imageapi-page .ma-shelf-card[data-kind="image"] .ma-shelf-price { flex: 1 1 80px; } #main.imageapi-page .ma-shelf-credits { max-width: 100%; } /* Three equal model-setting tabs; independent price-monitor content. */ :is(#main.imageapi-page, #main.customers-page) .ma-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } :is(#main.imageapi-page, #main.customers-page) .ma-tabs .ma-tab { min-width: 0; white-space: normal; height: auto; min-height: 34px; padding: 8px 6px; } #main.imageapi-page .ma-monitor-panel { display: none; min-width: 0; } #main.imageapi-page .ma-layout[data-view="monitor"] { display: none; } #main.imageapi-page .ma-layout[data-view="monitor"] + .ma-monitor-panel { display: block; } #main.imageapi-page .ma-monitor-panel > .ma-shelf-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; } #main.imageapi-page .ma-monitor-panel > .ma-shelf-section-head h3 { margin: 0; font-size: 13px; } :is(#main.imageapi-page, #main.customers-page) .ma-tabs { align-items: stretch; } @media(max-width:700px) { :is(#main.imageapi-page, #main.customers-page) .ma-tabs { gap: 6px; } :is(#main.imageapi-page, #main.customers-page) .ma-tabs .ma-tab { font-size: 11px; line-height: 16px; padding: 8px 4px; } } /* Align the three tabs with the three supplier cards. */ #main.imageapi-page .ma-shell { --model-column-gap: 14px; } :is(#main.imageapi-page, #main.customers-page) .ma-tabs, #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-cards { gap: var(--model-column-gap); } @media(max-width:700px) { #main.imageapi-page .ma-shell { --model-column-gap: 6px; } } /* Separate the explanation from the table and center header labels vertically. */ #main.imageapi-page .ma-price-monitor > .hint { margin: 12px 0 18px; line-height: 1.7; } #main.imageapi-page .ma-price-monitor .pm-table thead th { height: 48px; padding: 12px; line-height: 20px; vertical-align: middle; } /* Whole-section disclosure; no list rebuild and no scroll implementation changes. */ #main.imageapi-page .ma-model-title { display: flex; align-items: center; gap: 2px; min-width: 0; } #main.imageapi-page .ma-model-title > .ma-text-fold { width: 28px; height: 28px; min-height: 28px; flex-shrink: 0; } #main.imageapi-page .ma-layout[data-view="models"] .ma-shelf-section-head > .ma-sync-prices { margin-left: auto; } #main.imageapi-page .ma-shelf-scroll[hidden] { display: none; } /* Paid archive: same model-setting tab component, two equal columns. */ #main.customers-page { --model-column-gap: 14px; } #main.customers-page .license-archive-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); } #main.customers-page .horizontal-license-card .customer-card-name { max-width:calc(100% - 84px); min-width:0; gap:6px; } #main.customers-page .customer-card-name .link-name { flex:0 1 auto; min-width:0; max-width:52%; } #main.customers-page .contact-note { width:17ch; max-width:45%; min-width:0; height:24px; min-height:24px; padding:0 4px; font-size:12px; line-height:22px; border:1px solid var(--border); border-radius:4px; text-overflow:ellipsis; } #main.customers-page .customer-card-foot { flex-wrap:nowrap; } #main.customers-page .customer-card-foot .paid-archive-action { margin-right:auto; flex-shrink:0; } #main.customers-page .customer-card-foot .license-actions { width:auto; } .paid-history pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; } @media(max-width:700px) { #main.customers-page { --model-column-gap:6px; } } #main.customers-page .customer-card-name .contact-note { height:24px!important; min-height:24px!important; line-height:22px!important; padding:0 4px!important; width:17ch; box-sizing:border-box; } /* Contact note: quiet inline text, editing only on demand. */ #main.customers-page .horizontal-license-card .customer-card-name { gap:8px; align-items:baseline; } #main.customers-page .customer-card-name .contact-slot { display:inline-flex; align-items:baseline; flex:0 1 19ch; width:19ch; max-width:48%; min-width:0; height:24px; font-size:12px; font-weight:400; } #main.customers-page .customer-card-name .contact-display { display:block; width:100%; min-width:0; height:24px!important; min-height:24px!important; padding:0 4px!important; border:1px solid transparent; border-radius:4px; background:transparent; box-shadow:none; font-family:inherit; font-size:12px!important; font-weight:400!important; line-height:22px!important; color:#aaadb7; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:text; } #main.customers-page .customer-card-name .contact-display.is-empty { color:#747985; } #main.customers-page .customer-card-name .contact-display:hover { background:#272930; color:#d0d3dc; } #main.customers-page .customer-card-name .contact-display:focus-visible { outline:1px solid #769dd3; outline-offset:1px; } #main.customers-page .customer-card-name .contact-slot .contact-note { width:100%; max-width:100%; min-width:0; height:24px!important; min-height:24px!important; padding:0 4px!important; border:1px solid #647fa7; background:#17191e; border-radius:4px; font-size:12px!important; font-weight:400; line-height:22px!important; outline:none; box-shadow:0 0 0 2px #7aa7f512; } /* Archived is a status, with no archive-detail dialog entry. */ #main.customers-page .archive-state { cursor:default; } #main.customers-page .contact-readonly { cursor:default; } #main.customers-page .contact-readonly:hover { background:transparent; color:#aaadb7; } /* Keep customer labels visually quiet in hover, focus and inline-edit states. */ #main.customers-page .customer-card-name :is(.link-name,.name-edit-input,.contact-display,.contact-note), #main.customers-page .customer-card-name :is(.link-name,.name-edit-input,.contact-display,.contact-note):is(:hover,:focus,:focus-visible,:active) { text-decoration:none!important; background:transparent!important; border-color:transparent!important; outline:none!important; box-shadow:none!important; } #main.customers-page .customer-card-name .link-name:hover { color:#e8e7ee; } #main.customers-page .customer-card-name .contact-display:not(.is-empty):hover { color:#aaadb7; } #main.customers-page .customer-card-name .contact-display.is-empty:hover { color:#747985; } /* Software license key uses the full card row. */ #main .authorization-card.horizontal-license-card .card-key-field { grid-column: 1 / -1; } #main .authorization-card.horizontal-license-card .card-key-field .card-key-text { white-space: nowrap; overflow-wrap: normal; word-break: normal; } /* 云端更新盒固定高度：上传/报错时只更新内部状态，不改变卡片尺寸。 */ #main .cc-cloud-card .cloud-upload-zone { height: 190px; min-height: 190px; max-height: 190px; overflow: hidden; box-sizing: border-box; } #main .cc-cloud-card #cloud-upload-name { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #main .cc-cloud-card .cloud-upload-message { height: 32px; min-height: 32px; max-height: 32px; line-height: 16px; margin: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } #main .cc-cloud-card #cloud-upload-progress { flex: 0 0 6px; } /* 模型设置 · 供应商配置：桌面固定四列，窄屏逐级降列。 */ #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } @media (max-width: 1280px) { #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 960px) { #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-cards { grid-template-columns: minmax(0, 1fr); } } /* 模型设置统一页：四张供应商卡 + 选中供应商的模型/参考价，不再使用三个独立大模块。 */ #main.imageapi-page .ma-tabs { display: none !important; } #main.imageapi-page .ma-layout { display: block; height: auto; max-height: none; min-height: 0; overflow: visible; grid-template-columns: none; } #main.imageapi-page .ma-suppliers-panel { display: block; height: auto; min-height: 0; overflow: visible; border: 0; background: transparent; } #main.imageapi-page .ma-suppliers-panel .ma-layout-head { height: 32px; padding: 0; border: 0; } #main.imageapi-page .ma-suppliers-panel .ma-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; flex: none; min-height: 0; padding: 0; gap: 12px; overflow: visible; } #main.imageapi-page .ma-card.is-selected { border-color: #7f9cc9; box-shadow: 0 0 0 1px rgba(127,156,201,.45), 0 0 0 3px rgba(127,156,201,.10); } #main.imageapi-page .ma-provider-detail { margin-top: 18px; min-width: 0; } #main.imageapi-page .ma-detail-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 10px; } #main.imageapi-page .ma-detail-head h2 { margin: 0; color: #e8edf5; font-size: 14px; font-weight: 600; } #main.imageapi-page .ma-detail-head p { margin: 0; color: #858b98; font-size: 11px; } #main.imageapi-page .ma-provider-detail .ma-shelf-panel { height: auto; min-height: 0; overflow: visible; border: 0; background: transparent; } #main.imageapi-page .ma-provider-detail .ma-shelf-panel > .ma-layout-head { display: none; } #main.imageapi-page .ma-provider-detail .ma-shelf-scroll { grid-template-columns: repeat(4, minmax(0, 1fr)); } #main.imageapi-page .ma-provider-detail .ma-monitor-panel { height: auto; max-height: none; margin-top: 14px; padding: 0; overflow: visible; border: 0; background: transparent; } #main.imageapi-page .ma-provider-detail .ma-price-monitor { margin-top: 0; } @media (max-width: 1280px) { #main.imageapi-page .ma-suppliers-panel .ma-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } #main.imageapi-page .ma-provider-detail .ma-shelf-scroll { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 960px) { #main.imageapi-page .ma-suppliers-panel .ma-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } #main.imageapi-page .ma-provider-detail .ma-shelf-scroll { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { #main.imageapi-page .ma-suppliers-panel .ma-cards { grid-template-columns: minmax(0, 1fr); } #main.imageapi-page .ma-provider-detail .ma-shelf-scroll { grid-template-columns: minmax(0, 1fr); } } /* 选中供应商后的模型/参考价必须显示，覆盖旧的“供应商视图隐藏模型面板”规则。 */ #main.imageapi-page .ma-layout[data-view="suppliers"] { display: block; height: auto; max-height: none; min-height: 0; } #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-suppliers-panel { display: block; height: auto; min-height: 0; overflow: visible; border: 0; background: transparent; } #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: none; min-height: 0; overflow: visible; padding: 0; } #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-provider-detail .ma-shelf-panel { display: block; height: auto; min-height: 0; overflow: visible; border: 0; background: transparent; } @media (max-width: 1280px) { #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 960px) { #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-cards { grid-template-columns: minmax(0, 1fr); } } /* 统一页中的模型区使用普通文档流，不再沿用旧三栏的 0 高度/内部滚动布局。 */ #main.imageapi-page .ma-provider-detail .ma-shelf-sections { height: auto; max-height: none; flex: none; min-height: 0; overflow: visible; } #main.imageapi-page .ma-provider-detail .ma-shelf-section { height: auto; max-height: none; min-height: 0; overflow: visible; } #main.imageapi-page .ma-provider-detail .ma-shelf-scroll { height: auto; max-height: none; overflow: visible; } #main.imageapi-page .ma-provider-detail .ma-shelf-section:first-child .ma-shelf-section-head { display: flex; } /* 模型区与供应商卡片左右对齐；两段模型正常文档流，价格监控必须在文字模型之后。 */ #main.imageapi-page .ma-provider-detail { margin-top: 14px; } #main.imageapi-page .ma-provider-detail .ma-shelf-sections { display: block; grid-template-rows: none; height: auto; min-height: 0; padding: 0; gap: 0; overflow: visible; } #main.imageapi-page .ma-provider-detail .ma-shelf-section { display: block; height: auto; max-height: none; min-height: 0; margin: 0; padding: 0; overflow: visible; border: 0; background: transparent; } #main.imageapi-page .ma-provider-detail .ma-shelf-section + .ma-shelf-section { margin-top: 18px; } #main.imageapi-page .ma-provider-detail .ma-shelf-section-head { padding: 0; border: 0; margin: 0 0 8px; height: auto; min-height: 24px; } #main.imageapi-page .ma-provider-detail .ma-shelf-scroll { height: auto; max-height: none; min-height: 0; padding: 0; overflow: visible; gap: 10px; } #main.imageapi-page .ma-provider-detail .ma-monitor-panel { position: static; display: block; clear: both; margin-top: 20px; } #main.imageapi-page .ma-provider-detail .ma-price-monitor { margin: 0; } /* 统一模型区：标题字号、左右边界、段间距与供应商配置一致。 */ #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-cards { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-card { min-width: 0; width: auto; } #main.imageapi-page .ma-provider-detail { margin-top: 14px; } #main.imageapi-page .ma-provider-detail .ma-shelf-sections { display: block !important; height: auto !important; min-height: 0 !important; padding: 0 !important; overflow: visible !important; } #main.imageapi-page .ma-provider-detail .ma-shelf-section { display: block !important; height: auto !important; max-height: none !important; min-height: 0 !important; padding: 0 !important; overflow: visible !important; border: 0 !important; background: transparent !important; } #main.imageapi-page .ma-provider-detail .ma-shelf-section-head { display: flex !important; height: auto !important; min-height: 26px !important; padding: 0 !important; margin: 0 0 8px !important; border: 0 !important; } #main.imageapi-page .ma-provider-detail .ma-shelf-section-head h3, #main.imageapi-page .ma-provider-detail .ma-monitor-panel > .ma-shelf-section-head h3 { margin: 0 !important; color: #e8edf5 !important; font-size: 13px !important; font-weight: 600 !important; line-height: 20px !important; } #main.imageapi-page .ma-provider-detail .ma-shelf-section + .ma-shelf-section { margin-top: 18px !important; } #main.imageapi-page .ma-provider-detail .ma-shelf-scroll { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; height: auto !important; max-height: none !important; min-height: 0 !important; padding: 0 !important; overflow: visible !important; gap: 10px !important; } #main.imageapi-page .ma-provider-detail .ma-monitor-panel { display: block !important; position: static !important; height: auto !important; max-height: none !important; margin-top: 18px !important; padding: 0 !important; overflow: visible !important; } #main.imageapi-page .ma-provider-detail .ma-monitor-panel > .ma-shelf-section-head { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 !important; margin: 0 0 8px !important; border: 0 !important; } #main.imageapi-page .ma-provider-detail .ma-price-monitor { margin: 0 !important; } @media (max-width: 1280px) { #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-cards, #main.imageapi-page .ma-provider-detail .ma-shelf-scroll { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 960px) { #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-cards, #main.imageapi-page .ma-provider-detail .ma-shelf-scroll { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 640px) { #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-cards, #main.imageapi-page .ma-provider-detail .ma-shelf-scroll { grid-template-columns: minmax(0, 1fr) !important; } } /* 供应商卡按可用宽度自动铺满：3 张时均分整行，4 张时显示 4 张，窄屏自动减少。 */ #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; gap: 12px !important; } #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-card { width: auto !important; min-width: 0 !important; } /* 供应商卡 -> 图片模型 -> 文字模型 -> 价格监控，统一段间距。 */ #main.imageapi-page .ma-provider-detail { margin-top: 12px !important; } #main.imageapi-page .ma-provider-detail .ma-shelf-sections { padding: 0 !important; } #main.imageapi-page .ma-provider-detail .ma-shelf-section { margin: 0 !important; } #main.imageapi-page .ma-provider-detail .ma-shelf-section + .ma-shelf-section { margin-top: 14px !important; } #main.imageapi-page .ma-provider-detail .ma-shelf-section-head { margin: 0 0 8px !important; } #main.imageapi-page .ma-provider-detail .ma-monitor-panel { margin-top: 14px !important; } #main.imageapi-page .ma-provider-detail .ma-monitor-panel > .ma-shelf-section-head { margin: 0 0 8px !important; } /* 模型页统一垂直节奏：页头、配置标题、卡片、各模型段、价格监控使用同一组间距。 */ #main.imageapi-page > .page-heading { min-height: 0 !important; margin: 0 0 12px !important; } #main.imageapi-page .ma-shell { margin: 0 !important; padding: 0 !important; } #main.imageapi-page .ma-layout[data-view="suppliers"] .ma-suppliers-panel > .ma-layout-head { height: 22px !important; min-height: 22px !important; margin: 0 0 8px !important; padding: 0 !important; } #main.imageapi-page .ma-provider-detail { margin-top: 12px !important; } #main.imageapi-page .ma-provider-detail .ma-shelf-section-head { margin: 0 0 8px !important; } #main.imageapi-page .ma-provider-detail .ma-shelf-section + .ma-shelf-section { margin-top: 12px !important; } #main.imageapi-page .ma-provider-detail .ma-monitor-panel { margin-top: 12px !important; } #main.imageapi-page .ma-provider-detail .ma-monitor-panel > .ma-shelf-section-head { margin: 0 0 8px !important; } /* 价格监控标题与图片模型一致；折叠内容不再包在二级框里。 */ #main.imageapi-page .ma-provider-detail .ma-monitor-panel > .ma-shelf-section-head { padding: 0 !important; margin: 0 0 8px !important; border: 0 !important; } #main.imageapi-page .ma-provider-detail .ma-monitor-body { margin-top: 0 !important; } #main.imageapi-page .ma-provider-detail .ma-price-monitor-content { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; } #main.imageapi-page .ma-provider-detail .ma-price-monitor-content > .hint { margin-top: 0 !important; } /* 供应商配置 / 价格监控 同一行标题；价格监控在供应商卡后、模型前。 */ #main.imageapi-page .ma-suppliers-panel > .ma-layout-head h2 { display: inline-flex; align-items: center; gap: 0; } #main.imageapi-page .ma-head-slash { margin: 0 7px; color: #5e6470; font-weight: 400; } #main.imageapi-page .ma-monitor-title { display: inline-flex; align-items: center; gap: 3px; height: 22px; margin: 0; padding: 0; border: 0; background: transparent; color: #e8edf5; font-size: 13px; font-weight: 600; line-height: 22px; cursor: pointer; } #main.imageapi-page .ma-monitor-title svg { width: 14px; height: 14px; } #main.imageapi-page .ma-head-tools { display: flex; align-items: center; gap: 8px; } #main.imageapi-page .ma-provider-detail .ma-monitor-panel { margin: 0 0 12px !important; } #main.imageapi-page .ma-provider-detail .ma-shelf-panel { margin-top: 12px !important; } #main.imageapi-page .ma-provider-detail .ma-monitor-body { margin: 0 !important; } /* 模型设置拆成两个模块：左供应商配置，右价格监控（软件授权同款分页）。 */ #main.imageapi-page .ma-tabs { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin: 0 0 12px !important; } #main.imageapi-page .ma-tabs .ma-tab { min-width: 0; height: 36px; min-height: 36px; padding: 0 12px; border-radius: 7px; white-space: nowrap; } #main.imageapi-page .ma-monitor-panel { padding: 0 !important; border: 0 !important; background: transparent !important; } #main.imageapi-page .ma-monitor-panel > .ma-layout-head { display: flex !important; align-items: center !important; justify-content: space-between !important; height: 22px !important; min-height: 22px !important; margin: 0 0 8px !important; padding: 0 !important; border: 0 !important; } #main.imageapi-page .ma-monitor-panel > .ma-layout-head h2 { font-size: 13px !important; font-weight: 600 !important; line-height: 20px !important; } #main.imageapi-page .ma-monitor-panel .ma-monitor-body { margin: 0 !important; } #main.imageapi-page .ma-monitor-panel .ma-price-monitor-content { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; } /* 选中供应商只用名称变绿标识，不再给整张卡加外框。 */ #main.imageapi-page .ma-card.is-selected { border-color: inherit !important; box-shadow: none !important; } #main.imageapi-page .ma-card.is-selected [data-card-name] { color: #4fd18b !important; } /* 两个分页与软件授权一致：等宽、14px 间距，并与供应商卡片左右边界对齐。 */ #main.imageapi-page .ma-tabs { gap: 14px !important; width: auto !important; margin: 0 8px 12px 14px !important; } #main.imageapi-page .ma-tabs .ma-tab { width: 100% !important; height: 36px !important; min-height: 36px !important; } /* 价格监控表格：正规四列表格，列宽固定、表头与内容不重叠。 */ #main.imageapi-page .ma-monitor-panel .ma-price-monitor-content { margin: 0 !important; padding: 16px !important; border: 1px solid #2b2c33 !important; border-radius: 10px !important; background: #18191e !important; } #main.imageapi-page .ma-monitor-panel .ma-price-monitor-content > .hint { margin: 0 0 12px !important; color: #9aa1ae !important; font-size: 12px !important; line-height: 1.75 !important; } #main.imageapi-page .ma-monitor-panel .pm-table { width: 100% !important; table-layout: fixed !important; border-collapse: collapse !important; margin: 0 0 18px !important; font-size: 12px !important; } #main.imageapi-page .ma-monitor-panel .pm-table thead th { height: auto !important; padding: 11px 12px !important; background: #202126 !important; color: #aeb4c0 !important; font-size: 12px !important; font-weight: 500 !important; line-height: 18px !important; text-align: left !important; vertical-align: middle !important; white-space: normal !important; } #main.imageapi-page .ma-monitor-panel .pm-table tbody td { padding: 12px !important; color: #cfd4dd !important; font-size: 12px !important; line-height: 1.65 !important; text-align: left !important; vertical-align: top !important; border-bottom: 1px solid #2b2c33 !important; word-break: break-word !important; } #main.imageapi-page .ma-monitor-panel .pm-price-table th:nth-child(1) { width: 22% !important; } #main.imageapi-page .ma-monitor-panel .pm-price-table th:nth-child(2) { width: 30% !important; } #main.imageapi-page .ma-monitor-panel .pm-price-table th:nth-child(3) { width: 26% !important; } #main.imageapi-page .ma-monitor-panel .pm-price-table th:nth-child(4) { width: 22% !important; } #main.imageapi-page .ma-monitor-panel .pm-alert-table th:nth-child(1) { width: 17% !important; } #main.imageapi-page .ma-monitor-panel .pm-alert-table th:nth-child(2) { width: 28% !important; } #main.imageapi-page .ma-monitor-panel .pm-alert-table th:nth-child(3) { width: 37% !important; } #main.imageapi-page .ma-monitor-panel .pm-alert-table th:nth-child(4) { width: 18% !important; } #main.imageapi-page .ma-monitor-panel .pm-table .pm-quote { display: grid; gap: 4px; margin: 0 0 8px; } #main.imageapi-page .ma-monitor-panel .pm-table .pm-quote:last-child { margin-bottom: 0; } #main.imageapi-page .ma-monitor-panel .pm-table details summary { cursor: pointer; color: #aeb4c0; } #main.imageapi-page .ma-monitor-panel .pm-table pre { margin: 8px 0 0; white-space: pre-wrap; word-break: break-word; font: 11px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; } #main.imageapi-page .ma-monitor-panel .ma-price-monitor-content > h4 { margin: 20px 0 10px !important; color: #e8edf5; font-size: 13px; font-weight: 600; line-height: 20px; } /* 登录页备案号：固定底部，不遮挡登录框。 */ .login-icp { position: fixed; left: 0; right: 0; bottom: 16px; z-index: 1; text-align: center; color: #7f8490; font-size: 12px; line-height: 18px; } .login-icp a { color: #7f8490; text-decoration: none; } .login-icp a:hover { color: #b8c0ce; } /* model-align1-20261114: price/alert tables 4 equal centered columns, aligned to license content edge */ /* 2026-11-14 模型设置 · 价格监控列对齐（候选，仅 CSS） 目标： 1) 价格表与告警表统一为 4 等分列（25%），列线完全一致； 2) 表头与内容水平居中； 3) 价格区左右边与「软件授权」内容框对齐（去掉 tabs 的 14px 左边距， 表格改为满宽，说明文字保留 16px 内边距）。 仅作用于 #main.imageapi-page，不改其他页面、接口、数据或滚动。 */ /* tabs 与价格区左边缘对齐到内容框（原为 margin-left:14px / margin-right:8px） */ #main.imageapi-page .ma-tabs { margin: 0 0 12px !important; } /* 价格区保留外框，但表格满宽；说明/小标题保留水平内边距 */ #main.imageapi-page .ma-monitor-panel .ma-price-monitor-content { padding: 16px 0 !important; } #main.imageapi-page .ma-monitor-panel .ma-price-monitor-content > .hint, #main.imageapi-page .ma-monitor-panel .ma-price-monitor-content > h4 { padding: 0 16px !important; } @media (min-width: 761px) { /* 价格表、告警表、价格变化表统一 4 等分列 */ #main.imageapi-page .ma-monitor-panel .pm-table th:nth-child(n), #main.imageapi-page .ma-monitor-panel .pm-table td:nth-child(n) { width: 25% !important; } #main.imageapi-page .ma-monitor-panel .pm-table thead th, #main.imageapi-page .ma-monitor-panel .pm-table tbody td { text-align: center !important; } #main.imageapi-page .ma-monitor-panel .pm-table .pm-quote { justify-items: center; text-align: center; } /* 证据展开内容保持左对齐，避免 JSON/长文本居中难读 */ #main.imageapi-page .ma-monitor-panel .pm-table details { display: inline-block; text-align: left; } }