:root {
  --ink: #242229;
  --muted: #817d88;
  --subtle: #aaa6b0;
  --line: #e9e7ec;
  --line-strong: #ddd9e3;
  --surface: #ffffff;
  --canvas: #f6f5f7;
  --violet: #6953cf;
  --violet-dark: #5842ba;
  --violet-soft: #f0edfb;
  --green: #2f9366;
  --danger: #b84b61;
  --shadow: 0 14px 40px rgba(43, 35, 61, .07);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--canvas); color: var(--ink); }
body, button, input, select { font-family: "PingFang SC", "Microsoft YaHei", Inter, system-ui, sans-serif; }
button, input, select { font-size: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(105, 83, 207, .2); outline-offset: 2px; }
.plain { border: 0; background: transparent; cursor: pointer; }
.boot { min-height: 100vh; display: grid; place-items: center; color: var(--muted); font-size: 13px; }

/* 登录 */
.loginPage { min-height: 100vh; display: grid; grid-template-columns: minmax(390px, .9fr) minmax(440px, 1.1fr); background: #fff; }
.loginVisual { position: relative; overflow: hidden; padding: 52px clamp(42px, 6vw, 92px); display: flex; flex-direction: column; color: #fff; background: linear-gradient(145deg, #33284f, #503d88 62%, #6651aa); }
.loginVisual::before { content: ""; position: absolute; width: 520px; height: 520px; right: -300px; top: -250px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.loginBrand { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; }
.loginBrand > span, .mobileSeal { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: #fff; color: var(--violet); font: bold 23px serif; }
.loginBrand div { display: flex; flex-direction: column; }
.loginBrand b { font-size: 18px; letter-spacing: .08em; }
.loginBrand small { margin-top: 3px; color: rgba(255,255,255,.58); font-size: 8px; letter-spacing: .14em; }
.loginStatement { position: relative; z-index: 1; margin: auto 0; }
.loginStatement p { margin: 0 0 18px; color: #d5caf4; font-size: 10px; letter-spacing: .18em; }
.loginStatement h1 { margin: 0; font-size: clamp(44px, 4.6vw, 68px); line-height: 1.18; letter-spacing: -.05em; }
.loginStatement > span { display: block; max-width: 440px; margin-top: 25px; color: #d7d0e7; font-size: 13px; line-height: 1.8; }
.loginVisual footer { position: relative; z-index: 1; color: rgba(255,255,255,.58); font-size: 10px; }
.visualCards { display: none; }
.loginPanel { display: grid; place-items: center; padding: 40px; background: #fff; }
.loginBox { width: min(400px, 100%); }
.mobileSeal { display: none; color: #fff; background: var(--violet); }
.eyebrow { margin: 0 0 8px; color: var(--violet); font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.loginBox h2 { margin: 0; font-size: 30px; letter-spacing: -.03em; }
.loginSub { margin: 10px 0 27px; color: var(--muted); font-size: 12px; }
.loginBox label, .stackForm label { display: flex; flex-direction: column; gap: 8px; margin: 17px 0; }
.loginBox label > span, .stackForm label > span { color: #5f5b65; font-size: 11px; font-weight: 700; }
.loginBox input, .stackForm input, .stackForm select { width: 100%; height: 46px; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; outline: 0; font-size: 12px; }
.loginBox input:focus, .stackForm input:focus, .stackForm select:focus { border-color: #8a77dc; box-shadow: 0 0 0 4px var(--violet-soft); }
.loginBox .rememberLogin { margin: 12px 0 14px; flex-direction: row; align-items: flex-start; gap: 9px; cursor: pointer; }
.loginBox .rememberLogin input { width: 15px; height: 15px; margin: 1px 0 0; accent-color: var(--violet); flex: 0 0 auto; }
.loginBox .rememberLogin > span { display: flex; flex-direction: column; gap: 2px; font-size: 10px; }
.loginBox .rememberLogin b { color: var(--text); font-size: 10px; }
.loginBox .rememberLogin small { color: var(--subtle); font-size: 8px; font-weight: 400; }
.loginBox .wide { margin-top: 8px; }
.loginHelp { display: block; margin-top: 17px; color: var(--subtle); text-align: center; font-size: 10px; }
.formError { margin-bottom: 4px; padding: 10px 12px; border: 1px solid #f0ccd4; border-radius: 9px; background: #fff5f7; color: #a64055; font-size: 11px; }

/* 基础按钮 */
.primary { height: 40px; padding: 0 18px; border: 0; border-radius: 9px; background: var(--violet); color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; box-shadow: 0 7px 18px rgba(93, 69, 190, .17); transition: background .16s, transform .16s, box-shadow .16s; }
.primary:hover { background: var(--violet-dark); box-shadow: 0 10px 23px rgba(93, 69, 190, .22); transform: translateY(-1px); }
.primary:disabled { opacity: .55; cursor: wait; transform: none; }
.primary.wide, .ghost.wide { width: 100%; height: 46px; }
.primary.compact { height: 36px; padding: 0 14px; box-shadow: none; }
.ghost { height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 10px; cursor: pointer; }

/* 软件框架 */
.libraryApp { min-height: 100vh; display: flex; flex-direction: column; }
.header { position: sticky; top: 0; z-index: 30; height: 64px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.95); backdrop-filter: blur(14px); }
.headerInner { width: min(1460px, calc(100% - 40px)); height: 100%; margin: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; justify-self: start; text-align: left; }
.brandSeal { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--violet); color: #fff; font: bold 19px serif; }
.brand > span:last-child { display: flex; flex-direction: column; }
.brand b { font-size: 15px; letter-spacing: .06em; }
.brand small { margin-top: 2px; color: var(--subtle); font-size: 7px; letter-spacing: .13em; }
.header nav { height: 100%; display: flex; align-items: center; gap: 6px; }
.header nav button { height: 36px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; }
.header nav button:hover { background: #f7f6f8; color: var(--ink); }
.header nav button.active { background: var(--violet-soft); color: var(--violet-dark); font-weight: 700; }
.headerRight { justify-self: end; display: flex; align-items: center; gap: 10px; }
.syncState { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; }
.syncState i, .libraryMeta .online i { width: 6px; height: 6px; border-radius: 50%; background: #3fad79; box-shadow: 0 0 0 3px #e9f7f0; }
.syncState.slow { color: #a66b18; }
.syncState.slow i { background: #d99a35; box-shadow: 0 0 0 3px #fff2da; }
.userMenu { display: flex; align-items: center; gap: 8px; padding: 3px 5px; border: 0; border-radius: 9px; background: transparent; text-align: left; cursor: pointer; }
.userMenu:hover { background: #f6f5f7; }
.userMenu > span, .person > i, .accountIdentity > i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--violet-soft); color: var(--violet-dark); font-size: 10px; font-weight: 800; }
.userMenu > div { display: flex; flex-direction: column; }
.userMenu b { font-size: 10px; }
.userMenu small { margin-top: 2px; color: var(--subtle); font-size: 8px; }
.userMenu em { color: var(--subtle); font-style: normal; }

/* 角色库 */
.page { width: min(1460px, calc(100% - 40px)); margin: 0 auto; padding: 34px 0 26px; flex: 1; }
.workspaceHead { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.workspaceHead h1, .sectionHero h1 { margin: 0; font-size: 28px; letter-spacing: -.04em; }
.libraryMeta { margin-top: 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.libraryMeta > span { min-height: 24px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid var(--line); border-radius: 99px; background: #fff; color: var(--muted); font-size: 9px; }
.libraryMeta b { color: var(--ink); font-size: 10px; }
.libraryMeta .online { color: var(--green); }
.libraryMeta .dragTip { border-color: #ded7f4; background: #f8f6ff; color: var(--violet-dark); }
.headUpload { height: 42px; padding: 0 19px; }
.libraryPanel, .accountPanel { margin-top: 20px; min-height: 540px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow); }
.panelTop { min-height: 64px; padding: 12px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.search { width: min(480px, 55vw); height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 9px; background: #faf9fb; }
.search:focus-within { border-color: #8b78d9; box-shadow: 0 0 0 3px var(--violet-soft); background: #fff; }
.search > span { color: #706a77; font-size: 21px; line-height: 1; }
.search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: 10px; }
.search kbd { padding: 2px 5px; border: 1px solid #dedbe3; border-radius: 4px; background: #fff; color: var(--subtle); font-size: 7px; }
.panelTop select { height: 40px; padding: 0 30px 0 11px; border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; color: #68636d; font-size: 10px; }
.resultCount { margin-left: auto; color: var(--subtle); font-size: 9px; white-space: nowrap; }
.filterBar { min-height: 50px; padding: 9px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); }
.categoryRail { min-width: 0; display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.categoryRail::-webkit-scrollbar { display: none; }
.filterBar button { height: 30px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; color: #77727d; font-size: 9px; white-space: nowrap; cursor: pointer; }
.filterBar button:hover { background: #f6f4f8; color: var(--ink); }
.filterBar button.active { background: var(--violet-soft); color: var(--violet-dark); font-weight: 700; }
.filterControls { display: flex; align-items: center; gap: 4px; }
.filterControls .manageCategories { border: 1px solid #ded8ef; color: var(--violet-dark); }
.bulkToolbar { min-height: 50px; padding: 8px 18px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); background: #fcfbfd; }
.selectAll { display: inline-flex; align-items: center; gap: 8px; color: #5f5a65; font-size: 10px; font-weight: 700; cursor: pointer; }
.selectAll input, .cardSelect input { accent-color: var(--violet); }
.selectedSummary { color: var(--muted); font-size: 9px; }
.selectedSummary b { color: var(--violet-dark); font-size: 11px; }
.bulkActions { margin-left: auto; display: flex; gap: 7px; }
.bulkActions button { height: 32px; padding: 0 12px; border: 1px solid #dcd5ef; border-radius: 8px; background: #fff; color: var(--violet-dark); font-size: 9px; font-weight: 700; cursor: pointer; }
.bulkActions button:hover:not(:disabled) { border-color: #a99bda; background: #f7f4ff; }
.bulkActions button:disabled { opacity: .42; cursor: not-allowed; }
.bulkActions .batchDelete { border-color: #ecd3d9; color: var(--danger); }
.bulkActions .batchDelete:hover:not(:disabled) { border-color: #dba7b3; background: #fff6f8; }
.assetGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; padding: 18px; align-items: start; }
.assetCard { min-width: 0; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: border-color .17s, box-shadow .17s, transform .17s; }
.assetCard:hover { border-color: #cfc6e8; box-shadow: 0 10px 26px rgba(55, 43, 82, .1); transform: translateY(-2px); }
.assetCard.selectedCard { border-color: #8f7ad8; box-shadow: 0 0 0 3px rgba(105, 83, 207, .11); }
.cardSelect { width: 26px; height: 26px; display: grid; place-items: center; position: absolute; right: 8px; top: 8px; z-index: 4; border: 1px solid rgba(255,255,255,.8); border-radius: 8px; background: rgba(255,255,255,.92); box-shadow: 0 3px 10px rgba(31,25,44,.12); cursor: pointer; backdrop-filter: blur(7px); }
.cardSelect input { position: absolute; opacity: 0; }
.cardSelect span { width: 16px; height: 16px; display: grid; place-items: center; border: 1px solid #cbc5d3; border-radius: 5px; color: transparent; font-size: 10px; font-weight: 800; }
.cardSelect input:checked + span { border-color: var(--violet); background: var(--violet); color: #fff; }
.cardSelect:focus-within { outline: 3px solid rgba(105, 83, 207, .2); outline-offset: 2px; }
.imageButton { width: 100%; aspect-ratio: 4 / 3; display: block; position: relative; overflow: hidden; padding: 0; border: 0; border-bottom: 1px solid #f0eef2; background: #f3f2f4; cursor: zoom-in; }
.imageButton img { width: 100%; height: 100%; display: block; object-fit: contain; cursor: grab; user-select: none; -webkit-user-drag: element; transition: transform .2s; }
.imageButton img:active { cursor: grabbing; }
.assetCard:hover .imageButton img { transform: scale(1.012); }
.dragBadge, .previewHint { position: absolute; pointer-events: none; border-radius: 6px; color: #fff; font-size: 8px; backdrop-filter: blur(6px); }
.dragBadge { left: 8px; top: 8px; padding: 5px 7px; background: rgba(65, 50, 111, .76); }
.previewHint { left: 50%; bottom: 9px; padding: 5px 8px; opacity: 0; background: rgba(30, 26, 36, .72); transform: translate(-50%, 4px); transition: .16s; }
.assetCard:hover .previewHint { opacity: 1; transform: translate(-50%, 0); }
.cardInfo { min-height: 68px; padding: 11px 12px 9px; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cardInfo > div { min-width: 0; display: flex; flex-direction: column; }
.cardInfo b { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.cardInfo .cardIdentity > span { margin-top: 7px; overflow: hidden; color: #77717e; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.cardInfo .cardIdentity > span small { margin-right: 5px; color: var(--subtle); font-size: 8px; }
.cardInfo .categoryBadge { height: max-content; min-width: 76px; padding: 6px 8px; display: flex; flex-direction: column; gap: 3px; border-radius: 7px; background: var(--violet-soft); color: var(--violet-dark); font-size: 11px; font-weight: 800; font-style: normal; text-align: center; white-space: nowrap; }
.cardInfo .categoryBadge small { color: #7665b5; font-size: 10px; font-weight: 700; }
.cardFooter { min-height: 34px; margin: 0 11px; display: flex; align-items: center; justify-content: space-between; gap: 7px; border-top: 1px solid #f0eef2; }
.cardFooter > span { overflow: hidden; color: var(--subtle); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.cardFooter button { padding: 4px; border: 0; background: transparent; color: var(--violet-dark); font-size: 8px; font-weight: 700; cursor: pointer; }
.addCard { min-height: 220px; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed #cfc8dc; border-radius: 12px; background: #fbfafc; color: #77717f; cursor: pointer; transition: .16s; }
.addCard:hover { border-color: #9f90d7; background: #f8f5ff; color: var(--violet-dark); }
.addCard > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--violet-soft); color: var(--violet); font-size: 22px; }
.addCard b { margin-top: 10px; font-size: 11px; }
.addCard small { margin-top: 4px; color: var(--subtle); font-size: 8px; }
.emptyState { min-height: 430px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 45px 20px; text-align: center; }
.emptyState > div { width: 72px; height: 62px; display: grid; place-items: center; position: relative; border-radius: 15px; background: var(--violet-soft); color: #8675c8; font-weight: 800; }
.emptyState i { width: 24px; height: 24px; display: grid; place-items: center; position: absolute; right: -6px; bottom: -6px; border: 3px solid #fff; border-radius: 8px; background: var(--violet); color: #fff; font-style: normal; }
.emptyState h3 { margin: 16px 0 6px; font-size: 14px; }
.emptyState p { margin: 0 0 16px; color: var(--muted); font-size: 9px; }
.appFooter { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--subtle); font-size: 8px; }
.appFooter b { color: #7d7685; }

/* 员工账号 */
.sectionHero { min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.sectionHero > div > p:last-child { margin: 9px 0 0; color: var(--muted); font-size: 11px; }
.employeeStats { margin: 16px 0 0; display: grid; grid-template-columns: repeat(3, 160px); gap: 10px; }
.employeeStats > div { height: 68px; padding: 12px 14px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.employeeStats small { color: var(--subtle); font-size: 8px; }
.employeeStats b { margin-top: 4px; font-size: 20px; }
.greenText { color: var(--green) !important; }
.accountPanel { min-height: 360px; }
.accountHead { min-height: 64px; padding: 15px 19px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.accountHead > div { display: flex; flex-direction: column; gap: 4px; }
.accountHead h2 { margin: 0; font-size: 14px; }
.accountHead span { color: var(--subtle); font-size: 8px; }
.accountTable { overflow-x: auto; }
.accountRow { min-width: 900px; min-height: 64px; padding: 9px 20px; display: grid; grid-template-columns: 1.4fr 1fr .7fr 1fr 1.45fr; align-items: center; gap: 15px; border-bottom: 1px solid #f0eef2; font-size: 10px; }
.accountLabels { min-height: 40px; background: #faf9fb; color: var(--subtle); font-size: 8px; }
.person { display: flex; align-items: center; gap: 9px; }
.person > span { display: flex; flex-direction: column; }
.person b { font-size: 10px; }
.person small { margin-top: 3px; color: var(--subtle); font-size: 8px; }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.muted { color: var(--muted); }
.status { padding: 4px 8px; border-radius: 99px; font-size: 8px; font-style: normal; }
.status.active { background: #e7f6ee; color: #2d895e; }
.status.disabled { background: #f1eff2; color: #88838c; }
.rowActions { display: flex; justify-content: flex-end; gap: 5px; }
.rowActions button, .accountMenu > button { padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; font-size: 8px; cursor: pointer; }
.dangerText { color: var(--danger) !important; }

/* 弹窗与表单 */
.modalBackdrop { position: fixed; inset: 0; z-index: 100; padding: 20px; display: grid; place-items: center; background: rgba(28, 24, 34, .52); backdrop-filter: blur(6px); }
.modalCard { width: min(500px, 100%); max-height: 92vh; overflow: auto; position: relative; padding: 23px; border-radius: 16px; background: #fff; box-shadow: 0 30px 90px rgba(24, 19, 34, .28); }
.modalCard.wideModal { width: min(1080px, 100%); padding: 0; overflow: hidden; }
.modalHead { display: flex; justify-content: space-between; }
.modalHead p { margin: 0; color: var(--violet); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.modalHead h2 { margin: 4px 0 0; font-size: 20px; }
.modalHead > button, .previewClose { width: 31px; height: 31px; border: 0; border-radius: 8px; background: #f1eff3; color: #7c7682; font-size: 18px; cursor: pointer; }
.fileDrop { height: 150px; margin: 18px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed #bbb2d1; border-radius: 13px; background: #faf9fc; cursor: pointer; }
.fileDrop:hover { border-color: #9281d0; background: #f8f5ff; }
.fileDrop input { position: absolute; opacity: 0; pointer-events: none; }
.fileDrop > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--violet-soft); color: var(--violet); font-size: 21px; }
.fileDrop b { margin-top: 8px; font-size: 11px; }
.fileDrop small { margin-top: 4px; color: var(--subtle); font-size: 8px; }
.fileDrop.batchDrop { height: 125px; margin-bottom: 12px; }
.batchQueue { margin-bottom: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: #fbfafc; }
.batchQueueHead { height: 38px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.batchQueueHead b { font-size: 10px; }
.batchQueueHead span { color: var(--muted); font-size: 9px; }
.batchList { max-height: 230px; overflow-y: auto; padding: 5px 7px; }
.batchRow { min-height: 39px; display: grid; grid-template-columns: 22px minmax(0, 1fr) 52px 27px; align-items: center; gap: 6px; border-bottom: 1px solid #efedf1; }
.batchRow:last-child { border-bottom: 0; }
.batchRow > span { color: var(--subtle); text-align: center; font-size: 8px; }
.batchRow input { min-width: 0; height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; font-size: 9px; outline: 0; }
.batchRow input:hover, .batchRow input:focus { border-color: var(--line-strong); background: #fff; }
.batchRow small { color: var(--subtle); text-align: right; font-size: 7px; }
.batchRow button { width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: #98929d; cursor: pointer; }
.batchRow button:hover { background: #f4e9ec; color: var(--danger); }
.batchHint { margin: 9px 0 0; color: var(--subtle); font-size: 8px; }
.formGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.formGrid label { display: flex; flex-direction: column; gap: 6px; }
.formGrid label.full { grid-column: 1 / 3; }
.formGrid label > span { color: #716c76; font-size: 9px; }
.formGrid input, .formGrid select { height: 39px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; outline: 0; font-size: 10px; }
.modalActions { margin-top: 20px; display: flex; justify-content: flex-end; gap: 8px; }
.modalActions > button:first-child { height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 10px; cursor: pointer; }
.inlineProgress { margin: 18px 0 2px; padding: 13px; border: 1px solid #ddd6f3; border-radius: 10px; background: #faf8ff; }
.inlineProgress > div:first-child, .progressMeta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 9px; }
.inlineProgress b, .progressMeta b { color: var(--violet); font-size: 10px; }
.inlineProgress > small { display: block; margin-top: 7px; color: var(--muted); font-size: 8px; }
.progressTrack { height: 7px; margin-top: 9px; overflow: hidden; border-radius: 999px; background: #ebe7f5; }
.progressTrack i { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #7357de, #9a84ed); transition: width .16s ease; }
.transferCard { padding: 16px 6px 4px; text-align: center; }
.transferIcon { width: 50px; height: 50px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 14px; background: var(--violet-soft); color: var(--violet); font-size: 24px; }
.transferCard > p { margin: 0 0 5px; color: var(--violet); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.transferCard h2 { margin: 0 0 22px; font-size: 20px; }
.transferCard .progressTrack { height: 9px; }
.transferCard .progressMeta { margin: 9px 0 20px; }
[hidden] { display: none !important; }
.previewClose { position: absolute; right: 13px; top: 13px; z-index: 4; }
.previewLayout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .65fr); }
.previewImage { min-height: 610px; max-height: 90vh; display: grid; place-items: center; position: relative; overflow: hidden; background: #eeedf0; }
.previewImage img { width: 100%; height: 100%; max-height: 90vh; object-fit: contain; cursor: grab; -webkit-user-drag: element; }
.previewImage > span { position: absolute; left: 50%; bottom: 14px; padding: 7px 11px; border-radius: 7px; background: rgba(29, 25, 35, .7); color: #fff; font-size: 8px; white-space: nowrap; transform: translateX(-50%); backdrop-filter: blur(6px); }
.previewInfo { padding: 38px 28px 27px; display: flex; flex-direction: column; }
.previewInfo h2 { margin: 0; font-size: 27px; }
.previewTags { margin: 12px 0 23px; display: flex; flex-wrap: wrap; gap: 5px; }
.previewTags span { padding: 5px 7px; border-radius: 6px; background: var(--violet-soft); color: var(--violet-dark); font-size: 8px; }
.previewInfo dl { margin: 0; border-top: 1px solid var(--line); }
.previewInfo dl > div { min-height: 47px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.previewInfo dt { color: var(--subtle); font-size: 9px; }
.previewInfo dd { margin: 0; font-size: 9px; }
.dragOutGuide { margin: 17px 0 11px; padding: 10px; display: flex; align-items: center; gap: 9px; border: 1px solid #dfd9ef; border-radius: 9px; background: #faf8ff; }
.dragOutGuide > span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; background: var(--violet); color: #fff; }
.dragOutGuide > div { display: flex; flex-direction: column; }
.dragOutGuide b { font-size: 9px; }
.dragOutGuide small { margin-top: 3px; color: var(--muted); font-size: 7px; line-height: 1.5; }
.deleteButton { height: 34px; margin-top: 7px; border: 0; background: transparent; color: var(--danger); font-size: 9px; cursor: pointer; }
.stackForm { margin-top: 18px; }
.stackForm label small { color: var(--subtle); font-size: 8px; }
.formIntro { padding: 10px; border-radius: 8px; background: #f8f6fa; color: var(--muted); font-size: 10px; }
.generatedPassword { display: flex; gap: 7px; }
.generatedPassword input { font-family: ui-monospace, Consolas, monospace; }
.generatedPassword button { width: 90px; border: 1px solid #dbd5ed; border-radius: 8px; background: #f8f5ff; color: var(--violet-dark); font-size: 9px; cursor: pointer; }
.securityNote { padding: 11px; display: flex; flex-direction: column; gap: 3px; border: 1px solid #e3ddf2; border-radius: 9px; background: #faf8ff; }
.securityNote b { color: #5d48ae; font-size: 9px; }
.securityNote span { color: var(--muted); font-size: 8px; line-height: 1.5; }
.credentialDone { padding: 8px 3px; text-align: center; }
.credentialDone > span { width: 48px; height: 48px; margin: auto; display: grid; place-items: center; border-radius: 50%; background: #43a873; color: #fff; font-size: 21px; }
.credentialDone h2 { margin: 14px 0 5px; font-size: 20px; }
.credentialDone > p { margin: 0 0 14px; color: var(--muted); font-size: 9px; line-height: 1.6; }
.credentialDone > div { min-height: 46px; padding: 0 11px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: #f7f6f8; }
.credentialDone > div small { color: var(--subtle); font-size: 8px; }
.credentialDone > div b { font-size: 11px; }
.credentialDone .primary { margin-top: 15px; }
.credentialDone .ghost { margin-top: 7px; }
.accountMenu { display: flex; flex-direction: column; gap: 8px; }
.accountIdentity { padding: 5px 3px 13px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.accountIdentity > div { display: flex; flex-direction: column; }
.accountIdentity b { font-size: 12px; }
.accountIdentity span { margin-top: 3px; color: var(--subtle); font-size: 8px; }
.accountMenu > button { height: 37px; padding: 0 11px; text-align: left; }
.categoryIntro { color: var(--muted); font-size: 9px; line-height: 1.6; }
.addCategoryForm { margin: 14px 0; display: flex; gap: 8px; }
.addCategoryForm input { min-width: 0; height: 39px; padding: 0 11px; flex: 1; border: 1px solid var(--line-strong); border-radius: 8px; outline: 0; }
.categoryManagerList { display: flex; flex-direction: column; gap: 7px; }
.categoryManagerRow { min-height: 48px; padding: 6px 7px; display: grid; grid-template-columns: 25px minmax(100px, 1fr) 62px auto; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 9px; }
.categoryOrder { color: var(--subtle); text-align: center; font-size: 9px; }
.categoryManagerRow > input { height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; outline: 0; }
.categoryUsage { color: var(--subtle); font-size: 8px; }
.categoryActions { display: flex; gap: 4px; }
.categoryActions button { height: 29px; padding: 0 7px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 8px; cursor: pointer; }
.categoryActions button:disabled { opacity: .4; cursor: not-allowed; }
.categoryFoot { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.categoryFoot span { color: var(--subtle); font-size: 8px; }
.toast { position: fixed; left: 50%; bottom: 25px; z-index: 200; padding: 10px 15px; border-radius: 9px; background: #292530; color: #fff; font-size: 10px; box-shadow: 0 10px 30px rgba(22, 18, 30, .25); transform: translateX(-50%); }
.toast.error { background: #984357; }

@media (max-width: 980px) {
  .headerInner { width: calc(100% - 24px); grid-template-columns: auto 1fr auto; gap: 12px; }
  .header nav { justify-self: center; }
  .syncState, .userMenu > div, .userMenu em { display: none; }
  .page { width: calc(100% - 24px); padding-top: 25px; }
  .assetGrid { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 12px; padding: 14px; }
  .previewLayout { grid-template-columns: 1fr; }
  .previewImage { min-height: 430px; max-height: 62vh; }
  .previewInfo { padding: 24px; }
}

@media (max-width: 720px) {
  .loginPage { grid-template-columns: 1fr; }
  .loginVisual { display: none; }
  .loginPanel { padding: 28px; }
  .mobileSeal { display: grid; margin-bottom: 19px; }
  .brand > span:last-child, .header .primary.compact { display: none; }
  .header nav { justify-self: start; }
  .workspaceHead { align-items: flex-end; }
  .workspaceHead h1 { font-size: 24px; }
  .libraryMeta .dragTip { display: none; }
  .panelTop { flex-wrap: wrap; }
  .search { width: 100%; order: 0; }
  .panelTop select { order: 1; }
  .resultCount { order: 2; }
  .filterBar { align-items: flex-start; }
  .bulkToolbar { flex-wrap: wrap; }
  .selectedSummary { order: 3; width: 100%; }
  .assetGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formGrid { grid-template-columns: 1fr; }
  .formGrid label.full { grid-column: auto; }
  .employeeStats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 460px) {
  .page { width: calc(100% - 16px); }
  .headerInner { width: calc(100% - 16px); }
  .workspaceHead { min-height: 108px; }
  .headUpload { padding: 0 12px; }
  .libraryMeta > span:nth-child(2) { display: none; }
  .assetGrid { grid-template-columns: 1fr; padding: 10px; }
  .imageButton { aspect-ratio: 16 / 11; }
  .bulkToolbar { padding: 8px 10px; gap: 8px; }
  .selectAll span { display: none; }
  .bulkActions button { padding: 0 9px; }
  .employeeStats { grid-template-columns: 1fr; }
  .sectionHero { align-items: flex-start; flex-direction: column; padding-bottom: 14px; }
}

/* 素材 V2：角色、场景、物品三级素材体系 */
.assetTypeDock { min-height: 108px; margin-top: 18px; padding: 16px 18px; display: grid; grid-template-columns: 180px minmax(0,1fr) max-content; align-items: center; gap: 20px; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(135deg, rgba(12,25,21,.98), rgba(7,14,12,.98)); box-shadow: var(--shadow); }
.assetTypeDock h2 { margin: 0; font-size: 18px; }
.assetTypeDock > div:first-child > span { display: block; margin-top: 6px; color: #66756f; font-size: 8px; }
.assetTypeTabs { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 10px; }
.assetTypeTab { min-height: 70px; position: relative; padding: 11px 46px 11px 12px; display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: rgba(255,255,255,.025); color: #899993; text-align: left; cursor: pointer; transition: .18s ease; }
.assetTypeTab:hover { border-color: rgba(91,228,176,.34); background: rgba(74,214,161,.06); transform: translateY(-1px); }
.assetTypeTab.active { border-color: #54dda9; background: linear-gradient(135deg, rgba(72,213,160,.16), rgba(8,17,14,.92)); color: #e7f7f0; box-shadow: 0 0 0 3px rgba(80,221,168,.08), 0 12px 28px rgba(0,0,0,.22); }
.assetTypeTab > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.055); color: #87a69a; font-size: 14px; font-weight: 800; }
.assetTypeTab.active > span { background: #56dfaC; color: #06120d; }
.assetTypeTab > b { font-size: 13px; }
.assetTypeTab > small { min-width: 25px; height: 25px; padding: 0 7px; display: grid; place-items: center; position: absolute; right: 11px; top: 50%; border-radius: 99px; background: rgba(255,255,255,.06); color: #7f908a; font-size: 9px; transform: translateY(-50%); }
.assetTypeTab.active > small { background: rgba(91,226,175,.15); color: #69e9b9; }
.typeUpload { height: 38px; padding: 0 14px; border: 1px solid rgba(89,227,176,.28); border-radius: 9px; background: rgba(80,219,166,.08); color: #62e4b3; font-size: 9px; font-weight: 800; cursor: pointer; }
.typeUpload:hover { border-color: #57dfaD; background: rgba(80,219,166,.14); }

.assetTypeBadge { position: absolute; left: 8px; top: 8px; z-index: 3; padding: 5px 7px; border: 1px solid rgba(104,237,187,.25); border-radius: 6px; background: rgba(4,18,13,.86); color: #69e9b9; font-size: 8px; font-weight: 800; backdrop-filter: blur(7px); }
.assetCard .dragBadge { top: 36px; }
.cardFooter > .cardActions { flex: none; display: inline-flex; align-items: center; gap: 3px; overflow: visible; }
.cardActions button:first-child { color: #b7c5c0; }
.cardActions button:hover { color: #7af1c4; }

.uploadTypeSettings { margin-top: 18px; }
.editButton { height: 38px; margin-bottom: 8px; border: 1px solid rgba(91,228,177,.25); border-radius: 8px; background: rgba(75,215,163,.07); color: #65e4b5; font-size: 9px; font-weight: 800; cursor: pointer; }
.editButton:hover { border-color: #5ae1b0; background: rgba(75,215,163,.12); }
.editAssetForm { margin-top: 18px; }
.editAssetPreview { margin-bottom: 16px; display: grid; grid-template-columns: 118px minmax(0,1fr); align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: #080e0c; }
.editAssetPreview img { width: 118px; height: 88px; display: block; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: #050908; }
.editAssetPreview label { min-width: 0; display: grid; gap: 7px; }
.editAssetPreview label > span { color: #b4c0bc; font-size: 9px; font-weight: 700; }
.editAssetPreview input { width: 100%; color: #9ba9a4; font-size: 9px; }
.editAssetPreview small { color: #6f7d78; font-size: 8px; }
.editAudit { margin-top: 13px; padding: 10px 11px; display: grid; gap: 5px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.025); color: #71817b; font-size: 8px; }
.categoryEmpty { padding: 24px 12px; color: #6f7e78; font-size: 9px; text-align: center; }

@media (max-width: 980px) {
  .assetTypeDock { grid-template-columns: 150px minmax(0,1fr); }
  .assetTypeDock .typeUpload { grid-column: 1 / -1; justify-self: end; margin-top: -7px; }
}

@media (max-width: 720px) {
  .assetTypeDock { grid-template-columns: 1fr; gap: 13px; padding: 14px; }
  .assetTypeTabs { grid-template-columns: repeat(3, 1fr); }
  .assetTypeTab { min-height: 62px; padding: 8px; grid-template-columns: 30px minmax(0,1fr); gap: 7px; }
  .assetTypeTab > span { width: 30px; height: 30px; border-radius: 8px; font-size: 12px; }
  .assetTypeTab > small { display: none; }
  .assetTypeDock .typeUpload { width: 100%; margin: 0; justify-self: stretch; }
  .formGrid { grid-template-columns: 1fr; }
  .formGrid label.full { grid-column: auto; }
  .editAssetPreview { grid-template-columns: 86px minmax(0,1fr); }
  .editAssetPreview img { width: 86px; height: 72px; }
}

@media (max-width: 460px) {
  .assetTypeTab { display: flex; flex-direction: column; justify-content: center; text-align: center; }
  .assetTypeTab > span { display: none; }
  .assetTypeTab > b { font-size: 11px; }
  .editAssetPreview { grid-template-columns: 1fr; }
  .editAssetPreview img { width: 100%; height: 150px; }
}

/* v1.7 深色创意素材站主题 */
:root {
  --ink: #f2f7f5;
  --muted: #92a09c;
  --subtle: #65736f;
  --line: rgba(255,255,255,.085);
  --line-strong: rgba(255,255,255,.16);
  --surface: #0b1110;
  --canvas: #030706;
  --violet: #57e6b3;
  --violet-dark: #2dcf9b;
  --violet-soft: rgba(80,231,178,.12);
  --green: #57e6b3;
  --danger: #ff7187;
  --shadow: 0 24px 60px rgba(0,0,0,.34);
}
html, body { background: #030706; color: var(--ink); color-scheme: dark; }
body { background-image: radial-gradient(circle at 72% 0, rgba(30,164,126,.15), transparent 34%), radial-gradient(circle at 5% 25%, rgba(23,91,117,.14), transparent 28%); }
.primary { border: 1px solid rgba(133,255,210,.25); background: linear-gradient(135deg, #70f3c1, #37d8a4); color: #03110c; box-shadow: 0 10px 30px rgba(50,221,165,.18); }
.primary:hover { background: linear-gradient(135deg, #8affcf, #49eab3); box-shadow: 0 13px 34px rgba(50,221,165,.28); }
.ghost { border-color: var(--line-strong); background: #101715; color: #d8e3df; }
.eyebrow { color: #61e6b5; }

.loginPage.neonLogin { background: #030706; }
.neonLogin .loginVisual { padding: 34px clamp(28px, 3.6vw, 68px) 28px; background: radial-gradient(circle at 50% 30%, rgba(20,139,107,.26), transparent 38%), linear-gradient(145deg, #05120e, #020504 70%); }
.neonLogin .loginVisual::before { width: 720px; height: 720px; right: -360px; top: -330px; border-color: rgba(90,238,184,.14); box-shadow: 0 0 100px rgba(63,226,166,.08); }
.neonLogin .loginBrand > span, .neonLogin .mobileSeal { background: linear-gradient(145deg, #7af6c7, #2dd39f); color: #06130f; box-shadow: 0 0 26px rgba(62,224,167,.28); }
.neonLogin .loginBrand b { background: linear-gradient(90deg, #6feec0, #69d9ff); color: transparent; background-clip: text; }
.loginFeature { width: min(680px, 100%); min-height: 0; margin: 24px auto 18px; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 2.6vh, 28px); position: relative; top: -4vh; z-index: 2; text-align: center; }
.neonLogin .loginStatement { width: 100%; margin: 0; }
.neonLogin .loginStatement p { color: #65dab0; }
.neonLogin .loginStatement p { margin-bottom: 11px; }
.neonLogin .loginStatement h1 { font-size: clamp(32px, 2.8vw, 44px); line-height: 1.1; }
.neonLogin .loginStatement h1 em { color: #68eab8; font-style: normal; }
.neonLogin .loginStatement > span { max-width: 570px; margin: 16px auto 0; }
.loginArtStack { width: 43%; height: 68%; position: absolute; right: 5%; top: 16%; }
.loginArtStack img { width: 44%; height: 76%; position: absolute; top: 10%; object-fit: cover; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.loginArtStack img:nth-child(1) { left: 0; transform: rotate(-7deg) translateY(18px); }
.loginArtStack img:nth-child(2) { left: 28%; z-index: 2; height: 86%; top: 2%; }
.loginArtStack img:nth-child(3) { right: 0; transform: rotate(7deg) translateY(18px); }
.loginHeroImage { width: min(600px, 100%); aspect-ratio: 16 / 8.4; overflow: hidden; position: relative; z-index: 2; flex: 0 1 auto; border: 1px solid rgba(112,239,192,.28); border-radius: 18px; background: #07100d; box-shadow: 0 25px 70px rgba(0,0,0,.55), 0 0 40px rgba(65,220,163,.1); }
.loginHeroImage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,8,6,.18), transparent 45%), linear-gradient(0deg, rgba(2,8,6,.6), transparent 35%); pointer-events: none; }
.loginHeroImage img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.loginHeroImage > span { position: absolute; left: 14px; bottom: 12px; z-index: 2; color: rgba(222,247,237,.76); font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.neonLogin .loginVisual footer { text-align: center; }
.neonLogin .loginPanel { background: #080d0c; }
.neonLogin .loginBox h2 { color: #f4faf7; }
.neonLogin .loginSub, .neonLogin .loginHelp { color: #76837f; }
.neonLogin .loginBox input, .stackForm input, .stackForm select { border-color: rgba(255,255,255,.14); background: #0d1412; color: #f4faf7; }
.neonLogin .loginBox input:focus, .stackForm input:focus, .stackForm select:focus { border-color: #4fdfa9; box-shadow: 0 0 0 4px rgba(75,224,168,.12); }
.previewAccess { margin: -10px 0 14px; padding: 11px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid rgba(98,231,182,.23); border-radius: 10px; background: rgba(72,211,159,.065); }
.previewAccess > div { display: flex; flex-direction: column; gap: 3px; }
.previewAccess span { margin-bottom: 2px; color: #69e4b6; font-size: 9px; font-weight: 800; }
.previewAccess b { color: #c9dad3; font: 9px ui-monospace, Consolas, monospace; }
.previewAccess button { height: 32px; padding: 0 10px; border: 1px solid rgba(99,232,183,.28); border-radius: 7px; background: rgba(87,225,173,.1); color: #6de8ba; font-size: 9px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.previewAccess button:hover { background: rgba(87,225,173,.17); }

.libraryApp { background: transparent; }
.header { height: 68px; border-color: rgba(255,255,255,.08); background: rgba(3,8,7,.86); box-shadow: 0 10px 38px rgba(0,0,0,.22); }
.headerInner { width: min(1500px, calc(100% - 48px)); }
.brandSeal { background: linear-gradient(145deg, #74f2c2, #2ed19d); color: #06130f; box-shadow: 0 0 24px rgba(58,222,163,.22); }
.brand b { background: linear-gradient(90deg, #72eec0, #6bdfff); color: transparent; background-clip: text; }
.brand small { color: #60716b; }
.header nav button { color: #85928e; }
.header nav button:hover { background: rgba(255,255,255,.055); color: #eef6f3; }
.header nav button.active { background: rgba(79,224,169,.13); color: #6becbb; }
.userMenu:hover { background: rgba(255,255,255,.055); }
.userMenu > span, .person > i, .accountIdentity > i { background: rgba(88,231,178,.13); color: #65e8b7; }
.page { width: min(1500px, calc(100% - 48px)); padding-top: 24px; }

.showcaseHero { min-height: 470px; overflow: hidden; position: relative; display: grid; grid-template-columns: minmax(400px, .9fr) minmax(540px, 1.1fr); align-items: center; gap: 44px; padding: 52px clamp(36px, 5vw, 78px); border: 1px solid rgba(91,237,184,.12); border-radius: 24px; background: radial-gradient(circle at 76% 24%, rgba(23,172,127,.25), transparent 36%), radial-gradient(circle at 30% 105%, rgba(34,86,126,.22), transparent 34%), #050a08; box-shadow: inset 0 1px rgba(255,255,255,.05), 0 28px 80px rgba(0,0,0,.35); }
.showcaseHero::after { content: ""; width: 520px; height: 520px; position: absolute; right: -250px; top: -270px; border: 1px solid rgba(93,238,184,.15); border-radius: 50%; box-shadow: 0 0 90px rgba(72,225,168,.08); }
.showcaseGlow { width: 460px; height: 36px; position: absolute; right: 9%; bottom: 6%; background: #4ce0ab; opacity: .13; filter: blur(28px); }
.showcaseCopy { position: relative; z-index: 2; }
.heroKicker { margin: 0 0 18px; color: #79a99a; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.heroKicker i { width: 7px; height: 7px; margin-right: 7px; display: inline-block; border-radius: 50%; background: #5ce8b5; box-shadow: 0 0 13px #5ce8b5; }
.showcaseCopy h1 { margin: 0; font-size: clamp(48px, 5.8vw, 78px); line-height: 1; letter-spacing: -.07em; }
.showcaseCopy h1 span { background: linear-gradient(90deg, #68dcff, #68f1ad); color: transparent; background-clip: text; }
.heroSlogan { margin: 25px 0 0; color: #e7efec; font-size: clamp(18px, 1.8vw, 26px); font-weight: 700; }
.heroSlogan b { color: #66e8b7; }
.heroDescription { max-width: 520px; margin: 15px 0 0; color: #82918c; font-size: 12px; line-height: 1.8; }
.heroActions { margin-top: 27px; display: flex; gap: 10px; }
.heroActions .primary { height: 44px; }
.heroGhost { height: 44px; padding: 0 17px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: rgba(255,255,255,.035); color: #becac6; font-size: 10px; cursor: pointer; }
.heroGhost:hover { border-color: rgba(97,231,181,.32); color: #6ce9bb; }
.showcaseCopy .libraryMeta { margin-top: 26px; }
.showcaseCopy .libraryMeta > span { border-color: rgba(255,255,255,.09); background: rgba(255,255,255,.035); color: #82918c; }
.showcaseCopy .libraryMeta b { color: #eff8f4; }
.showcaseArts { height: 370px; position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 14px; perspective: 1000px; }
.showcaseArts figure { width: 29%; height: 82%; margin: 0; overflow: hidden; position: relative; border: 1px solid rgba(255,255,255,.15); border-radius: 17px; background: #0d1412; box-shadow: 0 22px 48px rgba(0,0,0,.5); transform: rotateY(5deg) translateY(12px); transition: transform .25s, border-color .25s; }
.showcaseArts figure:nth-child(3) { transform: rotateY(-5deg) translateY(12px); }
.showcaseArts figure.featured { width: 34%; height: 96%; z-index: 2; transform: none; border-color: rgba(106,237,188,.35); box-shadow: 0 25px 70px rgba(0,0,0,.56), 0 0 32px rgba(70,221,165,.12); }
.showcaseArts figure:hover { z-index: 4; border-color: rgba(109,241,192,.5); transform: translateY(-6px); }
.showcaseArts img { width: 100%; height: 100%; display: block; object-fit: cover; }
.showcaseArts figcaption { position: absolute; left: 9px; right: 9px; bottom: 9px; padding: 8px 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(2,6,5,.72); color: #eaf6f1; font-size: 9px; font-weight: 700; text-align: center; backdrop-filter: blur(9px); }

.categoryDock { min-height: 126px; margin-top: 18px; padding: 16px 18px; display: flex; align-items: center; gap: 22px; border: 1px solid var(--line); border-radius: 17px; background: rgba(10,16,14,.92); box-shadow: var(--shadow); }
.categoryDock > div:first-child { min-width: 112px; }
.categoryDock h2, .panelTitle h2 { margin: 0; font-size: 17px; }
.categoryDock .categoryRail { min-width: 0; padding: 3px; flex: 1; gap: 10px; }
.categoryDock .categoryRail button { min-width: 72px; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: transparent; color: #8f9c98; cursor: pointer; }
.categoryDock .categoryRail button > span { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #1b2925, #0a100f 70%); color: #95a7a1; font-size: 17px; font-weight: 800; transition: .18s; }
.categoryDock .categoryRail button > b { font-size: 9px; font-weight: 600; }
.categoryDock .categoryRail button:hover > span, .categoryDock .categoryRail button.active > span { border-color: #5ce7b4; color: #68edbb; box-shadow: 0 0 0 4px rgba(82,228,174,.09), 0 0 24px rgba(73,221,165,.16); }
.categoryDock .categoryRail button.active > b { color: #6ee9ba; }
.categoryDock .filterControls { min-width: max-content; flex-direction: column; }
.categoryDock .filterControls button { height: 31px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: #0d1412; color: #9daba6; font-size: 8px; cursor: pointer; }
.categoryDock .filterControls .manageCategories { color: #63e4b4; }

.libraryPanel, .accountPanel { margin-top: 18px; border-color: var(--line); background: rgba(8,13,12,.96); box-shadow: var(--shadow); }
.panelTop { min-height: 76px; border-color: var(--line); }
.panelTitle { margin-right: auto; }
.panelTitle .eyebrow { margin-bottom: 5px; }
.search { border-color: var(--line-strong); background: #101615; }
.search:focus-within { border-color: #4adca7; box-shadow: 0 0 0 3px rgba(72,220,167,.11); background: #111a17; }
.search input { color: #edf7f3; }
.search kbd { border-color: var(--line-strong); background: #080d0c; color: #62716c; }
.panelTop select { border-color: var(--line-strong); background: #101615; color: #a3afab; }
.bulkToolbar { border-color: var(--line); background: #0a100f; }
.selectAll { color: #aab7b2; }
.bulkActions button { border-color: var(--line-strong); background: #111816; color: #63e4b3; }
.bulkActions button:hover:not(:disabled) { border-color: rgba(94,234,182,.4); background: rgba(77,221,167,.08); }
.assetGrid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; padding: 20px; }
.assetCard { border-color: rgba(255,255,255,.09); background: #0d1118; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.assetCard:hover { border-color: rgba(93,231,180,.34); box-shadow: 0 18px 42px rgba(0,0,0,.36), 0 0 26px rgba(62,208,154,.06); }
.assetCard.selectedCard { border-color: #5ce4b3; box-shadow: 0 0 0 3px rgba(84,226,174,.12); }
.cardSelect { border-color: rgba(255,255,255,.16); background: rgba(6,11,10,.84); }
.cardSelect span { border-color: #52615c; }
.cardSelect input:checked + span { border-color: #5be5b2; background: #5be5b2; color: #06120d; }
.imageButton { border-color: var(--line); background: #080b10; }
.dragBadge { background: rgba(10,42,34,.86); color: #6deabb; }
.cardInfo .cardIdentity > span { color: #8f9a97; }
.cardInfo .categoryBadge { background: rgba(79,220,168,.11); color: #65e6b6; }
.cardInfo .categoryBadge small { color: #71998b; }
.cardFooter { border-color: var(--line); }
.cardFooter button { color: #62e2b1; }
.addCard { border-color: rgba(98,229,181,.25); background: rgba(75,218,165,.035); color: #8da09a; }
.addCard:hover { border-color: #59dfad; background: rgba(75,218,165,.075); color: #68e8b8; }
.addCard > span, .emptyState > div { background: rgba(83,225,173,.11); color: #61e5b4; }
.emptyState i { border-color: #08100d; background: #58e0ad; color: #06120d; }
.appFooter { color: #4f605a; }
.appFooter b { color: #71827c; }

.employeePage .sectionHero, .licensePage .sectionHero { min-height: 150px; padding: 24px 28px; border: 1px solid rgba(94,233,182,.12); border-radius: 18px; background: radial-gradient(circle at 82% 0, rgba(43,188,139,.15), transparent 34%), #08100d; }
.sectionHero h1 { color: #f2faf6; }
.sectionHero > div > p:last-child { color: #83918c; }
.employeeStats > div { border-color: var(--line); background: #0b1210; }
.employeeStats small { color: #71807a; }
.accountPanel { background: #080e0c; }
.accountHead, .accountRow { border-color: var(--line); }
.accountHead h2, .person b { color: #e9f4ef; }
.accountHead span, .person small, .muted { color: #73817c; }
.accountLabels { background: #0b1210; color: #66746f; }
.rowActions button, .accountMenu > button { border-color: var(--line-strong); background: #101714; color: #aab7b2; }
.rowActions button:hover, .accountMenu > button:hover { border-color: rgba(93,232,180,.35); color: #63e3b3; }
.status.active { background: rgba(72,215,160,.13); color: #62e1af; }
.status.disabled { background: rgba(255,255,255,.055); color: #899590; }
.licenseStats { grid-template-columns: repeat(4, 160px); }
.licenseProductTabs { display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #07100d; }
.licenseProductTabs button { min-height: 74px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #0b1411; color: #dce9e3; text-align: left; transition: .18s ease; }
.licenseProductTabs button:hover { border-color: rgba(77,235,183,.42); transform: translateY(-1px); }
.licenseProductTabs button.active { border-color: var(--green); background: linear-gradient(135deg, rgba(27,196,139,.2), rgba(7,16,13,.96)); box-shadow: 0 0 0 1px rgba(77,235,183,.08) inset; }
.licenseProductTabs b, .licenseProductTabs small { display: block; }
.licenseProductTabs b { font-size: 14px; }
.licenseProductTabs small { margin-top: 7px; color: #76877f; font-size: 10px; line-height: 1.5; }
.licenseProductTabs button.active small { color: #a7bcb3; }
.licensePermission { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: #08110e; }
.licensePermission input { width: 17px !important; height: 17px; margin-top: 2px; accent-color: var(--green); }
.licensePermission > span { display: grid; gap: 4px; }
.licensePermission b { color: #dff8ef; font-size: 11px; }
.licensePermission small { color: #74857d; font-size: 9px; line-height: 1.5; }
.licenseTable { overflow-x: auto; }
.licenseRow { min-width: 1120px; min-height: 76px; padding: 10px 20px; display: grid; grid-template-columns: 1.1fr 1fr .75fr 1fr 2.1fr; align-items: center; gap: 15px; border-bottom: 1px solid var(--line); font-size: 10px; }
.licenseRow > span:not(.rowActions) { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.licenseRow small { max-width: 100%; overflow: hidden; color: #73817c; text-overflow: ellipsis; white-space: nowrap; }
.licenseLabels { min-height: 42px; background: #0b1210; color: #66746f; }
.licenseLabels > span { display: block !important; }
.licenseActions { flex-wrap: wrap; }
.licenseEmpty { padding: 48px 20px; color: #73817c; text-align: center; }
.licenseCreated { padding: 28px; }
.licenseCreated textarea { width: 100%; min-height: 260px; padding: 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: #08100d; color: #dff8ef; font: 12px/1.7 Consolas, monospace; resize: vertical; }

.modalBackdrop { background: rgba(0,4,3,.76); }
.modalCard { border: 1px solid rgba(255,255,255,.1); background: #0b1110; color: #edf7f3; box-shadow: 0 34px 100px rgba(0,0,0,.62); }
.modalHead p { color: #5ce4b3; }
.modalHead > button, .previewClose { background: rgba(255,255,255,.07); color: #a0aca8; }
.modalHead > button:hover, .previewClose:hover { background: rgba(93,228,178,.12); color: #6fe9bc; }
.fileDrop { border-color: rgba(95,229,180,.25); background: rgba(73,213,162,.04); }
.fileDrop:hover { border-color: #5be0ae; background: rgba(73,213,162,.08); }
.fileDrop > span { background: rgba(82,225,173,.12); color: #64e5b5; }
.fileDrop small, .batchHint, .stackForm label small { color: #6f7d78; }
.batchQueue { border-color: var(--line); background: #080e0c; }
.batchQueueHead, .batchRow { border-color: var(--line); }
.batchQueueHead span, .batchRow > span, .batchRow small { color: #70807a; }
.batchRow input { color: #e8f3ee; }
.batchRow input:hover, .batchRow input:focus { border-color: var(--line-strong); background: #101714; }
.formGrid label > span, .loginBox label > span, .stackForm label > span { color: #a8b4b0; }
.formGrid input, .formGrid select { border-color: var(--line-strong); background: #0e1513; color: #edf7f3; }
.modalActions > button:first-child { border-color: var(--line-strong); background: #101714; color: #aab7b2; }
.inlineProgress { border-color: rgba(91,228,177,.2); background: rgba(78,217,164,.055); }
.inlineProgress > div:first-child, .progressMeta { color: #81908a; }
.inlineProgress b, .progressMeta b { color: #62e3b2; }
.progressTrack { background: #18231f; }
.progressTrack i { background: linear-gradient(90deg, #42d59f, #78f0c1); }
.transferIcon { background: rgba(78,222,168,.12); color: #63e4b4; }
.transferCard > p { color: #62e2b2; }
.previewImage { background: #050908; }
.previewInfo { background: #0b1110; }
.previewInfo h2 { color: #f2faf6; }
.previewTags span { background: rgba(81,223,170,.12); color: #64e4b5; }
.previewInfo dl, .previewInfo dl > div { border-color: var(--line); }
.previewInfo dt { color: #72807b; }
.previewInfo dd { color: #cbd7d2; }
.dragOutGuide { border-color: rgba(92,229,179,.2); background: rgba(74,211,161,.055); }
.dragOutGuide > span { background: #58dfad; color: #06120d; }
.dragOutGuide small { color: #74817d; }
.formIntro { background: #101614; color: #84918d; }
.generatedPassword button { border-color: rgba(92,229,179,.22); background: rgba(72,211,159,.07); color: #63dfb0; }
.securityNote { border-color: rgba(92,229,179,.18); background: rgba(72,211,159,.055); }
.securityNote b { color: #63dfb0; }
.securityNote span { color: #788681; }
.credentialDone > span { background: #55dea9; color: #06120d; }
.credentialDone > p { color: #82908b; }
.credentialDone > div { border-color: var(--line); background: #0e1513; }
.accountIdentity, .categoryManagerRow { border-color: var(--line); }
.accountIdentity span { color: #74827d; }
.categoryIntro, .categoryUsage, .categoryFoot span { color: #77857f; }
.addCategoryForm input, .categoryManagerRow > input { border-color: var(--line-strong); background: #0e1513; color: #edf7f3; }
.categoryManagerRow { background: #0a100f; }
.categoryActions button { border-color: var(--line-strong); background: #111816; color: #a9b5b1; }
.toast { background: #15372c; color: #dff8ef; }
.toast.error { background: #642c38; }

@media (max-width: 1120px) {
  .loginFeature { width: 96%; }
  .neonLogin .loginStatement h1 { font-size: clamp(31px, 3.5vw, 40px); }
  .showcaseHero { grid-template-columns: .9fr 1.1fr; gap: 24px; padding: 44px 38px; }
  .showcaseArts { height: 330px; }
  .showcaseCopy h1 { font-size: 55px; }
  .categoryDock { align-items: flex-start; flex-wrap: wrap; }
  .categoryDock .categoryRail { width: calc(100% - 150px); order: 3; flex-basis: 100%; }
  .categoryDock .filterControls { margin-left: auto; flex-direction: row; }
}

@media (max-width: 820px) {
  .showcaseHero { grid-template-columns: 1fr; padding: 38px 28px 28px; }
  .showcaseCopy { text-align: center; }
  .heroDescription { margin-left: auto; margin-right: auto; }
  .heroActions, .showcaseCopy .libraryMeta { justify-content: center; }
  .showcaseArts { height: 310px; }
  .categoryDock > div:first-child { min-width: auto; }
  .panelTitle { width: 100%; }
}

@media (max-width: 720px) {
  .loginArtStack { display: none; }
  .loginHeroImage { display: block; }
  .neonLogin .loginStatement { width: 100%; }
  .page, .headerInner { width: calc(100% - 24px); }
  .showcaseHero { min-height: auto; border-radius: 18px; }
  .showcaseCopy h1 { font-size: 45px; }
  .heroSlogan { font-size: 17px; }
  .showcaseArts { height: 260px; gap: 8px; }
  .showcaseArts figure { width: 31%; border-radius: 12px; }
  .showcaseArts figure.featured { width: 36%; }
  .showcaseArts figcaption { display: none; }
  .categoryDock { padding: 14px; }
  .categoryDock .categoryRail { width: 100%; }
  .categoryDock .categoryRail button { min-width: 64px; }
  .categoryDock .categoryRail button > span { width: 48px; height: 48px; }
  .panelTop { align-items: flex-start; }
  .panelTitle { margin-bottom: 4px; }
  .employeePage .sectionHero, .licensePage .sectionHero { padding: 20px; }
  .licenseProductTabs { grid-template-columns: 1fr; }
  .licenseStats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 460px) {
  .showcaseHero { padding: 30px 18px 20px; }
  .showcaseCopy h1 { font-size: 38px; }
  .heroActions { flex-direction: column; }
  .heroActions button { width: 100%; }
  .showcaseCopy .libraryMeta > span:nth-child(2) { display: none; }
  .showcaseArts { height: 220px; }
  .categoryDock .filterControls { width: 100%; margin: 0; }
  .categoryDock .filterControls button { flex: 1; }
  .licenseStats { grid-template-columns: 1fr; }
}