:root { --admin-fg: var(--ink); --admin-muted: #62636b; --admin-ground: #f4f5f7; --admin-well: rgb(23 23 25 / .025); --admin-input: rgb(255 255 255 / .6); --admin-error: #a42c30; --admin-success: #267047; color-scheme: light; }
html[data-host="dark"] { --admin-fg: var(--porcelain); --admin-muted: #b0b1bb; --admin-ground: #17181c; --admin-well: rgb(255 255 255 / .025); --admin-input: rgb(0 0 0 / .15); --admin-error: #ff9a9e; --admin-success: #89d2aa; color-scheme: dark; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--admin-fg); background: var(--admin-ground); font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
::selection { color: var(--admin-fg); background: color-mix(in srgb,var(--electric-blue) 24%,transparent); }
button,input,select,textarea { font: inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-underline-offset: 3px; }
button:disabled { cursor: default; }
:is(button,a,input,select,textarea):focus-visible { outline: 2px solid var(--electric-blue); outline-offset: 3px; }
.admin-frame { max-width: 1460px; margin: 0 auto; padding: 30px 36px 22px; }
.page-header,.page-heading,.page-actions,.connection-line,.section-heading,.detail-heading,.action-row,.record-heading,.form-footer,.page-footer,.dialog-actions { display: flex; align-items: center; gap: 12px; }
.page-header { justify-content: space-between; margin-bottom: 20px; }
.page-heading { gap: 13px; }
.page-heading img { opacity: .85; }
html[data-host="dark"] .page-heading img { filter: invert(1); }
h1,h2,h3,p { margin: 0; }
h1 { font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -.025em; }
.page-heading p { margin-top: 3px; color: var(--admin-muted); font-size: 13px; }
.page-actions { gap: 4px; }
.appearance-label select { min-height: 40px; border: 0; padding: 0 8px; border-radius: 8px; color: var(--admin-muted); background: transparent; cursor: pointer; font-size: 12px; }
.appearance-label select:hover { background: var(--action-hover-fill); color: var(--admin-fg); }
.connection-line { min-height: 30px; gap: 8px; color: var(--admin-muted); font-size: 12px; margin: 0 4px 12px; flex-wrap: wrap; }
.connection-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ash); flex: 0 0 auto; }
.connection-line[data-status="connected"] .connection-dot { background: var(--admin-success); }
.connection-line .account-label { margin-left: auto; }
.text-action { border: 0; background: transparent; color: inherit; min-height: 32px; padding: 4px 8px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.text-action:hover { background: var(--action-hover-fill); color: var(--admin-fg); }
.admin-shell { min-height: 660px; display: grid; grid-template-columns: 280px minmax(0,1fr); align-items: stretch; }
.library-sidebar { padding: 24px 16px 18px; background: var(--admin-well); border-radius: calc(var(--glass-radius) - 1px) 0 0 calc(var(--glass-radius) - 1px); border-right: 1px solid var(--submenu-edge); min-width: 0; }
.section-heading { justify-content: space-between; padding: 0 8px; margin-bottom: 20px; }
.section-heading h2 { font-size: 14px; font-weight: 600; }
.count { color: var(--admin-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.new-skill { width: 100%; margin-bottom: 18px; }
.search-label { display: block; position: relative; margin: 0 0 10px; }
.search-label svg { position: absolute; top: 13px; left: 12px; color: var(--admin-muted); pointer-events: none; }
.search-label input[type="search"] { padding-left: 37px; }
.library-filter { width: 100%; margin-bottom: 16px; }
.skill-list { display: grid; gap: 7px; }
.skill-row { position: relative; width: 100%; min-width: 0; display: block; text-align: left; padding: 13px 12px; border: 1px solid transparent; border-radius: 10px; background: transparent; cursor: pointer; transition: background 160ms var(--motion-ease),border-color 160ms var(--motion-ease); }
.skill-row:hover { background: var(--action-hover-fill); }
.skill-row[aria-current="true"] { background: var(--glass-face),var(--submenu-hover-fill); border-color: var(--submenu-button-edge); box-shadow: var(--glass-bevel); }
.skill-row[aria-current="true"]::after { content:""; position:absolute; left:12px; right:12px; top:-1px; height:1px; background:var(--signature-gradient); }
.skill-row strong { display: block; font-size: 13px; font-weight: 550; overflow-wrap: anywhere; }
.skill-row .skill-summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color:var(--admin-muted); font-size:12px; line-height:1.55; margin:4px 0 9px; }
.skill-row-meta { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--admin-muted); }
.status { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 11px; font-weight: 500; line-height: 1.45; }
.status::before { content: ""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.status[data-state="published"] { color: var(--admin-success); }
.status[data-state="review"] { color: var(--electric-blue); }
html[data-host="dark"] .status[data-state="review"] { color:#a4baff; }
.status[data-state="retired"] { color:var(--admin-muted); }
.empty-list { color:var(--admin-muted); font-size:13px; padding:16px 8px; }
.library-scope { margin:26px 8px 0; padding-top:20px; border-top:1px solid var(--submenu-edge); color:var(--admin-muted); font-size:12px; line-height:1.65; }
.detail { min-width:0; padding:28px 32px 30px; }
.detail-heading { justify-content:space-between; align-items:flex-start; margin-bottom:10px; }
.detail-heading h2 { font-size:22px; font-weight:550; letter-spacing:-.025em; line-height:1.3; overflow-wrap:anywhere; }
.detail-subtitle { max-width:70ch; color:var(--admin-muted); font-size:13px; line-height:1.65; margin:8px 0 15px; }
.detail-meta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; color:var(--admin-muted); font-size:12px; margin:12px 0 22px; }
.detail-meta code { font-size:11px; overflow-wrap:anywhere; }
.detail-tabs { display:flex; gap:20px; border-bottom:1px solid var(--submenu-edge); margin-bottom:26px; overflow:auto; }
.detail-tab { position:relative; min-height:44px; padding:0 1px 12px; border:0; background:transparent; color:var(--admin-muted); font-size:13px; white-space:nowrap; cursor:pointer; }
.detail-tab:hover { color:var(--admin-fg); }
.detail-tab[aria-selected="true"] { color:var(--admin-fg); font-weight:550; }
.detail-tab[aria-selected="true"]::after { position:absolute; content:""; bottom:0; left:0; right:0; height:2px; background:var(--signature-gradient); }
.field-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; }
.field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.field.full { grid-column:1 / -1; }
.field > span,.field > label,.field-label { font-size:12px; font-weight:550; }
input:not([type="checkbox"]),select,textarea { width:100%; min-width:0; border:1px solid var(--submenu-button-edge); border-radius:8px; background:var(--admin-input); color:var(--admin-fg); padding:10px 12px; caret-color:var(--electric-blue); transition:border-color 160ms var(--motion-ease),box-shadow 160ms var(--motion-ease); }
input::placeholder,textarea::placeholder { color:var(--admin-muted); opacity:1; }
input:not([type="checkbox"]):hover,select:hover,textarea:hover { border-color:var(--action-hover-edge); }
input:read-only,textarea:read-only { background:var(--admin-well); }
input:disabled,select:disabled,textarea:disabled { opacity:.65; }
textarea { resize:vertical; line-height:1.65; min-height:80px; }
.source-editor { min-height:300px; font:12px/1.8 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; tab-size:2; white-space:pre-wrap; overflow-wrap:anywhere; overflow:auto; }
.hint { color:var(--admin-muted); font-size:12px; line-height:1.65; max-width:75ch; }
.source-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.ai-draft-row { display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; margin:3px 0 7px; }
.ai-draft-row .hint { flex:1 1 250px; }
.ai-draft-row .magic-button { flex:0 0 auto; }
.section-copy { color:var(--admin-muted); font-size:13px; line-height:1.7; max-width:72ch; margin-bottom:20px; }
.form-footer { justify-content:space-between; align-items:flex-start; gap:20px; margin-top:22px; }
.action-row { flex-wrap:wrap; gap:9px; }
.form-footer > .hint { max-width:34ch; padding-top:9px; }
.review-panel { padding:20px 0; border-top:1px solid var(--submenu-edge); margin-top:25px; display:grid; gap:13px; }
.review-panel h3,.subheading { font-size:14px; font-weight:600; }
.notice { margin:0 0 16px; padding:13px 16px; border-radius:10px; color:var(--admin-fg); background:var(--admin-well); border:1px solid var(--submenu-button-edge); font-size:13px; }
.notice[data-tone="error"] { color:var(--admin-error); }
.inline-note { margin:18px 0; padding:13px 15px; border-radius:8px; background:var(--admin-well); color:var(--admin-muted); font-size:12px; line-height:1.7; }
.record { padding:22px 0; border-bottom:1px solid var(--submenu-edge); }
.record:first-of-type { padding-top:0; }
.record:last-child { border-bottom:0; }
.record-heading { justify-content:space-between; margin-bottom:8px; flex-wrap:wrap; }
.record-heading h3 { font-size:14px; font-weight:600; }
.record p { color:var(--admin-muted); font-size:12px; line-height:1.7; }
.record .action-row { margin-top:14px; }
.digest { display:block; margin:9px 0; font:11px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; overflow-wrap:anywhere; color:var(--admin-muted); }
details { margin-top:12px; }
summary { cursor:pointer; font-size:12px; width:fit-content; padding:7px 0; }
summary:hover { color:var(--electric-blue); }
.source-preview { white-space:pre-wrap; overflow-wrap:anywhere; max-height:320px; overflow:auto; padding:15px; border-radius:8px; background:var(--admin-well); font:12px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.publish-form { display:grid; gap:18px; margin-top:20px; }
.member-list { border:1px solid var(--submenu-edge); border-radius:10px; max-height:260px; overflow:auto; }
.member-option { display:flex; align-items:center; gap:12px; min-height:55px; padding:12px 15px; border-bottom:1px solid var(--submenu-edge); cursor:pointer; }
.member-option:last-child { border-bottom:0; }
.member-option:hover { background:var(--action-hover-fill); }
.member-option input { width:17px; height:17px; accent-color:var(--electric-blue); flex:0 0 auto; }
.member-option span { font-size:13px; }
.member-option small { display:block; color:var(--admin-muted); font-size:11px; overflow-wrap:anywhere; }
.publication-summary { display:flex; gap:20px; align-items:flex-start; margin:22px 0; padding:18px 0; border-top:1px solid var(--submenu-edge); border-bottom:1px solid var(--submenu-edge); }
.publication-summary strong { font-size:13px; font-weight:550; }
.publication-summary p { color:var(--admin-muted); font-size:12px; margin-top:3px; }
.publication-summary .submenu-button { margin-left:auto; }
.audit-list { list-style:none; padding:0; margin:0; }
.audit-list li { display:grid; grid-template-columns:10px minmax(0,1fr) auto; gap:12px; padding:17px 0; border-bottom:1px solid var(--submenu-edge); }
.audit-list li::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--admin-muted); margin-top:7px; }
.audit-list strong { font-size:13px; font-weight:550; }
.audit-list p,.audit-list time { font-size:12px; color:var(--admin-muted); }
.audit-list p { overflow-wrap:anywhere; margin-top:3px; }
.state-panel { grid-column:1 / -1; max-width:570px; margin:auto; padding:72px 30px; text-align:center; }
.state-panel h2 { font-size:22px; font-weight:550; letter-spacing:-.02em; }
.state-panel p { color:var(--admin-muted); margin:13px 0 24px; font-size:14px; line-height:1.75; }
.state-panel .action-row { justify-content:center; }
.empty-detail { padding:60px 0; }
.empty-detail h3 { font-size:17px; margin-bottom:9px; }
.page-footer { justify-content:space-between; margin:18px 4px 0; font-size:11px; color:var(--admin-muted); }
.loading-shell { grid-column:1 / -1; padding:60px; display:grid; gap:20px; align-content:start; }
.skeleton { width:70%; height:14px; background:var(--submenu-hover-fill); border-radius:5px; }
.skeleton-title { height:26px; width:30%; margin-bottom:20px; }
.skeleton-short { width:45%; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; left:20px; top:12px; z-index:10; padding:10px 15px; background:var(--admin-ground); border-radius:8px; transform:translateY(-180%); }
.skip-link:focus { transform:none; }
dialog { max-width:min(440px,calc(100vw - 32px)); padding:28px; border:1px solid var(--submenu-edge); border-radius:16px; color:var(--admin-fg); background:var(--admin-ground); box-shadow:var(--glass-shadow); }
dialog::backdrop { background:rgb(0 0 0 / .35); backdrop-filter:blur(3px); }
dialog h2 { font-size:20px; font-weight:600; letter-spacing:-.02em; }
dialog p { margin:13px 0 25px; font-size:13px; line-height:1.75; color:var(--admin-muted); }
.dialog-actions { justify-content:flex-end; }
.submenu-button { font-size:13px; }
@media (max-width:1020px) { .admin-frame{padding:24px}.admin-shell{grid-template-columns:235px minmax(0,1fr)}.detail{padding:25px}.library-sidebar{padding:22px 12px}.form-footer{flex-direction:column}.form-footer>.hint{max-width:65ch;padding-top:0} }
@media (max-width:760px) { .admin-frame{padding:20px 16px}.page-heading p{max-width:28ch}.page-header{align-items:flex-start;gap:8px}.page-heading img{width:25px;height:25px}.page-heading{gap:9px}.page-actions{flex-wrap:wrap;justify-content:flex-end}.page-actions .submenu-icon-button{width:38px;height:40px}.appearance-label select{max-width:86px}.admin-shell{grid-template-columns:1fr}.library-sidebar{border-right:0;border-bottom:1px solid var(--submenu-edge);border-radius:calc(var(--glass-radius) - 1px) calc(var(--glass-radius) - 1px) 0 0;padding:20px}.section-heading{margin-bottom:12px}.new-skill{width:auto;margin:0}.library-tools{display:grid;grid-template-columns:1fr 115px;gap:9px;margin-top:14px}.search-label,.library-filter{margin:0}.skill-list{display:flex;overflow:auto;gap:8px;margin-top:14px;padding:2px 2px 8px}.skill-row{min-width:200px;max-width:240px;flex:0 0 75%}.library-scope{display:none}.detail{padding:24px 20px}.detail-heading h2{font-size:20px}.detail-tabs{gap:20px}.connection-line .account-label{margin-left:0}.connection-line{column-gap:8px}.page-footer{gap:12px;align-items:flex-start}.page-footer span:last-child{text-align:right;max-width:24ch}.audit-list li{grid-template-columns:8px 1fr}.audit-list time{grid-column:2}.publication-summary{flex-wrap:wrap}.publication-summary .submenu-button{margin-left:0}.state-panel{padding:60px 24px}.loading-shell{padding:35px}.skeleton{width:90%}.skeleton-title{width:55%} }
@media (max-width:440px) { .admin-frame{padding:16px 10px}.page-heading p{display:none}h1{font-size:20px}.page-heading img{display:none}.appearance-label select{max-width:75px;padding:0 3px}.page-actions{gap:0}.detail{padding:22px 16px}.library-sidebar{padding:17px 15px}.field-grid{grid-template-columns:1fr}.detail-heading{flex-direction:column;gap:8px}.detail-tabs{gap:19px}.source-editor{min-height:280px}.action-row{width:100%}.action-row .submenu-button{flex:1 1 auto}.connection-line{font-size:11px}.page-footer{font-size:10px} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important} }