:root {
  --ink: #14213a;
  --muted: #6f7e95;
  --line: #e6ebf2;
  --canvas: #f4f6fa;
  --card: #fff;
  --blue: #246bfd;
  --blue-dark: #1557df;
  --green: #18a56a;
  --danger: #dc4454;
  --shadow: 0 16px 44px rgba(22, 37, 67, .09);
  --radius: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hidden { display: none !important; }

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(400px, 540px) 1fr;
  background: #fff;
}
.login-panel {
  width: 100%;
  max-width: 470px;
  margin: auto;
  padding: 44px 52px;
}
.brand { height: 58px; display: flex; align-items: center; gap: 11px; padding: 0 21px; }
.brand-login { padding: 0; margin-bottom: 72px; }
.brand-mark {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px;
  color: #fff; background: linear-gradient(145deg, #367cff, #1d5bea);
  box-shadow: 0 8px 18px rgba(36, 107, 253, .25);
}
.brand-mark svg { width: 23px; height: 23px; stroke-width: 1.9; }
.brand strong { display: block; font-size: 16px; letter-spacing: .02em; }
.brand small { display: block; margin-top: 2px; color: #94a0b2; font-size: 9px; letter-spacing: .11em; text-transform: uppercase; }
.eyebrow { color: var(--blue); font-size: 11px; font-weight: 750; letter-spacing: .12em; }
.login-copy h1 { margin: 12px 0 12px; font-size: 31px; line-height: 1.25; letter-spacing: -.03em; }
.login-copy p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.login-form { display: grid; gap: 17px; margin-top: 34px; }
.login-form label, .remark-field { display: grid; gap: 8px; }
.login-form label span, .remark-field span { color: #45546b; font-size: 12px; font-weight: 650; }
input {
  width: 100%; height: 43px; border: 1px solid #dfe5ee; border-radius: 9px;
  outline: none; padding: 0 13px; color: var(--ink); background: #fbfcfe;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
input:focus { border-color: #75a2ff; box-shadow: 0 0 0 3px rgba(36, 107, 253, .1); background: #fff; }
.form-error { min-height: 18px; margin: -5px 0 -4px; color: var(--danger); font-size: 12px; }
.button {
  height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 14px; border: 1px solid transparent; border-radius: 8px; cursor: pointer;
  font-size: 12px; font-weight: 700; background: #fff; transition: .18s ease;
}
.button svg { width: 16px; height: 16px; }
.button:disabled { cursor: not-allowed; opacity: .62; }
.button.primary { color: #fff; background: var(--blue); box-shadow: 0 8px 18px rgba(36, 107, 253, .2); }
.button.primary:hover:not(:disabled) { background: var(--blue-dark); transform: translateY(-1px); }
.button.wide { width: 100%; height: 44px; font-size: 13px; }
.button.wide svg { margin-left: auto; }
.button.subtle { color: #53627a; background: #fff; border-color: var(--line); }
.button.subtle:hover { border-color: #cdd7e6; background: #f8faff; }
.button.danger { color: #fff; background: var(--danger); }
.button.small { height: 34px; }
.security-note {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 25px; color: #8b98aa;
  font-size: 10px; line-height: 1.55;
}
.security-note svg { flex: 0 0 17px; width: 17px; height: 17px; color: var(--green); }
.login-art {
  position: relative; overflow: hidden; min-height: 100vh; background:
    radial-gradient(circle at 68% 32%, rgba(77, 133, 255, .24), transparent 24%),
    linear-gradient(145deg, #eef4ff, #e7effd 45%, #f3f7ff);
}
.art-grid {
  position: absolute; inset: 0; opacity: .52;
  background-image: linear-gradient(rgba(80, 119, 183, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(80, 119, 183, .08) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom right, transparent, #000 35%, transparent 86%);
}
.art-card {
  position: absolute; background: rgba(255, 255, 255, .85); border: 1px solid rgba(255,255,255,.9);
  border-radius: 22px; box-shadow: 0 30px 80px rgba(52, 84, 145, .16); backdrop-filter: blur(14px);
}
.art-main { left: 50%; top: 48%; width: min(410px, 64%); padding: 34px; transform: translate(-45%, -50%) rotate(-2deg); }
.art-main .art-label { color: #73839b; font-size: 11px; }
.art-main strong { display: block; margin: 10px 0 28px; font-size: 24px; letter-spacing: -.03em; }
.art-platforms { display: flex; gap: 12px; }
.art-platforms i {
  width: 58px; height: 58px; display: grid; place-items: center; border-radius: 17px;
  color: #fff; font-size: 18px; font-style: normal; font-weight: 800; box-shadow: 0 12px 22px rgba(30, 50, 90, .13);
}
.art-platforms .quark { background: linear-gradient(145deg, #603bf4, #4a27dd); }
.art-platforms .baidu { background: linear-gradient(145deg, #367dff, #155de6); }
.art-platforms .xunlei { background: linear-gradient(145deg, #20aeea, #0a80df); }
.art-float {
  left: 18%; top: 25%; display: flex; align-items: center; gap: 8px; padding: 13px 17px;
  color: #465873; font-size: 11px; transform: rotate(2deg);
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(24,165,106,.12); }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed; z-index: 20; inset: 0 auto 0 0; width: 216px; display: flex; flex-direction: column;
  background: #fff; border-right: 1px solid var(--line);
}
.nav { flex: 1; padding: 16px 12px; overflow-y: auto; }
.nav-item {
  position: relative; width: 100%; height: 42px; display: flex; align-items: center; gap: 11px;
  margin: 2px 0; padding: 0 12px; border: 0; border-radius: 8px; background: transparent;
  color: #637188; cursor: pointer; text-align: left; font-size: 12px;
}
.nav-item svg { width: 18px; height: 18px; flex: 0 0 18px; }
.nav-item span { white-space: nowrap; }
.nav-item em {
  margin-left: auto; color: #9ba7b8; font-size: 8px; font-style: normal; white-space: nowrap;
  background: #f0f3f8; border-radius: 4px; padding: 3px 4px;
}
.nav-item:hover { color: var(--ink); background: #f5f7fb; }
.nav-item.active { color: var(--blue); background: #edf3ff; font-weight: 700; }
.nav-item.active::before { content: ""; position: absolute; left: -12px; width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--blue); }
.nav-item.locked { cursor: default; }
.nav-separator { height: 1px; margin: 14px 8px; background: var(--line); }
.sidebar-foot { padding: 14px 18px 18px; }
.server-state {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px;
  color: #748299; border: 1px solid var(--line); border-radius: 8px; font-size: 10px;
}
.server-state i, .provider-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.main { min-height: 100vh; margin-left: 216px; }
.topbar {
  height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px;
  background: rgba(255,255,255,.9); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px);
}
.breadcrumb { margin: 0 0 4px; color: #a0aabb; font-size: 9px; }
.topbar h1 { margin: 0; font-size: 17px; letter-spacing: -.01em; }
.top-actions, .user-menu { display: flex; align-items: center; }
.top-actions { gap: 14px; }
.date-chip { color: #8190a4; font-size: 10px; }
.user-menu { gap: 8px; padding-left: 14px; border-left: 1px solid var(--line); }
.avatar { width: 28px; height: 28px; display: grid; place-items: center; color: #fff; background: #27466f; border-radius: 8px; font-size: 11px; font-weight: 800; }
.user-name { font-size: 11px; font-weight: 650; }
.icon-button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #8290a3; cursor: pointer; }
.icon-button:hover { color: var(--ink); background: #f1f4f8; }
.icon-button svg { width: 17px; height: 17px; }
.content { width: min(1280px, 100%); margin: 0 auto; padding: 25px 28px 48px; }
.section-head, .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.section-head { margin-bottom: 15px; }
.section-head h2, .panel-head h2 { margin: 0; font-size: 14px; }
.section-head p, .panel-head p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.secure-badge {
  display: inline-flex; align-items: center; gap: 5px; color: #44806c; background: #eef8f4;
  border: 1px solid #d8eee7; border-radius: 999px; padding: 6px 9px; font-size: 9px; font-weight: 650;
}
.secure-badge svg { width: 13px; height: 13px; }
.provider-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.provider-card {
  position: relative; overflow: hidden; min-height: 188px; padding: 18px; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff; box-shadow: 0 4px 14px rgba(20, 35, 62, .025);
}
.provider-card::after {
  content: ""; position: absolute; width: 140px; height: 140px; right: -68px; top: -72px;
  border-radius: 50%; opacity: .08;
}
.quark-card::after { background: #5a32eb; }
.baidu-card::after { background: #1967f4; }
.xunlei-card::after { background: #0790e6; }
.provider-top { display: flex; align-items: flex-start; justify-content: space-between; }
.provider-logo {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px;
  color: #fff; font-size: 14px; font-weight: 800; box-shadow: 0 8px 16px rgba(20, 40, 80, .14);
}
.quark-card .provider-logo, .modal-card.quark .provider-logo { background: linear-gradient(145deg, #6742f5, #4c29df); }
.baidu-card .provider-logo, .modal-card.baidu .provider-logo { background: linear-gradient(145deg, #4384ff, #1b63e8); }
.xunlei-card .provider-logo, .modal-card.xunlei .provider-logo { background: linear-gradient(145deg, #28afe9, #087fdc); }
.provider-state { display: inline-flex; align-items: center; gap: 5px; color: #7b899c; font-size: 9px; }
.provider-state i { width: 5px; height: 5px; background: #9eabbc; }
.provider-card h3 { margin: 13px 0 5px; font-size: 14px; }
.provider-card p { min-height: 31px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.provider-button { width: 100%; margin-top: 14px; color: #526177; border-color: var(--line); background: #fbfcfe; }
.provider-button:hover { color: var(--blue); border-color: #cbdafa; background: #f4f8ff; }
.accounts-panel { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.panel-head { padding: 16px 18px; border-bottom: 1px solid var(--line); }
.account-list { display: grid; }
.account-row {
  display: grid; grid-template-columns: minmax(200px, 1.35fr) minmax(150px, 1fr) minmax(120px, .8fr) 100px 36px;
  gap: 16px; align-items: center; min-height: 72px; padding: 11px 18px; border-bottom: 1px solid #edf0f4;
}
.account-row:last-child { border-bottom: 0; }
.account-identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.account-identity .provider-logo { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; font-size: 12px; }
.account-identity .provider-logo.quark { background: #5632e8; }
.account-identity .provider-logo.baidu { background: #236cf0; }
.account-identity .provider-logo.xunlei { background: #0b8de2; }
.account-name { min-width: 0; }
.account-name strong, .account-stat strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.account-name span, .account-stat span { display: block; margin-top: 4px; color: #8a97aa; font-size: 9px; }
.account-stat { min-width: 0; }
.usage-bar { width: 100%; max-width: 170px; height: 4px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: #edf1f6; }
.usage-bar i { display: block; height: 100%; border-radius: inherit; background: var(--blue); }
.valid-chip { display: inline-flex; align-items: center; gap: 5px; color: #258064; font-size: 9px; }
.valid-chip i { width: 6px; height: 6px; border-radius: 50%; background: #2cb27d; }
.remove-button { color: #9aa5b5; }
.remove-button:hover { color: var(--danger); background: #fff1f3; }
.empty-state { display: grid; justify-items: center; padding: 43px 20px 46px; text-align: center; }
.empty-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: #8392a8; background: #f1f4f8; }
.empty-icon svg { width: 22px; height: 22px; }
.empty-state strong { margin-top: 13px; font-size: 12px; }
.empty-state p { max-width: 360px; margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }

.modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(14, 25, 44, .46); backdrop-filter: blur(4px); }
.modal-card {
  position: relative; z-index: 1; width: min(650px, 100%); overflow: hidden; border: 1px solid rgba(255,255,255,.75);
  border-radius: 18px; background: #fff; box-shadow: 0 32px 90px rgba(10, 24, 50, .26);
}
.modal-close { position: absolute; z-index: 2; right: 14px; top: 14px; }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 20px 22px 15px; border-bottom: 1px solid var(--line); }
.modal-head .provider-logo { width: 36px; height: 36px; border-radius: 10px; font-size: 13px; }
.modal-head h2 { margin: 4px 0 0; font-size: 15px; }
.qr-layout { display: grid; grid-template-columns: 270px 1fr; gap: 25px; padding: 25px; }
.qr-frame {
  position: relative; width: 270px; height: 270px; display: grid; place-items: center;
  border: 1px solid #e0e7f1; border-radius: 15px; background:
    linear-gradient(90deg, #f4f7fb 1px, transparent 1px),
    linear-gradient(#f4f7fb 1px, transparent 1px), #fff;
  background-size: 18px 18px;
}
.qr-frame::before, .qr-frame::after {
  content: ""; position: absolute; width: 32px; height: 32px; border-color: var(--blue); border-style: solid;
}
.qr-frame::before { left: -1px; top: -1px; border-width: 2px 0 0 2px; border-radius: 14px 0 0; }
.qr-frame::after { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; border-radius: 0 0 14px; }
#qrImage { width: 238px; height: 238px; object-fit: contain; border-radius: 7px; background: #fff; }
.qr-loading { display: grid; justify-items: center; gap: 11px; color: #8290a3; font-size: 10px; }
.qr-loading span { width: 28px; height: 28px; border: 3px solid #e4eaf2; border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.qr-expired { display: grid; justify-items: center; gap: 12px; color: #68768b; font-size: 12px; }
.qr-instructions { padding-top: 4px; }
.qr-status {
  display: flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 11px;
  border-radius: 8px; color: #576a83; background: #f4f7fb; font-size: 10px; line-height: 1.4;
}
.qr-status i { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: #9ca8b8; box-shadow: 0 0 0 4px rgba(132,147,167,.12); }
.qr-status.scanned, .qr-status.finalizing { color: #326b9b; background: #eef7ff; }
.qr-status.scanned i, .qr-status.finalizing i { background: #268ce3; box-shadow: 0 0 0 4px rgba(38,140,227,.12); }
.qr-status.done { color: #217559; background: #edf8f4; }
.qr-status.done i { background: var(--green); box-shadow: 0 0 0 4px rgba(24,165,106,.13); }
.qr-status.error { color: #a83b48; background: #fff0f2; }
.qr-status.error i { background: var(--danger); }
.qr-instructions ol { display: grid; gap: 9px; margin: 18px 0; padding-left: 20px; color: #6f7c90; font-size: 10px; line-height: 1.55; }
.qr-instructions li::marker { color: #a3afbf; }
.remark-field input { height: 37px; font-size: 11px; }
.countdown { margin: 14px 0 0; color: #98a3b3; font-size: 9px; }
.countdown strong { color: #627188; font-variant-numeric: tabular-nums; }
.modal-foot { display: flex; align-items: flex-start; gap: 8px; padding: 12px 22px; color: #8491a3; background: #f8fafc; border-top: 1px solid var(--line); font-size: 9px; line-height: 1.5; }
.modal-foot svg { flex: 0 0 15px; width: 15px; height: 15px; color: #568475; }
.confirm-card {
  position: relative; z-index: 1; width: min(370px, 100%); padding: 28px; border-radius: 16px;
  background: #fff; box-shadow: var(--shadow); text-align: center;
}
.confirm-icon { width: 46px; height: 46px; display: grid; place-items: center; margin: 0 auto; border-radius: 13px; }
.confirm-icon.danger { color: var(--danger); background: #fff0f2; }
.confirm-icon svg { width: 23px; height: 23px; }
.confirm-card h2 { margin: 15px 0 8px; font-size: 15px; }
.confirm-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.toast-region { position: fixed; z-index: 200; right: 18px; bottom: 18px; display: grid; gap: 8px; }
.toast {
  width: min(330px, calc(100vw - 36px)); display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow);
  color: #536177; font-size: 10px; line-height: 1.45; animation: toast-in .22s ease;
}
.toast i { flex: 0 0 7px; width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: var(--green); }
.toast.error i { background: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 920px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-art { display: none; }
  .login-panel { max-width: 480px; padding: 34px; }
  .brand-login { margin-bottom: 55px; }
  .provider-grid { grid-template-columns: 1fr; }
  .provider-card { min-height: 154px; }
  .provider-button { width: auto; min-width: 120px; }
  .account-row { grid-template-columns: minmax(170px, 1.4fr) minmax(130px, 1fr) 80px 36px; }
  .account-row .account-stat.files { display: none; }
}

@media (max-width: 680px) {
  .sidebar { width: 64px; }
  .brand { padding: 0 14px; }
  .brand-mark { width: 34px; height: 34px; flex: 0 0 34px; }
  .brand-text, .nav-item span, .nav-item em, .server-state span { display: none; }
  .nav { padding: 12px 8px; }
  .nav-item { justify-content: center; padding: 0; }
  .nav-item.active::before { left: -8px; }
  .sidebar-foot { padding: 10px 9px 15px; }
  .server-state { justify-content: center; padding: 0; }
  .main { margin-left: 64px; }
  .topbar { height: 64px; padding: 0 14px; }
  .breadcrumb, .date-chip, .user-name { display: none; }
  .topbar h1 { font-size: 15px; }
  .top-actions { gap: 6px; }
  .user-menu { padding-left: 0; border-left: 0; }
  .content { padding: 17px 13px 36px; }
  .section-head { align-items: flex-start; }
  .section-head p { max-width: 240px; line-height: 1.55; }
  .secure-badge { padding: 5px 7px; white-space: nowrap; }
  .provider-grid { gap: 9px; }
  .provider-card { min-height: 148px; padding: 15px; }
  .accounts-panel { margin-top: 13px; }
  .panel-head { padding: 14px; }
  .account-row { grid-template-columns: 1fr 34px; gap: 10px; padding: 12px 14px; }
  .account-row .account-stat, .account-row .valid-chip { display: none; }
  .modal { padding: 12px; align-items: end; }
  .modal-card { max-height: calc(100vh - 24px); overflow-y: auto; border-radius: 17px 17px 12px 12px; }
  .modal-head { padding: 16px 18px 13px; }
  .qr-layout { grid-template-columns: 1fr; justify-items: center; gap: 15px; padding: 18px; }
  .qr-frame { width: min(250px, 76vw); height: min(250px, 76vw); }
  #qrImage { width: calc(min(250px, 76vw) - 28px); height: calc(min(250px, 76vw) - 28px); }
  .qr-instructions { width: 100%; padding: 0; }
  .qr-instructions ol { margin: 13px 0; gap: 6px; }
  .modal-foot { padding: 10px 18px; }
}

@media (max-width: 390px) {
  .login-panel { padding: 27px 24px; }
  .brand-login { margin-bottom: 42px; }
  .login-copy h1 { font-size: 27px; }
  .provider-button { width: 100%; }
  .secure-badge { font-size: 8px; }
  .sidebar { width: 58px; }
  .brand { padding: 0 12px; }
  .brand-mark { width: 34px; }
  .main { margin-left: 58px; }
  .content { padding-left: 10px; padding-right: 10px; }
}

/* Application workspace */
button, input, select, textarea { font: inherit; }
select, textarea {
  width: 100%;
  border: 1px solid #dfe5ee;
  border-radius: 9px;
  outline: none;
  color: var(--ink);
  background: #fbfcfe;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
select { height: 38px; padding: 0 34px 0 11px; }
textarea { min-height: 60px; padding: 10px 12px; resize: vertical; line-height: 1.55; }
select:focus, textarea:focus { border-color: #75a2ff; box-shadow: 0 0 0 3px rgba(36,107,253,.1); background: #fff; }

.boot-view {
  position: fixed; z-index: 400; inset: 0; display: grid; align-content: center; justify-items: center;
  gap: 10px; color: #6f7e95; background: #f5f7fb;
}
.boot-logo {
  width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 3px;
  border-radius: 14px; color: #fff; background: linear-gradient(145deg, #4386ff, #1556dc);
  box-shadow: 0 12px 28px rgba(36,107,253,.24); font-size: 16px; font-weight: 800;
}
.boot-view strong { color: var(--ink); font-size: 15px; }
.boot-view p { margin: 0 0 5px; font-size: 10px; }

.page-section { animation: page-in .16s ease; }
@keyframes page-in { from { opacity: .45; transform: translateY(3px); } }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.button.mini { height: 30px; padding: 0 10px; font-size: 9px; }
.valid-chip.invalid { color: #a83b48; }
.valid-chip.invalid i { background: var(--danger); }
.empty-icon { font-size: 10px; font-weight: 750; }
.account-row { grid-template-columns: minmax(200px, 1.35fr) minmax(150px, 1fr) minmax(100px, .7fr) 86px 82px; }

.workspace-toolbar {
  display: flex; align-items: end; gap: 9px; margin-bottom: 10px; padding: 13px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
}
.toolbar-spacer { flex: 1; }
.field { display: grid; gap: 6px; min-width: 180px; }
.field span { color: #53627a; font-size: 9px; font-weight: 700; }
.field input { height: 38px; font-size: 10px; }
.field select, .field textarea { font-size: 10px; }
.field.compact { width: min(360px, 45vw); }
.wide-field { grid-column: span 2; }
.pathbar {
  min-height: 36px; display: flex; align-items: center; gap: 9px; padding: 0 13px; margin-bottom: 10px;
  border: 1px solid #e1e7f0; border-radius: 9px; color: #8a97aa; background: #f9fbfe; font-size: 9px;
}
.pathbar strong { min-width: 0; overflow: hidden; color: #53627a; text-overflow: ellipsis; white-space: nowrap; }
.selection-bar {
  min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 15px;
  margin-bottom: 10px; padding: 7px 10px 7px 14px; border: 1px solid #d7e4ff; border-radius: 10px;
  color: #4e6382; background: #f2f6ff; font-size: 10px;
}
.selection-bar > div { display: flex; gap: 7px; }
.selection-bar .button { height: 31px; font-size: 9px; }

.data-panel, .form-panel {
  overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff;
}
.form-panel { margin-bottom: 13px; }
.table-wrap { width: 100%; overflow: auto; }
.table-wrap.tall { max-height: min(58vh, 680px); }
.data-table { width: 100%; min-width: 720px; border-collapse: collapse; table-layout: auto; }
.data-table th {
  height: 38px; padding: 0 12px; border-bottom: 1px solid var(--line); color: #8491a3;
  background: #fafbfd; text-align: left; white-space: nowrap; font-size: 9px; font-weight: 700;
}
.data-table td {
  min-height: 48px; padding: 10px 12px; border-bottom: 1px solid #edf0f4; color: #536177;
  font-size: 9px; line-height: 1.45; vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: #fbfcff; }
.data-table .check-col { width: 42px; text-align: center; }
.data-table input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--blue); }
.loading-cell, .error-cell { height: 120px; color: #8491a3 !important; text-align: center; }
.error-cell { color: var(--danger) !important; }
.file-name-button {
  display: inline-flex; align-items: center; gap: 9px; max-width: min(460px, 46vw);
  padding: 0; border: 0; color: #40526c; background: transparent; cursor: default; text-align: left;
}
.file-name-button.folder { cursor: pointer; }
.file-name-button.folder:hover span { color: var(--blue); text-decoration: underline; }
.file-name-button i {
  flex: 0 0 27px; width: 27px; height: 27px; display: grid; place-items: center;
  border-radius: 7px; color: #6e7e95; background: #eef2f7; font-size: 8px; font-style: normal; font-weight: 800;
}
.file-name-button.folder i { color: #9a721a; background: #fff6dc; }
.file-name-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.type-chip, .task-status {
  display: inline-flex; align-items: center; min-height: 23px; padding: 0 8px;
  border-radius: 999px; color: #6d7d93; background: #f0f3f7; white-space: nowrap; font-size: 8px;
}
.task-status.completed { color: #257a5f; background: #eaf8f2; }
.task-status.running, .task-status.pending { color: #306da5; background: #edf6ff; }
.task-status.failed { color: #a83b48; background: #fff0f2; }
.result-name {
  display: inline-block; max-width: 360px; overflow: hidden; color: #40526c;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; font-weight: 650;
}
.result-name.folder { color: #7e621d; }
.path-cell { max-width: 420px; overflow: hidden; color: #7c899b !important; text-overflow: ellipsis; white-space: nowrap; }
.error-text { max-width: 360px; color: var(--danger) !important; }
.compact-empty { padding: 38px 20px; border-top: 0; }
.compact-empty strong { margin-top: 0; }

.search-bar {
  display: grid; grid-template-columns: minmax(280px, 1fr) minmax(190px, 320px) auto; gap: 9px;
  padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
}
.search-bar input { height: 38px; font-size: 10px; }
.search-bar select { font-size: 10px; }
.helper-text { margin: 8px 3px 12px; color: #8b98aa; font-size: 9px; line-height: 1.55; }
.transfer-form {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(150px, .45fr) minmax(210px, .65fr) auto;
  align-items: end; gap: 11px; padding: 15px;
}
.transfer-form .wide-field { grid-column: span 1; }
.inline-actions { display: flex; align-items: center; gap: 8px; }
.inline-actions input { width: min(330px, 30vw); height: 35px; font-size: 9px; }

.capability-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.capability-card {
  min-height: 190px; padding: 16px; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; box-shadow: 0 4px 14px rgba(20,35,62,.025);
}
.capability-title { display: flex; align-items: center; gap: 10px; padding-bottom: 13px; border-bottom: 1px solid #edf0f4; }
.capability-title .provider-logo { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; font-size: 11px; }
.provider-logo.quark { background: #5632e8; }
.provider-logo.baidu { background: #236cf0; }
.provider-logo.xunlei { background: #0b8de2; }
.provider-logo.neutral { background: #54647a; }
.capability-title strong, .capability-title span { display: block; }
.capability-title strong { font-size: 11px; }
.capability-title span { margin-top: 3px; color: #8b98aa; font-size: 8px; }
.capability-list { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 8px; margin-top: 14px; }
.capability-list span { font-size: 9px; }
.capability-list .enabled { color: #36775f; }
.capability-list .disabled { color: #a0aabb; }
.limitation-card { grid-column: span 1; }
.limitation-card p { margin: 12px 0 0; color: #748197; font-size: 8.5px; line-height: 1.65; }
.limitation-card b { color: #526178; }
.audit-panel { margin-top: 13px; }

.action-card {
  position: relative; z-index: 1; width: min(430px, 100%); padding: 24px;
  border: 1px solid rgba(255,255,255,.8); border-radius: 15px; background: #fff; box-shadow: var(--shadow);
}
.action-card h2 { margin: 0; font-size: 15px; }
.action-card > p { margin: 8px 0 18px; color: #7b899d; font-size: 10px; line-height: 1.65; }
.action-card .field { width: 100%; min-width: 0; }
.copy-result { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
.copy-result input { height: 38px; font-size: 9px; }
.action-card .confirm-actions { margin-top: 20px; }

@media (max-width: 1120px) {
  .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .transfer-form { grid-template-columns: 1fr 1fr; }
  .transfer-form .wide-field { grid-column: span 2; }
  .transfer-form button { width: fit-content; }
}

@media (max-width: 920px) {
  .account-row { grid-template-columns: minmax(170px, 1.3fr) minmax(130px, 1fr) 80px 82px; }
  .account-row .account-stat.files { display: none; }
  .search-bar { grid-template-columns: 1fr 210px auto; }
}

@media (max-width: 680px) {
  .account-row {
    width: auto; grid-template-columns: minmax(0, 1fr) auto; gap: 8px;
    min-height: 66px; padding: 11px 12px;
  }
  .account-row .account-stat, .account-row .valid-chip { display: none; }
  .account-row .row-actions { width: auto; }
  .account-row .button.mini { padding: 0 8px; }
  .workspace-toolbar { align-items: stretch; flex-wrap: wrap; }
  .workspace-toolbar .field.compact { width: 100%; }
  .toolbar-spacer { display: none; }
  .workspace-toolbar .button { flex: 1; }
  .selection-bar { align-items: flex-start; flex-direction: column; }
  .selection-bar > div { width: 100%; overflow-x: auto; }
  .search-bar { grid-template-columns: 1fr; }
  .search-bar .button { width: 100%; }
  .transfer-form { grid-template-columns: 1fr; }
  .transfer-form .wide-field { grid-column: span 1; }
  .transfer-form button { width: 100%; }
  .inline-actions { align-items: stretch; flex-direction: column; width: 100%; }
  .inline-actions input, .inline-actions .button { width: 100%; }
  .capability-grid { grid-template-columns: 1fr; }
  .limitation-card { grid-column: span 1; }
  .data-table { min-width: 650px; }
  .action-card { padding: 22px 18px; }
}

@media (max-width: 390px) {
  .workspace-toolbar .button { min-width: calc(50% - 6px); }
  .capability-card { min-height: 170px; }
}