:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  color: #202636;
  background: #f7f8fc;
  --accent: #5b54db;
  --accent-hover: #4b43c3;
  --muted: #7c8394;
  --border: #e8eaf1;
  --surface: #fff;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
h1,h2,h3,p { margin: 0; }
a { text-decoration: none; color: inherit; }
button,input,select,textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
button,a,input,select,textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible,a:focus-visible { outline: 3px solid #b7b3ff; outline-offset: 3px; }
.icon { width: 18px; height: 18px; flex: none; vertical-align: middle; }
.muted { color: var(--muted); line-height: 1.8; }
.eyebrow,.small-label { color: #9a9eb0; font-size: 12px; font-weight: 650; letter-spacing: 1.7px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: #242939; }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; background: var(--accent); border-radius: 10px; color: #fff; }
.brand-mark .icon { width: 23px; height: 23px; }
.brand>span:last-child { font-size: 22px; font-weight: 720; letter-spacing: -.7px; line-height: 1.15; }
.brand-light { display: block; color: #7c8495; font-size: 11px; font-weight: 550; letter-spacing: 1.8px; margin-top: 5px; }
.primary,.secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 10px 15px; border: 1px solid transparent; border-radius: 8px; font-size: 14px; font-weight: 600; line-height: 1.4; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s; }
.primary { background: var(--accent); color: #fff; box-shadow: 0 2px 3px #3b328c14; }
.primary:hover { background: var(--accent-hover); }
.secondary { background: #fff; color: #535b6c; border-color: #e0e3ec; box-shadow: 0 1px 2px #20263603; }
.secondary:hover { background: #f8f8fe; border-color: #c5c3e5; color: var(--accent); }
.compact { min-height: 34px; padding: 7px 11px; font-size: 13px; }
.compact .icon { width: 15px; height: 15px; }
.text-button,.icon-button { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #7a8191; border-radius: 7px; padding: 8px; font-size: 14px; }
.text-button:hover,.icon-button:hover { color: var(--accent); background: #f2f1fb; }
.full { width: 100%; }
label { display: block; font-size: 14px; font-weight: 600; color: #4c5365; margin: 20px 0 8px; }
input,select,textarea { width: 100%; min-height: 42px; padding: 10px 12px; color: #303749; background: #fff; border: 1px solid #dfe3ec; border-radius: 8px; outline: none; transition: border-color .15s,box-shadow .15s; }
input:focus,select:focus,textarea:focus { border-color: #918ae8; box-shadow: 0 0 0 3px #5b54db0d; }
input::placeholder,textarea::placeholder { color: #adb2bf; font-size: 14px; }
input:disabled { background: #f7f8fb; }
textarea { display: block; resize: vertical; line-height: 1.7; min-height: 80px; font-family: var(--mono); font-size: 14px; }
input[readonly],textarea[readonly] { background: #f8f9fc; }
.error { color: #b8434c; font-size: 14px; line-height: 1.7; }
.error:empty { display: none; }
.error:not(:empty) { margin-top: 12px; padding: 10px 12px; border: 1px solid #f2d9dc; border-radius: 7px; background: #fff5f6; }
.inline-error:not(:empty) { margin: 0 22px 16px; }
.global-error:not(:empty) { margin: 0 0 22px; }
/* Application frame */
.app-layout { min-height: 100vh; }
.sidebar { display: flex; flex-direction: column; width: 228px; background: #fff; border-right: 1px solid var(--border); position: fixed; inset: 0 auto 0 0; padding: 30px 18px 18px; z-index: 10; }
.sidebar>.brand { margin: 0 10px 32px; }
.workspace-switch { display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--border); border-radius: 9px; margin-bottom: 28px; }
.workspace-symbol { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid #e0e2ee; border-radius: 7px; background: #f5f6fb; color: #6d738c; font-size: 13px; font-weight: 700; }
.workspace-switch strong { display: block; color: #484f61; font-size: 13px; font-weight: 600; }
.workspace-switch small { display: block; color: #7c8596; font-size: 11px; margin-top: 3px; }
.nav-caption { color: #7d8597; font-size: 12px; padding-left: 13px; margin-bottom: 12px; }
.sidebar nav { display: grid; gap: 6px; }
.nav-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 13px; border: none; border-radius: 8px; background: transparent; color: #7b8192; text-align: left; font-size: 14px; font-weight: 550; }
.nav-item .icon { width: 17px; height: 17px; color: #9398aa; }
.nav-item:hover { background: #f7f7fc; }
.nav-item.active { color: var(--accent); background: #eeedfc; }
.nav-item.active .icon { color: var(--accent); }
.nav-count { margin-left: auto; font-size: 12px; min-width: 20px; text-align: center; padding: 1px 5px; border-radius: 4px; background: #dedbfa; color: #6a61d3; }
.sidebar-bottom { margin-top: auto; padding: 30px 5px 0; }
.sidebar-security { display: flex; align-items: center; gap: 9px; padding: 12px 8px; background: #fafbfe; border: 1px solid #edf0f6; border-radius: 8px; }
.sidebar-security>.icon { color: #979db0; width: 16px; }
.sidebar-security strong { display: block; font-size: 12px; color: #697183; font-weight: 550; }
.sidebar-security small { display: block; font-size: 11px; color: #7d8697; margin-top: 3px; }
.sidebar-footnote { display: flex; justify-content: space-between; font-size: 11px; color: #7e8799; padding: 20px 7px 0; }
.workspace { margin-left: 228px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 70px; padding: 0 36px; border-bottom: 1px solid var(--border); background: #ffffffd9; }
.breadcrumb { display: flex; align-items: center; gap: 15px; color: #7e8799; font-size: 13px; }
.breadcrumb strong { color: #50586a; font-weight: 550; }
.crumb { color: #c4c8d3; }
.account { display: flex; align-items: center; gap: 9px; color: #697387; font-size: 13px; }
.account .icon-button { margin-left: 9px; }
.avatar { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; border: 1px solid #dfdcf7; background: #f0edfc; color: #7467be; font-size: 12px; font-weight: 650; }
.content { max-width: 1392px; margin: auto; padding: 35px 36px 20px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 27px; }
.page-heading h1 { margin: 6px 0 9px; font-size: 28px; font-weight: 650; letter-spacing: -.7px; line-height: 1.35; }
.page-heading .muted { font-size: 14px; }
.heading-actions { display: flex; align-items: center; gap: 9px; flex: none; }
.content-footer { display: flex; justify-content: space-between; gap: 16px; margin-top: 36px; padding: 19px 0 0; border-top: 1px solid var(--border); font-size: 11px; color: #7f889b; }
.content-footer>span:last-child { display: flex; gap: 5px; align-items: center; }
.content-footer .icon { width: 12px; height: 12px; }
/* Project overview and directory */
.overview-strip { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--border); border-radius: 11px; background: #fff; padding: 22px 0; margin-bottom: 29px; }
.overview-item { display: flex; align-items: center; gap: 15px; padding: 0 24px; }
.overview-item+.overview-item { border-left: 1px solid var(--border); }
.overview-icon { display: grid; place-items: center; width: 42px; height: 42px; color: #7e75cf; border-radius: 10px; background: #f2f0fc; }
.overview-icon.success { color: #49a38e; background: #edf8f4; }
.overview-icon.amber { color: #c29d55; background: #fcf6ea; }
.overview-item>div>span { display: block; font-size: 12px; color: #6f788a; }
.overview-item strong { display: block; font-size: 27px; font-weight: 650; letter-spacing: -.8px; margin-top: 3px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.directory-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 17px; }
.directory-header h2,.panel-header h2 { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; }
.directory-tools { display: flex; align-items: center; gap: 9px; }
.count { display: inline-block; min-width: 20px; padding: 1px 6px; background: #ebedf5; border-radius: 5px; color: #9398ab; font-size: 12px; text-align: center; }
.search { display: flex; align-items: center; position: relative; }
.search>.icon { position: absolute; left: 11px; width: 15px; height: 15px; color: #a1a7b5; pointer-events: none; }
.search input { padding-left: 34px; width: 224px; min-height: 35px; font-size: 13px; }
.search input::placeholder { font-size: 13px; }
.project-items { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,300px),1fr)); gap: 16px; }
.project-item { display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: start; column-gap: 13px; padding: 22px; border: 1px solid #e5e7f0; border-radius: 11px; background: #fff; transition: border-color .15s,box-shadow .15s; }
.project-item:hover { border-color: #d2ceef; box-shadow: 0 4px 14px #48407905; }
.project-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; border: 1px solid #e3def8; background: #f1edfc; color: #8b75c9; font-size: 20px; font-weight: 600; }
.project-title { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 1px; }
.project-title h3 { font-size: 16px; font-weight: 600; color: #363d51; overflow-wrap: anywhere; }
.project-identifier { margin-top: 9px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.project-identifier>span { font-size: 11px; color: #7a8497; letter-spacing: .3px; }
.project-identifier code { font-family: var(--mono); font-size: 13px; color: #7f879b; overflow-wrap: anywhere; }
.project-actions { grid-column: 1/-1; display: flex; gap: 10px; margin-top: 23px; padding-top: 16px; border-top: 1px solid #eff0f6; }
.project-action.secondary { flex: 1; font-size: 13px; min-height: 34px; padding: 7px 10px; justify-content: space-between; box-shadow: none; background: #fdfdff; }
.project-action span { color: #7b8099; }
/* Data panels */
.wallet-panel { overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: 11px; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 21px 22px 18px; }
.panel-subtitle { margin-top: 5px; color: #7a8496; font-size: 12px; }
.toolbar { display: flex; align-items: center; gap: 12px; padding: 0 22px 19px; }
.project-label { margin: 0; color: #949bac; font-size: 12px; font-weight: 500; white-space: nowrap; }
.toolbar select { width: 190px; min-height: 35px; padding: 7px 11px; font-size: 13px; }
.toolbar .search { margin-left: auto; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; border-spacing: 0; text-align: left; white-space: nowrap; }
th { padding: 12px 22px; border-top: 1px solid #eef0f6; border-bottom: 1px solid #eef0f6; background: #fafbfe; font-size: 12px; color: #737d90; font-weight: 500; }
td { padding: 18px 22px; border-bottom: 1px solid #eff1f7; color: #717b8f; font-size: 14px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fdfdff; }
td.wallet-cell { font-size: 14px; color: #495369; font-weight: 550; }
td small { display: block; color: #7e889b; font: 12px var(--mono); margin-top: 6px; font-weight: 400; }
td.code { font: 12px var(--mono); color: #768196; }
.actions-heading,td:last-child { text-align: right; }
.detail-button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #e4e3f1; border-radius: 6px; color: #7c72bf; background: #faf9ff; padding: 5px 9px; font-size: 12px; font-weight: 500; min-height: 28px; }
.detail-button:hover { background: #f0edfd; border-color: #c8c0e9; }
.detail-button+.detail-button { margin-left: 7px; }
.status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border: 1px solid #dff0e9; border-radius: 5px; background: #f0f9f5; color: #67a08b; font-size: 11px; font-weight: 500; line-height: 1.4; white-space: nowrap; }
.status::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.status.creating { color: #ba9a5c; background: #fdf8ed; border-color: #f3e9d5; }
.status.failed,.status.unknown { color: #c2797f; background: #fcf0f1; border-color: #f4dfe2; }
.panel-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 22px; border-top: 1px solid #eff1f6; color: #7a8497; font-size: 11px; }
.notice { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 13px 16px; background: #f1f0fc; border: 1px solid #e5e2f8; border-radius: 9px; color: #8b80b9; font-size: 13px; line-height: 1.7; }
.notice .icon { width: 16px; height: 16px; }
.data-flow { display: flex; align-items: center; gap: 30px; padding: 20px 24px; background: #fff; border: 1px solid var(--border); border-radius: 11px; margin-bottom: 22px; }
.data-flow>div { display: flex; align-items: center; gap: 13px; flex: 1; }
.flow-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: #f3f2fb; color: #978bc9; flex: none; }
.data-flow strong { font-size: 13px; font-weight: 600; color: #646a83; }
.data-flow p { color: #7b8498; font-size: 12px; margin-top: 5px; }
.flow-divider { height: 32px; width: 1px; background: var(--border); }
.empty-state { text-align: center; padding: 52px 24px; }
.empty-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 17px; border: 1px solid #e8e6f4; background: #f5f4fc; border-radius: 14px; color: #b1a6d6; }
.empty-icon .icon { width: 23px; height: 23px; }
.empty-state h3 { font-size: 14px; color: #747c91; font-weight: 550; }
.empty-state p { font-size: 13px; color: #7b869a; line-height: 1.8; margin-top: 9px; }
.empty-state button { margin-top: 20px; min-height: 35px; font-size: 13px; }
.empty-panel { background: #fff; border: 1px dashed #dcdfea; border-radius: 11px; }
/* Authentication */
.login-layout { display: grid; grid-template-columns: 46% 54%; min-height: 100vh; }
.login-story { display: flex; flex-direction: column; justify-content: space-between; padding: 40px 54px 30px; background: #f1f1fb; border-right: 1px solid #e8e7f5; overflow: hidden; }
.login-story .brand-mark { background: #fff; color: var(--accent); border: 1px solid #e0ddf7; }
.login-intro { padding: 48px 0 32px; }
.login-story .eyebrow { color: #a29bbd; font-size: 11px; }
.login-story h1 { margin: 20px 0 18px; font-size: clamp(32px,3.8vw,52px); line-height: 1.35; font-weight: 650; letter-spacing: -1.5px; color: #34324e; }
.login-story p { color: #79748f; font-size: 14px; line-height: 2; }
.story-footer { color: #aaa5bd; font-size: 11px; }
.security-visual { width: 240px; height: 190px; position: relative; margin: 18px 0 12px; }
.security-ring { position: absolute; width: 176px; height: 176px; border: 1px solid #ddd9f0; border-radius: 50%; top: 7px; left: 30px; }
.ring-two { width: 122px; height: 122px; top: 34px; left: 57px; border-style: dashed; border-color: #d3cdea; }
.security-core { position: absolute; left: 88px; top: 66px; width: 60px; height: 60px; display: grid; place-items: center; border: 1px solid #d9d3ef; background: #ffffffb3; border-radius: 17px; color: #9180c1; box-shadow: 0 5px 20px #8474b210; }
.security-core .icon { width: 29px; height: 29px; }
.security-node { position: absolute; display: grid; place-items: center; width: 33px; height: 33px; background: #f9f8ff; border: 1px solid #ded9f0; border-radius: 10px; color: #b6a9d6; }
.security-node .icon { width: 15px; height: 15px; }
.node-one { top: 3px; left: 87px; }.node-two { top: 115px; left: 175px; }.node-three { top: 130px; left: 26px; }
.login-features { display: flex; flex-wrap: wrap; gap: 18px; color: #7c748f; font-size: 11px; }
.login-features>span { display: inline-flex; align-items: center; gap: 6px; }.login-features .icon { width: 13px; height: 13px; }
.login-main { position: relative; display: flex; align-items: center; justify-content: center; background: #fff; padding: 60px 32px; }
.login-card { width: 100%; max-width: 330px; }
.login-badge { display: inline-flex; align-items: center; gap: 6px; color: #a09bb3; font-size: 12px; padding: 5px 8px; background: #f6f5fb; border: 1px solid #eeecf6; border-radius: 6px; }
.login-badge .icon { width: 13px; height: 13px; }
.login-card h2 { color: #393c51; font-size: 28px; margin: 18px 0 9px; font-weight: 650; letter-spacing: -.5px; }
.login-card>.muted { font-size: 13px; margin-bottom: 28px; }
.login-card .primary { margin-top: 26px; justify-content: space-between; min-height: 43px; }
.login-card .text-button { margin-top: 12px; }
.login-note { margin-top: 26px; border-top: 1px solid #f0eff5; padding-top: 19px; color: #7f8798; font-size: 12px; display: flex; align-items: center; gap: 7px; }
.login-note .icon { width: 13px; height: 13px; }
.login-footer { position: absolute; bottom: 27px; color: #82899a; font-size: 11px; }
/* One native input keeps autofill, paste and screen-reader behavior intact. */
.otp-control { position: relative; width: 100%; max-width: 330px; }
.otp-control .otp-input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; margin: 0; opacity: 0; z-index: 1; cursor: text; font-size: 22px; }
.otp-digits { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 9px; }
.otp-digit { display: flex; align-items: center; justify-content: center; height: 50px; min-width: 0; border: 1px solid #dfe3ec; border-radius: 8px; background: #fff; color: #383452; font: 24px var(--mono); font-variant-numeric: tabular-nums; transition: border-color .15s,box-shadow .15s; }
.otp-digit:empty::after { content: '·'; color: #d1d4e0; font-size: 20px; }
.otp-control:focus-within .otp-digit.is-active { border-color: #918ae8; box-shadow: 0 0 0 3px #5b54db12; }
.otp-control.is-invalid .otp-digit { border-color: #dc939a; }
.otp-control .otp-digit.is-filled { background: #faf9fe; }
@media(max-width:360px) { .otp-digits { gap: 6px; }.otp-digit { height: 46px; border-radius: 7px; } }

#enrollment { text-align: center; margin-bottom: 20px; }#qr { max-width: 100%; width: 180px; height: 180px; border: 1px solid var(--border); border-radius: 9px; padding: 5px; }#enrollment p { font-size: 12px; line-height: 1.8; margin-top: 10px; }
/* Dialogs */
dialog { width: min(480px,calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; border: 1px solid #e5e3f0; border-radius: 15px; padding: 28px; background: #fff; color: #40465b; box-shadow: 0 24px 90px #201d4830; }
dialog::backdrop { background: #17142650; backdrop-filter: blur(5px); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 12px; }
.dialog-heading h2 { font-size: 20px; font-weight: 650; letter-spacing: -.3px; }
.dialog-heading .small-label { display: block; margin-bottom: 7px; font-size: 11px; }
.dialog-heading .icon-button { color: #b3b7c3; font-size: 26px; width: 29px; height: 29px; padding: 0; line-height: 1; flex: none; }
dialog .muted { font-size: 13px; }dialog label .muted { font-weight: 400; }
.field-help { color: #7b8497; font-size: 13px; line-height: 1.8; margin-top: 9px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; border-top: 1px solid #eeeff5; margin-top: 25px; padding-top: 19px; }
.dialog-actions button { min-height: 38px; }
#crypto-submit { margin-top: 20px; }
#crypto-key-label { font-size: 12px; background: #f7f7fc; border: 1px solid #eeedf5; border-radius: 7px; padding: 9px 11px; overflow-wrap: anywhere; }
#crypto-input,#saved-secret-id,#export-secret { font-family: var(--mono); font-size: 13px; }
#crypto-input { min-height: 65px; }
#saved-secret-id { color: var(--accent); background: #f7f6fd; padding: 13px; }
.crypto-result { margin-top: 20px; padding-top: 2px; border-top: 1px solid var(--border); }
#crypto-output { min-height: 90px; background: #f8fafb; }
#key-plaintext { min-height: 126px; }
#export-secret { overflow-wrap: anywhere; }
dl { margin: 22px 0; display: grid; grid-template-columns: 95px minmax(0,1fr); column-gap: 16px; row-gap: 17px; }
dt { color: #798397; font-size: 13px; }dd { margin: 0; color: #626d82; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }.mono { font: 12px var(--mono); }
#toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 12px 20px; border-radius: 10px; background: #333048; color: #fff; box-shadow: 0 8px 30px #211c4120; font-size: 14px; z-index: 100; overflow-wrap: anywhere; }
.session-loading { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: #f7f8fc; font-size: 13px; color: #a0a5b5; }
.session-loading .brand-mark { width: 44px; height: 44px; border-radius: 13px; }
form[aria-busy="true"] button[type="submit"]::before { content: ""; width: 12px; height: 12px; border: 2px solid #ffffff60; border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media(min-width:1600px) { .content { padding-top: 44px; } }
@media(max-width:1100px) { .sidebar { width: 204px; padding-left: 14px; padding-right: 14px; }.workspace { margin-left: 204px; }.topbar { padding: 0 26px; }.content { padding: 30px 26px 20px; }.page-heading { gap: 16px; }.page-heading h1 { font-size: 26px; }.heading-actions { gap: 7px; }.heading-actions button { font-size: 13px; padding: 9px 12px; }.data-flow { gap: 18px; padding: 18px; }.data-flow p { font-size: 11px; }.overview-item { padding: 0 20px; }.login-story { padding: 36px; } }
@media(max-width:800px) { .sidebar { width: 180px; padding-left: 12px; padding-right: 12px; }.sidebar>.brand { margin-left: 6px; }.workspace { margin-left: 180px; }.workspace-switch { padding: 9px; gap: 8px; }.workspace-switch small { font-size: 11px; }.brand>span:last-child { font-size: 20px; }.sidebar-security small { display: none; }.content { padding: 28px 20px 18px; }.topbar { padding: 0 20px; }.page-heading { align-items: flex-start; flex-direction: column; gap: 16px; }.heading-actions { width: 100%; }.overview-item { gap: 10px; padding: 0 14px; }.overview-icon { width: 32px; height: 32px; }.overview-item strong { font-size: 24px; }.overview-item>div>span { font-size: 11px; }.directory-header { align-items: flex-start; flex-direction: column; gap: 13px; }.directory-tools { width: 100%; }.directory-tools .search { flex: 1; }.directory-tools input { width: 100%; }.data-flow { flex-direction: column; align-items: stretch; gap: 16px; }.flow-divider { width: 100%; height: 1px; }.login-layout { grid-template-columns: 42% 58%; }.login-story { padding: 30px 24px; }.login-story h1 { font-size: 32px; }.login-story p { font-size: 12px; }.login-features { gap: 12px; }.security-visual { transform-origin: left center; transform: scale(.85); width: 210px; }.login-main { padding: 60px 28px; } }
@media(max-width:640px) {
 .sidebar { position: static; width: 100%; padding: 18px 16px 12px; border-right: 0; border-bottom: 1px solid var(--border); }.sidebar>.brand { margin: 0 0 18px 3px; }.sidebar .brand-mark { width: 30px; height: 30px; border-radius: 8px; }.sidebar .brand>span:last-child { font-size: 20px; }.sidebar .brand-light { display: inline; margin-left: 9px; font-size: 7px; }.sidebar nav { display: flex; gap: 5px; }.nav-item { flex: 1; justify-content: center; gap: 7px; padding: 10px 5px; font-size: 13px; }.nav-item .icon { width: 15px; height: 15px; }.nav-count,.workspace-switch,.nav-caption,.sidebar-bottom { display: none; }.workspace { margin: 0; }.topbar { height: 52px; padding: 0 18px; }.breadcrumb { gap: 10px; font-size: 12px; }.account { gap: 6px; font-size: 12px; }.account .icon-button { margin-left: 2px; padding: 6px; }.account .icon { width: 15px; }.avatar { width: 23px; height: 23px; border-radius: 7px; font-size: 11px; }.content { padding: 26px 16px 18px; }.page-heading { margin-bottom: 23px; gap: 17px; }.page-heading h1 { font-size: 27px; margin-top: 6px; }.page-heading .muted { font-size: 14px; }.page-heading>.primary { align-self: stretch; }.heading-actions { gap: 8px; }.heading-actions button { flex: 1; min-height: 39px; padding: 10px 9px; font-size: 13px; }.heading-actions .icon { width: 15px; height: 15px; }.overview-strip { padding: 17px 0; margin-bottom: 24px; }.overview-item { padding: 0 14px; gap: 0; }.overview-icon { display: none; }.overview-item strong { margin-top: 7px; font-size: 26px; }.overview-item>div>span { font-size: 12px; }.project-items { gap: 13px; }.project-item { padding: 21px; }.project-title h3 { font-size: 16px; }.project-action.secondary { min-height: 36px; }.directory-tools .compact { min-height: 35px; }.wallet-panel { border-radius: 10px; }.panel-header { padding: 19px 17px 16px; }.toolbar { padding: 0 17px 17px; flex-wrap: wrap; gap: 10px; }.toolbar select { flex: 1; min-width: 150px; }.toolbar .search { width: 100%; margin-left: 0; }.toolbar .search input { width: 100%; }.table-wrap { overflow: visible; }table,tbody { display: block; white-space: normal; }thead { display: none; }tbody tr { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px 12px; padding: 17px; border-top: 1px solid #eff0f6; }td { display: block; padding: 0; border: 0; min-width: 0; }td small { overflow-wrap: anywhere; }.table-wrap td:last-child { text-align: right; }#wallet-page td:nth-child(1) { grid-column: 1; grid-row: 1; }#wallet-page td:nth-child(2) { grid-column: 1/-1; grid-row: 2; }#wallet-page td:nth-child(2)::before { content: "地址  "; font-family: inherit; }#wallet-page td:nth-child(3) { grid-column: 2; grid-row: 1; text-align: right; }#wallet-page td:nth-child(4) { grid-column: 1; grid-row: 3; }#wallet-page td:nth-child(5) { grid-column: 2; grid-row: 3; }#keys-page td:nth-child(1) { grid-column: 1/-1; }#keys-page td:nth-child(2) { grid-column: 1; }#keys-page td:nth-child(3) { grid-column: 2; }.panel-footer { padding: 13px 17px; font-size: 11px; }.notice { font-size: 12px; padding: 12px 13px; align-items: flex-start; }.notice .icon { margin-top: 2px; }.data-flow { padding: 17px; }.data-flow p { font-size: 12px; }.data-flow strong { font-size: 13px; }.content-footer { font-size: 11px; margin-top: 26px; gap: 9px; }.content-footer>span:last-child { font-size: 11px; }.empty-state { padding: 40px 20px; }.login-layout { display: block; }.login-story { padding: 21px 23px; border-right: 0; border-bottom: 1px solid #e8e7f5; background: #fff; }.login-story .brand-mark { background: var(--accent); color: #fff; border: none; }.login-intro,.story-footer { display: none; }.login-main { min-height: calc(100dvh - 79px); padding: 45px 28px 75px; align-items: center; }.login-card { max-width: 360px; }.login-card h2 { font-size: 27px; }.login-footer { bottom: 23px; }.login-card>.muted { margin-bottom: 28px; }dialog { padding: 23px; border-radius: 13px; max-height: calc(100dvh - 32px); }.dialog-heading h2 { font-size: 20px; }.dialog-actions { margin-top: 22px; }.field-help { font-size: 12px; }dl { grid-template-columns: 75px minmax(0,1fr); gap: 15px 12px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition: none !important; animation: none !important; } }

@media(max-width:640px) { input,select,textarea { font-size:16px; }.search input,.toolbar select { font-size:14px; }.otp-control .otp-input { font-size:24px; } }

.wallet-kind{display:inline-flex;vertical-align:middle;margin-left:9px;padding:2px 6px;border:1px solid #e3e1f2;border-radius:5px;background:#f6f4fc;color:#8277b7;font-size:11px;line-height:1.3;font-weight:500}.wallet-kind.solana{background:#edf9f5;border-color:#d9eee7;color:#478b79}#wallet-type-filter{width:125px;min-width:100px;flex:none}#export-format-help{margin-bottom:10px;color:#7b7893}#export-secret{white-space:pre-wrap;overflow-wrap:anywhere}

.danger-link{color:#bd3547!important}.primary.danger{background:#bd3547;border-color:#bd3547}.primary.danger:hover{background:#a62e3e}.destroy-target{overflow-wrap:anywhere;font-weight:600;padding:14px 16px;background:#fff2f3;border-radius:10px;color:#9c2939}

.user-project-fieldset{border:0;padding:0;margin:22px 0}.user-project-fieldset legend{font-size:16px;font-weight:600;color:var(--text,#333);margin-bottom:10px}.user-project-options{max-height:150px;overflow:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:2px}.user-project-option{display:flex;align-items:center;gap:10px;margin:0!important;padding:11px 12px;background:#f8f7fc;border:1px solid #e8e5f0;border-radius:9px;font-weight:400!important;cursor:pointer}.user-project-option input{flex:0 0 18px;width:18px;height:18px;min-height:18px;margin:0;padding:0;box-shadow:none;accent-color:#7460dd}.user-project-option span{overflow-wrap:anywhere}#users-rows td{max-width:350px;white-space:normal;overflow-wrap:anywhere}

#user-create-dialog{width:min(560px,calc(100vw - 32px))}@media(max-width:480px){.user-project-options{grid-template-columns:1fr}.sidebar nav{overflow-x:auto}.nav-item{flex-shrink:0}}