:root{font-family:"Segoe UI","Microsoft YaHei",sans-serif;color:#1f2937;background:#f5f7fb;font-size:14px}*{box-sizing:border-box}body{margin:0}header{height:72px;background:white;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;padding:0 40px}header>div{display:flex;align-items:center;gap:14px}.mark{background:#244bd8;color:white;border-radius:9px;padding:8px 13px;font-weight:700}.badge{font-size:12px;background:#eef2ff;color:#4259a7;padding:4px 8px;border-radius:5px}main{max-width:1400px;margin:28px auto;padding:0 28px}h1{font-size:25px;margin:4px 0 12px}h2{font-size:18px;margin:0 0 18px}.card{background:white;border:1px solid #e2e8f0;border-radius:12px;padding:24px;margin-bottom:20px;box-shadow:0 3px 12px #20305a04}.login{max-width:420px;margin:80px auto}.muted{color:#64748b;line-height:1.8}.eyebrow{font-size:12px;color:#64748b;letter-spacing:1px;margin:0 0 8px}label{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;font-size:13px}input,select{font:inherit;padding:10px 12px;border:1px solid #cbd5e1;border-radius:7px;width:100%;background:white;color:#1f2937}input:focus,select:focus{outline:2px solid #b7c6ff;border-color:#244bd8}button{font:inherit;border:0;border-radius:7px;background:#244bd8;color:white;padding:10px 16px;cursor:pointer;white-space:nowrap}button:hover{filter:brightness(.94)}button:disabled{opacity:.55;cursor:wait}.secondary{background:#eef2f8;color:#334155}.danger{background:#fff0ee;color:#bc3636}.hidden{display:none!important}.inline{display:flex;gap:8px;align-items:center}.inline input{min-width:0}.workspace{display:grid;grid-template-columns:280px minmax(0,1fr);gap:20px}.workspace aside{align-self:start}.project-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.empty{padding:80px 30px;text-align:center}.project-item{display:block;background:white;color:#334155;width:100%;text-align:left;margin-top:9px;border:1px solid #e2e8f0;white-space:normal;overflow-wrap:anywhere}.project-item.selected{background:#edf2ff;color:#244bd8;border-color:#c4d0ff}.rule-form{display:grid;grid-template-columns:1fr 100px 1.2fr auto;gap:12px;align-items:end}.rule-form button{margin-bottom:16px}.key-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}fieldset{border:1px solid #e2e8f0;border-radius:7px;margin:0 0 16px;padding:12px}legend{color:#64748b;font-size:12px}.choices label{flex-direction:row;align-items:center;margin:7px 0;overflow-wrap:anywhere}.choices input{width:auto}nav{display:flex;gap:12px;margin-bottom:24px;border-bottom:1px solid #e2e8f0}.tab{background:none;color:#64748b;border-radius:0;padding:12px 16px;border-bottom:2px solid transparent}.tab.active{color:#244bd8;border-color:#244bd8}table{border-collapse:collapse;width:100%;margin-top:18px;font-size:13px}th,td{text-align:left;border-bottom:1px solid #edf0f5;padding:12px 10px;vertical-align:top;overflow-wrap:anywhere}th{color:#64748b;font-weight:500;background:#f8fafc}td button{padding:6px 10px;margin:0 6px 6px 0;font-size:12px}.table-wrap{overflow-x:auto}.secret{background:#fffbeb;border:1px solid #f6d988;padding:16px;border-radius:8px;margin-top:18px}.secret code{display:block;word-break:break-all;margin:12px 0;font-size:14px}pre{padding:20px;border-radius:8px;background:#101b30;color:#cde2ff;overflow:auto;line-height:1.7;white-space:pre-wrap}.narrow{max-width:760px}#message{padding:12px 18px;background:#fff1f0;color:#a32626;border:1px solid #ffc9c5;border-radius:8px;margin-bottom:20px;overflow-wrap:anywhere}.key-entry .choices{margin:12px 0}.key-meta{font-size:12px;color:#64748b;line-height:1.8}@media(max-width:950px){header{padding:0 20px}.workspace{grid-template-columns:1fr}.rule-form{grid-template-columns:1fr 100px}.key-fields{grid-template-columns:1fr}main{padding:0 16px}.project-heading{flex-wrap:wrap}.badge{display:none}}
.key-editor,.key-groups{margin:12px 0}.key-groups details,#key-permissions details{margin:8px 0;padding:8px 10px;border:1px solid #e2e8f0;border-radius:6px}.key-editor summary,#key-permissions summary{cursor:pointer;color:#334155;padding:5px 0}

.method-tools{display:flex;align-items:end;gap:8px;flex-wrap:wrap;margin:8px 0 12px}.method-tools label{margin:0;min-width:140px}.method-tools button{padding:8px 12px}.choices label[hidden]{display:none}

#view-keys .key-create{margin-bottom:28px}
.key-list-heading{display:flex;align-items:baseline;gap:12px;margin:0 0 12px}
.key-list-heading h2{margin:0}
#key-list{display:grid;gap:14px}
#key-list .key-entry{min-width:0;background:#fff;border:1px solid #dce3ee;border-radius:12px;margin:0;padding:0;overflow:hidden;box-shadow:0 2px 5px #20305a08}
.key-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px}
.key-identity{min-width:0}
.key-title,.key-meta,.key-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}
.key-entry .key-title h3{margin:0;overflow-wrap:anywhere;font-size:16px}
.key-status{display:inline-block;padding:3px 8px;font-size:12px;line-height:1.4;font-weight:600;border-radius:999px;white-space:nowrap}
.key-status.active{color:#176040;background:#e8f7ee}
.key-status.paused{color:#81520c;background:#fff3d7}
.key-status.inactive{color:#475569;background:#eef2f6}
.key-meta{margin-top:8px}
.key-meta code{background:#f1f5f9;border-radius:4px;padding:2px 6px;color:#334155}
.key-note{font-size:12px;color:#64748b;margin:8px 0 0}
.key-actions button{padding:7px 11px;font-size:13px}
.key-entry .key-editor{margin:0;padding:0 20px;border-top:1px solid #e2e8f0;background:#f8fafc}
.key-entry .key-editor summary{padding:12px 0;font-weight:600}
.key-entry .key-editor[open]{padding-bottom:16px}
.key-entry .key-inline-secret{margin:0 20px 16px}
@media(max-width:720px){.key-heading{flex-direction:column;gap:12px}}

.permission-group{min-width:0}
.key-groups .permission-group,#key-permissions .permission-group{padding:12px 14px;border-radius:10px;background:#fff}
.permission-group>summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer}
.permission-group>summary::-webkit-details-marker{display:none}
.permission-group>summary::before{content:"›";color:#64748b;font-size:18px;line-height:1}
.permission-group[open]>summary::before{transform:rotate(90deg)}
.permission-group-name{font-weight:600;overflow-wrap:anywhere;min-width:0}
.permission-count{margin-left:auto;white-space:nowrap;color:#40548b;background:#edf2ff;border-radius:999px;padding:3px 9px;font-size:12px}
.permission-group .method-tools{align-items:center;padding:8px 0 0;margin:4px 0 12px}
.permission-group .method-tools label{display:flex;flex-direction:row;align-items:center;gap:8px;white-space:nowrap;margin:0}
.permission-group .method-tools select{width:auto;min-width:120px;padding:7px 9px}
.permission-table{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}
.permission-columns,.choices .permission-row{display:grid;grid-template-columns:24px 65px minmax(0,2fr) minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:12px;padding:9px 12px}
.permission-columns{background:#f1f5f9;color:#475569;font-size:12px;font-weight:600}
.permission-table .permission-rows{margin:0;max-height:350px;overflow-y:auto;scrollbar-gutter:stable}
.choices .permission-row{margin:0;min-height:39px;border-top:1px solid #edf0f5;cursor:pointer}
.choices .permission-row:hover,.choices .permission-row:focus-within{background:#f8fafc}
.choices .permission-row:has(input:checked){background:#eef4ff}
.choices .permission-row[hidden]{display:none}
.permission-row input{margin:0;width:15px;height:15px;accent-color:#244bd8}
.permission-method{justify-self:start;padding:3px 6px;border-radius:5px;font:600 11px/1.3 ui-monospace,Consolas,monospace;background:#eef2f6;color:#334155}
.method-get{background:#e8f7ee;color:#176040}.method-post{background:#eaf1ff;color:#244ba6}.method-put,.method-patch{background:#fff3dc;color:#81520c}.method-delete{background:#fff0ee;color:#a52f2f}
.permission-path{color:#1f2937;font-size:12px;overflow-wrap:anywhere}
.permission-host{color:#526176;font-size:12px;overflow-wrap:anywhere}
.permission-summary{color:#334155;font-size:12px;overflow-wrap:anywhere}
@media(max-width:640px){.permission-columns,.choices .permission-row{grid-template-columns:20px 56px minmax(0,1fr);gap:5px 8px}.permission-columns span:nth-child(n+4){display:none}.permission-row .permission-summary,.permission-row .permission-host{grid-column:3}.permission-row input{grid-row:1 / span 3}}

#view-projects .project-sidebar,#view-projects #project-detail{min-width:0}
.project-sidebar-title,.project-panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px}
.project-sidebar-title{margin-bottom:16px}
.project-sidebar-title h2,.project-panel-title h2{margin:0}
.project-count{color:#40548b;background:#edf2ff;border-radius:999px;padding:3px 9px;font-size:12px;white-space:nowrap}
.project-sidebar #project-list{margin-top:14px}
.project-sidebar .project-item{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:10px}
.project-item-name{min-width:0;overflow-wrap:anywhere;font-weight:600}
.project-item-state{flex:none;color:#176040;background:#e8f7ee;font-size:11px;padding:2px 6px;border-radius:5px}
.project-item-state.inactive{color:#475569;background:#eef2f6}
.project-note{color:#64748b;font-size:13px}
#project-title{overflow-wrap:anywhere}
.project-summary-title{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.project-summary-title h1{margin:0}
.project-sync-card .key-fields input{font-family:ui-monospace,Consolas,monospace;font-size:12px}
.project-sync-footer{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.project-sync-footer p{margin:0}
.project-permission-scroll{border:1px solid #e2e8f0;border-radius:8px;overflow:auto;max-height:410px}
.project-permission-table{margin:0;min-width:640px}
.project-permission-table th{position:sticky;top:0;background:#f1f5f9;color:#475569}
.project-permission-table td,.project-permission-table th{padding:10px 12px;vertical-align:middle}
.project-permission-table td:first-child{width:82px}
.project-permission-table td:last-child{width:30%}
.project-permission-table tbody tr:hover{background:#f8fafc}
.project-permission-empty{margin:0;padding:18px;background:#f8fafc;color:#64748b;border-radius:8px}

.check-result{margin-top:18px;padding:14px 16px;border:1px solid;border-radius:8px}
.check-result.allowed{background:#ecf8f0;border-color:#badfca;color:#17573a}
.check-result.denied{background:#fff3ef;border-color:#efcbc2;color:#902f25}
.check-result p{margin:6px 0}
.check-result small{color:#475569}
