:root {
  color-scheme: light;
  --ink: #132238;
  --muted: #708097;
  --soft: #9aa8bb;
  --line: #e7edf4;
  --canvas: #f5f7fa;
  --surface: #ffffff;
  --nav: #101b2d;
  --nav-2: #16253b;
  --nav-text: #a6b2c4;
  --blue: #477cf4;
  --blue-deep: #3168e8;
  --blue-soft: #eef4ff;
  --green: #18a87a;
  --green-soft: #e9f8f2;
  --amber: #e6a339;
  --amber-soft: #fff5e5;
  --red: #e15f68;
  --shadow: 0 12px 32px rgba(20, 41, 75, .06);
  font-family: 'DM Sans', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); min-width: 360px; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.app-frame { min-height: 100vh; display: flex; }

.sidebar { width: 250px; flex: 0 0 250px; min-height: 100vh; color: var(--nav-text); background: var(--nav); display: flex; flex-direction: column; padding: 25px 15px 18px; position: fixed; inset: 0 auto 0 0; z-index: 5; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: white; padding: 0 10px 25px; }
.brand-icon { width: 35px; height: 35px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(140deg, #5a8df8, #3270eb); box-shadow: 0 6px 14px rgba(44, 106, 229, .36); }
.brand-icon svg { width: 23px; height: 23px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.brand-copy { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.brand-copy strong { font-family: Manrope, 'Noto Sans SC', sans-serif; font-size: 17px; letter-spacing: .04em; }
.brand-copy small { font-size: 8px; letter-spacing: .19em; color: #7789a3; font-weight: 700; }
.workspace-switcher { height: 58px; margin: 0 3px 27px; border: 1px solid #26364d; border-radius: 10px; display: flex; align-items: center; padding: 8px; gap: 9px; background: #152238; }
.workspace-avatar { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; background: #263d5d; color: #93b8ff; font-size: 13px; font-weight: 700; }
.workspace-copy, .profile-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.workspace-copy small { color: #8292a9; font-size: 10px; }
.workspace-copy strong { color: #edf3fb; font-size: 11px; font-weight: 600; }
.chevron { color: #71819a; margin-left: auto; font-size: 14px; }
.nav-caption { padding: 0 12px 9px; color: #718198; font-size: 10px; letter-spacing: .11em; text-transform: uppercase; font-weight: 700; }
.nav-caption-spaced { margin-top: 23px; }
.main-nav { display: grid; gap: 4px; }
.nav-item { width: 100%; border: 0; background: transparent; display: flex; align-items: center; gap: 12px; text-align: left; color: #9aabc1; height: 42px; padding: 0 12px; border-radius: 8px; font-size: 12px; transition: background .15s, color .15s; }
.nav-item:hover { background: #19283e; color: #edf4ff; }
.nav-item.active { color: white; background: #23385a; box-shadow: inset 2px 0 #6c99ff; }
.nav-icon { width: 17px; display: inline-grid; place-items: center; color: #8598b4; font-size: 17px; line-height: 1; }
.nav-item.active .nav-icon { color: #87aaff; }
.code-icon { font-size: 10px; font-weight: 700; letter-spacing: -1px; }
.nav-count { margin-left: auto; background: #263952; color: #97a9c1; padding: 2px 7px; border-radius: 10px; font-size: 9px; }
.nav-dot { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: #54c89b; box-shadow: 0 0 0 3px rgba(84, 200, 155, .12); }
.sidebar-bottom { margin-top: auto; }
.storage-mini { margin: 0 5px 18px; padding: 13px 12px 11px; border-radius: 10px; background: #17263c; border: 1px solid #23354d; }
.storage-mini-head { display: flex; justify-content: space-between; font-size: 10px; color: #b8c6d9; margin-bottom: 10px; }
.storage-mini-head b { color: #92b3ff; font-weight: 600; }
.progress-track { height: 5px; background: #273951; overflow: hidden; border-radius: 9px; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4b7df0, #76a1ff); }
.storage-mini small { display: block; padding-top: 8px; color: #d7e2ef; font-size: 9px; }
.storage-mini em { color: #7487a0; font-style: normal; }
.profile-mini { border-top: 1px solid #25354b; margin-top: 18px; padding: 17px 5px 0; display: flex; align-items: center; gap: 9px; }
.profile-avatar { width: 32px; height: 32px; background: #314b70; color: #d7e5ff; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.profile-copy strong { color: #e6eef8; font-size: 11px; font-weight: 600; }
.profile-copy small { color: #8292a9; font-size: 9px; }
.more-button { border: 0; color: #8595aa; background: transparent; margin-left: auto; font-size: 20px; letter-spacing: 1px; }

.main-column { width: calc(100% - 250px); margin-left: 250px; min-height: 100vh; }
.topbar { height: 70px; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 38px; position: sticky; top: 0; z-index: 4; }
.breadcrumbs { display: flex; align-items: center; gap: 10px; color: #9aa7b8; font-size: 11px; }
.breadcrumbs strong { color: #33445c; font-weight: 600; }
.breadcrumbs a { color: #8190a4; text-decoration: none; }
.breadcrumbs a:hover { color: #477cf4; }
.crumb-slash { color: #ccd5df; }
.topbar-actions { display: flex; align-items: center; gap: 15px; }
.global-search { width: 245px; height: 34px; display: flex; align-items: center; gap: 8px; border: 1px solid #e6ebf2; border-radius: 7px; padding: 0 9px; background: #fafbfd; color: #a2adbb; }
.global-search > span { font-size: 19px; line-height: 1; transform: rotate(-18deg); }
.global-search input { border: 0; outline: 0; background: transparent; width: 100%; color: var(--ink); font-size: 10px; }
.global-search input::placeholder { color: #a0acbb; }
.global-search kbd { white-space: nowrap; font: 9px 'DM Sans', sans-serif; color: #99a6b6; border: 1px solid #e2e8ef; border-radius: 4px; padding: 2px 4px; background: #fff; }
.icon-button { position: relative; width: 31px; height: 31px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #77869a; display: grid; place-items: center; font-size: 14px; }
.icon-button:hover { border-color: var(--line); background: #f8fafc; }
.help-button { font-weight: 600; font-family: Georgia, serif; border-color: #e2e8ef; border-radius: 50%; width: 19px; height: 19px; font-size: 11px; }
.notification-button { font-size: 18px; transform: rotate(180deg); }
.notification-button i { position: absolute; width: 5px; height: 5px; right: 5px; top: 4px; border: 1px solid white; border-radius: 50%; background: #f07072; }
.topbar-divider { width: 1px; height: 24px; background: #e6ebf1; margin: 0 2px; }
.profile-menu-wrap { position: relative; display: flex; align-items: center; }
.top-profile { border: 0; background: transparent; display: inline-flex; align-items: center; gap: 7px; color: #67778c; font-size: 10px; padding: 4px 0 4px 4px; white-space: nowrap; }
.top-profile:hover { color: #315fca; }
.top-profile .chevron { margin-left: 0; color: #77869a; font-size: 13px; line-height: 1; transition: transform .15s; }
.top-profile[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.profile-dropdown { position: absolute; z-index: 20; top: calc(100% + 10px); right: 0; width: 208px; padding: 7px; border: 1px solid #e5ebf3; border-radius: 11px; background: #fff; box-shadow: 0 14px 34px rgba(20,41,75,.15); }
.profile-dropdown[hidden] { display: none; }
.profile-dropdown-identity { display: grid; gap: 4px; padding: 9px 10px 11px; }
.profile-dropdown-identity strong { color: #20314a; font-size: 11px; }
.profile-dropdown-identity small { color: #91a0b3; font-size: 9px; overflow-wrap: anywhere; }
.profile-dropdown > button { width: 100%; display: flex; align-items: center; gap: 9px; min-height: 35px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: #56677f; text-align: left; font-size: 11px; }
.profile-dropdown > button:hover { background: #f4f7fc; color: #315fca; }
.profile-dropdown > button span { width: 16px; color: #8291a6; text-align: center; font-size: 13px; }
.profile-dropdown > button.profile-logout-item { color: #d75863; }
.profile-dropdown-divider { height: 1px; margin: 4px 5px; background: #edf1f6; }
.profile-avatar.small { width: 28px; height: 28px; font-size: 10px; background: #eaf0fb; color: #4e77c9; }
.page-content { max-width: 1490px; margin: 0 auto; padding: 34px 39px 50px; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; margin-bottom: 25px; }
.eyebrow { color: #7d8da2; font-size: 9px; letter-spacing: .12em; font-weight: 700; text-transform: uppercase; margin-bottom: 7px; }
h1,h2,h3,p { margin-top: 0; }
.page-heading h1 { margin: 0; font-family: Manrope, 'Noto Sans SC', sans-serif; font-size: 23px; letter-spacing: -.04em; color: #14253b; font-weight: 700; }
.page-heading p { margin: 7px 0 0; color: #8391a3; font-size: 11px; }
.heading-actions { display: flex; gap: 8px; align-items: center; }
.button { border: 1px solid #e2e8f0; background: white; color: #55677f; border-radius: 7px; padding: 9px 13px; font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; transition: .15s; }
.button:hover { border-color: #cbd7e6; background: #fbfcfe; }
.button:disabled { cursor: not-allowed; opacity: .5; }
.button.primary { color: white; background: var(--blue); border-color: var(--blue); box-shadow: 0 5px 12px rgba(71,124,244,.18); }
.button.primary:hover { background: var(--blue-deep); }
.button .button-plus { font-size: 16px; font-weight: 400; line-height: 10px; }
.button.soft-blue { color: var(--blue); background: var(--blue-soft); border-color: #e3ecff; }
.button.danger-ghost { color: var(--red); }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 17px; }
.stat-card { background: var(--surface); border: 1px solid #edf1f5; border-radius: 11px; padding: 18px 19px 16px; box-shadow: 0 4px 15px rgba(27,49,82,.025); min-height: 118px; }
.stat-top { display: flex; justify-content: space-between; align-items: center; color: #8290a3; font-size: 10px; }
.stat-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; font-size: 15px; }
.stat-icon.blue { color: #4a7ff0; background: #edf3ff; }
.stat-icon.green { color: #16a778; background: #e9f8f2; }
.stat-icon.amber { color: #d99a33; background: #fff5e6; }
.stat-icon.violet { color: #8968de; background: #f2efff; }
.stat-value-row { display: flex; align-items: baseline; gap: 8px; margin: 11px 0 5px; }
.stat-value { font-family: Manrope, 'Noto Sans SC', sans-serif; font-size: 24px; letter-spacing: -.04em; font-weight: 700; color: #182a41; }
.stat-unit { color: #8694a6; font-size: 10px; }
.stat-meta { display: flex; align-items: center; gap: 5px; color: #97a3b1; font-size: 9px; }
.trend-up { color: #19a777; font-weight: 600; }
.trend-down { color: #df7774; font-weight: 600; }
.trend-arrow { font-size: 10px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .9fr); gap: 17px; margin-bottom: 18px; }
.panel { background: white; border: 1px solid #edf1f5; border-radius: 11px; box-shadow: 0 4px 15px rgba(27,49,82,.025); }
.panel-header { min-height: 55px; padding: 14px 18px; border-bottom: 1px solid #f0f3f6; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-heading { display: flex; align-items: baseline; gap: 9px; }
.panel-header h2 { font-size: 12px; margin: 0; font-weight: 700; color: #24374f; }
.panel-subtitle { color: #99a5b3; font-size: 9px; }
.select-mini { border: 1px solid #e8edf3; background: #fff; color: #7e8da1; padding: 6px 8px; border-radius: 6px; font-size: 9px; outline: none; }
.chart-panel { min-height: 274px; }
.chart-wrap { padding: 10px 18px 4px; }
.chart-legend { display: flex; gap: 16px; color: #8290a3; font-size: 9px; }
.legend-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.legend-dot.blue { background: #4f82f1; }
.legend-dot.green { background: #26bc91; }
.chart-svg { display: block; width: 100%; height: 180px; overflow: visible; }
.chart-gridline { stroke: #edf1f6; stroke-width: 1; }
.chart-label { fill: #a0acba; font-size: 9px; font-family: 'DM Sans','Noto Sans SC',sans-serif; }
.chart-area { fill: url(#chartFill); }
.chart-line { fill: none; stroke: #4d80ef; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-line.secondary { stroke: #2aba91; stroke-width: 2; }
.chart-point { fill: white; stroke: #4d80ef; stroke-width: 2; }
.activity-panel { min-height: 274px; }
.activity-list { padding: 6px 18px 7px; }
.activity-item { display: flex; gap: 11px; padding: 12px 0; border-bottom: 1px solid #f2f4f7; }
.activity-item:last-child { border-bottom: 0; }
.activity-icon { flex: 0 0 26px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; font-size: 11px; }
.activity-icon.blue { color: #4f7ef0; background: #edf3ff; }
.activity-icon.green { color: #16a778; background: #e8f8f1; }
.activity-icon.amber { color: #d59833; background: #fff4e1; }
.activity-copy { min-width: 0; flex: 1; }
.activity-copy strong { display: block; color: #3b4b61; font-size: 10px; font-weight: 600; line-height: 1.5; }
.activity-copy span { display: block; color: #94a0af; font-size: 9px; margin-top: 3px; }
.activity-time { color: #a8b2c0; font-size: 8px; white-space: nowrap; padding-top: 3px; }
.bottom-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 17px; }
.mini-table { width: 100%; border-collapse: collapse; }
.mini-table th { text-align: left; padding: 11px 16px; color: #9aa6b4; font-size: 9px; font-weight: 500; background: #fbfcfd; }
.mini-table td { padding: 12px 16px; border-top: 1px solid #f1f3f6; color: #617187; font-size: 9px; }
.mini-table td:first-child { color: #34465d; font-weight: 600; }
.mini-table .right { text-align: right; }
.app-cell { display: flex; align-items: center; gap: 8px; }
.app-monogram { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; color: #5c7fd2; background: #edf2ff; font-size: 9px; font-weight: 700; }
.app-monogram.green { color: #1d9e78; background: #e8f7f1; }
.app-monogram.orange { color: #d29433; background: #fff5e4; }
.status-pill { display: inline-flex; gap: 5px; align-items: center; font-size: 8px; border-radius: 20px; padding: 4px 7px; white-space: nowrap; }
.status-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-pill.active { background: var(--green-soft); color: #14966d; }
.status-pill.warning { background: var(--amber-soft); color: #c98a22; }
.status-pill.neutral { background: #f0f3f7; color: #77879b; }
.quiet-link { border: 0; background: transparent; color: #4e7ce5; font-size: 9px; font-weight: 600; padding: 4px; }
.storage-panel-body { padding: 17px 18px 18px; }
.storage-main { display: flex; align-items: center; gap: 17px; }
.donut { width: 92px; height: 92px; flex: 0 0 92px; border-radius: 50%; background: conic-gradient(#4b7df0 0 32%, #eef2f7 32% 100%); display: grid; place-items: center; position: relative; }
.donut::before { content: ''; width: 67px; height: 67px; background: white; border-radius: 50%; position: absolute; }
.donut-center { position: relative; z-index: 1; text-align: center; }
.donut-center strong { display: block; font-family: Manrope, sans-serif; font-size: 16px; letter-spacing: -.04em; }
.donut-center small { display: block; color: #99a5b4; font-size: 8px; }
.storage-details { flex: 1; }
.storage-details strong { font-size: 11px; color: #43546a; }
.storage-details p { color: #97a3b2; font-size: 9px; line-height: 1.6; margin: 5px 0 11px; }
.storage-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; }
.storage-breakdown span { color: #8794a5; font-size: 8px; display: flex; align-items: center; gap: 5px; }
.storage-breakdown i { width: 6px; height: 6px; border-radius: 2px; background: #4b7df0; }
.storage-breakdown i.gray { background: #ccd4df; }
.storage-breakdown b { color: #56677d; margin-left: auto; font-weight: 600; }

/* File library */
.file-overview { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(250px, .8fr); gap: 15px; margin-bottom: 17px; }
.file-callout { padding: 19px 21px; border-radius: 11px; background: linear-gradient(112deg, #1a3154, #23477a); color: white; position: relative; overflow: hidden; min-height: 112px; }
.file-callout::after { content: ''; position: absolute; width: 210px; height: 210px; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; right: 29px; top: -117px; box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.018); }
.file-callout h2 { font-size: 14px; margin: 0 0 6px; position: relative; z-index: 1; }
.file-callout p { color: #bbcae0; font-size: 10px; margin: 0; position: relative; z-index: 1; }
.file-callout-meta { display: flex; gap: 15px; margin-top: 15px; font-size: 9px; color: #d0dbeb; position: relative; z-index: 1; }
.file-callout-meta strong { color: white; margin-right: 4px; font-weight: 700; }
.file-capacity { display: flex; align-items: center; padding: 17px 18px; gap: 14px; }
.file-capacity .donut { width: 68px; height: 68px; flex-basis: 68px; background: conic-gradient(#4b7df0 0 32%, #eef2f7 32% 100%); }
.file-capacity .donut::before { width: 49px; height: 49px; }
.file-capacity .donut-center strong { font-size: 13px; }
.file-capacity .donut-center small { font-size: 7px; }
.capacity-copy { min-width: 0; flex: 1; }
.capacity-copy h3 { margin: 0 0 5px; font-size: 10px; color: #56677d; }
.capacity-copy p { margin: 0; color: #95a2b1; font-size: 8px; line-height: 1.6; }
.files-panel { overflow: hidden; }
.files-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 17px; border-bottom: 1px solid #edf1f5; }
.tabs { display: flex; gap: 5px; }
.tab-button { border: 0; background: transparent; color: #8491a2; border-radius: 6px; padding: 7px 9px; font-size: 9px; }
.tab-button.active { color: #3e70df; background: #eef4ff; font-weight: 600; }
.files-tools-right { display: flex; align-items: center; gap: 7px; }
.inline-search { height: 30px; display: flex; align-items: center; gap: 6px; border: 1px solid #e9edf3; padding: 0 8px; border-radius: 6px; color: #a5afbb; }
.inline-search input { width: 150px; border: 0; outline: 0; background: transparent; font-size: 9px; color: var(--ink); }
.inline-search input::placeholder { color: #a5afbb; }
.icon-square { border: 1px solid #e8edf3; background: white; color: #7f8da0; border-radius: 6px; width: 30px; height: 30px; display: grid; place-items: center; }
.icon-square:hover { background: #f8fafc; }
.file-table-wrap { overflow-x: auto; }
.file-table { width: 100%; border-collapse: collapse; min-width: 750px; }
.file-table th { text-align: left; height: 38px; padding: 0 15px; background: #fbfcfd; color: #9ba7b5; font-size: 8px; font-weight: 500; white-space: nowrap; }
.file-table td { height: 61px; padding: 8px 15px; border-top: 1px solid #f1f3f6; color: #6c7b90; font-size: 9px; white-space: nowrap; }
.file-table tr:hover td { background: #fcfdff; }
.file-name-cell { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.file-type-icon { flex: 0 0 32px; width: 32px; height: 36px; border-radius: 7px; display: grid; place-items: center; font-size: 8px; font-weight: 700; position: relative; }
.file-type-icon::before { content: ''; position: absolute; right: 0; top: 0; width: 8px; height: 8px; border-left: 1px solid rgba(0,0,0,.06); border-bottom: 1px solid rgba(0,0,0,.06); border-radius: 0 0 0 4px; background: rgba(255,255,255,.65); }
.file-type-icon.zip { color: #7b60cb; background: #f1edff; }
.file-type-icon.pdf { color: #d35e65; background: #fff0f0; }
.file-type-icon.dll { color: #4573d5; background: #edf3ff; }
.file-type-icon.png { color: #1b9a76; background: #e8f8f1; }
.file-name-copy { min-width: 0; }
.file-name-copy strong { display: block; color: #33455c; font-size: 9px; font-weight: 600; margin-bottom: 4px; }
.file-name-copy small { color: #a0acb9; font-size: 8px; }
.visibility-label { display: inline-flex; align-items: center; gap: 5px; color: #78879a; font-size: 8px; }
.visibility-label i { width: 5px; height: 5px; border-radius: 50%; background: #27ad83; }
.visibility-label.private i { background: #d59b40; }
.file-actions { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.file-action { border: 1px solid #e8edf3; background: white; color: #697b91; border-radius: 5px; padding: 6px 8px; font-size: 8px; }
.file-action:hover { color: #3e70df; border-color: #ccdafa; }
.file-action.copy { color: #4777e5; background: #f7f9ff; border-color: #e5ecff; }
.file-action.danger-text { color: #b54b54; border-color: #f0d4d5; background: #fffafa; }
.file-action.danger-text:hover { color: #9f2632; border-color: #e5aeb2; background: #fff4f4; }
.file-library-toolbar-main { display: flex; align-items: center; gap: 10px; }
.project-file-library { margin-top: 16px; }
.project-download-logs { margin-top: 16px; overflow: hidden; }
.project-file-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 17px 11px; }
.project-file-heading h2 { margin: 0 0 5px; color: #40536c; font-size: 12px; }
.project-file-heading p { margin: 0; color: #96a2b1; font-size: 8px; line-height: 1.6; }
.project-file-heading .heading-actions { margin: 0; }
.download-log-filters { display: flex; align-items: end; gap: 9px; flex-wrap: wrap; padding: 0 17px 14px; }
.download-log-filters label { display: grid; gap: 5px; color: #8290a3; font-size: 8px; font-weight: 600; }
.download-log-filters input, .download-log-filters select { min-width: 125px; height: 31px; padding: 0 8px; border: 1px solid #e6ebf1; border-radius: 6px; outline: none; background: white; color: #55677f; font-size: 9px; }
.download-log-filters input:focus, .download-log-filters select:focus { border-color: #83a4f8; box-shadow: 0 0 0 3px #eef3ff; }
.download-log-table { min-width: 1060px; }
.download-log-table td small { display: block; margin-top: 4px; }
.download-log-pagination { display: flex; align-items: center; gap: 9px; }
.download-log-pagination > span { white-space: nowrap; }
.file-retention-note { max-width: 65%; text-align: right; line-height: 1.5; }
.table-footer { min-height: 49px; padding: 0 17px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #edf1f5; color: #9aa6b4; font-size: 8px; }
.pagination { display: flex; align-items: center; gap: 4px; }
.page-number { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #8492a4; font-size: 8px; }
.page-number.active { background: #edf3ff; border-color: #e1eaff; color: #4778e6; font-weight: 700; }
.table-note { padding: 10px 17px; background: #fbfcfe; border-top: 1px solid #f0f3f7; color: #9aa6b5; font-size: 8px; }
.table-note strong { color: #6e7e92; font-weight: 600; }

/* Generic views */
.filters-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.filter-controls { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.filter-select { border: 1px solid #e6ebf1; background: white; color: #718197; border-radius: 6px; padding: 8px 10px; font-size: 9px; outline: none; }
.generic-panel { overflow: hidden; }
.generic-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.generic-table th { text-align: left; padding: 12px 16px; background: #fbfcfd; color: #97a4b3; font-weight: 500; font-size: 8px; white-space: nowrap; }
.generic-table td { border-top: 1px solid #f0f3f6; padding: 13px 16px; color: #68788c; font-size: 9px; white-space: nowrap; }
.generic-table td:first-child { color: #36485f; font-weight: 600; }
.row-menu { border: 0; background: transparent; color: #91a0b0; font-size: 17px; }
.table-scroll { overflow-x: auto; }
.project-table { min-width: 1120px; }
.app-key-cell { display: flex; align-items: center; gap: 8px; min-width: 220px; }
.app-key-cell code { overflow-wrap: anywhere; color: #4368b0; }
.app-key-cell .quiet-link { flex: 0 0 auto; }
.license-table { min-width: 1420px; }
.project-license-table { min-width: 1420px; }
.license-table td.license-applicant-cell, .license-table td.license-notes-cell,
.project-license-table td.license-applicant-cell, .project-license-table td.license-notes-cell { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; vertical-align: top; line-height: 1.5; }
.license-table td.license-applicant-cell, .project-license-table td.license-applicant-cell { min-width: 100px; max-width: 170px; }
.license-table td.license-notes-cell, .project-license-table td.license-notes-cell { min-width: 220px; max-width: 360px; }
.license-note-wrap { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.license-code-cell { display: flex; align-items: center; gap: 8px; min-width: 260px; }
.license-code-cell code { overflow-wrap: anywhere; color: #4368b0; font-size: 10px; }
.license-code-cell .quiet-link { flex: 0 0 auto; }
.license-code-missing { color: #9299a8; font-size: 10px; }
.project-table td:nth-child(2) code, .project-key-line code { font-family: 'Cascadia Code', Consolas, monospace; font-size: 9px; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; white-space: nowrap; }
.license-more-menu { position: relative; display: inline-block; }
.license-more-menu > summary { display: inline-flex; align-items: center; cursor: pointer; list-style: none; }
.license-more-menu > summary::-webkit-details-marker { display: none; }
.license-more-popover { position: absolute; top: calc(100% + 4px); right: 0; z-index: 80; display: grid; min-width: 132px; padding: 5px; border: 1px solid #e4eaf1; border-radius: 8px; background: white; box-shadow: 0 12px 28px rgba(26, 41, 61, .16); }
.license-more-menu:not([open]) .license-more-popover { display: none; }
.license-more-popover button { border: 0; border-radius: 5px; padding: 8px 9px; background: transparent; color: #43566e; text-align: left; font: inherit; font-size: 9px; cursor: pointer; }
.license-more-popover button:hover { background: #f3f6fb; }
.license-more-popover button.danger { color: #d04d54; }
.license-more-popover button:disabled { opacity: .45; cursor: not-allowed; }
.button.small { min-height: 27px; padding: 5px 8px; font-size: 8px; }
.button.danger { color: #b54b54; border-color: #f0d4d5; background: #fffafa; }
.button.danger:hover { color: #9f2632; border-color: #e5aeb2; background: #fff4f4; }
.text-link { border: 0; padding: 0; color: #4778e6; background: none; font-size: inherit; }
.project-summary { padding: 18px; margin-bottom: 14px; display: grid; grid-template-columns: 1fr auto; gap: 15px 20px; }
.project-summary-main { display: flex; align-items: center; gap: 12px; }
.project-summary-main h2 { margin: 0 0 6px; color: #33465f; font-size: 14px; }
.project-summary-main p { margin: 3px 0; color: #8492a4; font-size: 9px; }
.project-summary-main code { font-size: 8px; }
.project-summary-meta { display: flex; align-items: flex-start; gap: 13px; }
.project-notes { max-width: 640px; white-space: normal; }
.project-key-line { grid-column: 1 / -1; display: grid; grid-template-columns: 180px minmax(220px, auto) 1fr; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid #edf1f6; border-radius: 7px; color: #718197; background: #fafbfd; font-size: 9px; }
.project-key-line code { overflow-wrap: anywhere; color: #4368b0; }
.project-key-line small { color: #98a4b2; font-size: 8px; }
.project-stats { margin-top: 0; }
.section-title { margin: 0 0 4px; font-size: 12px; color: #40536c; }
.section-copy { margin: 0; color: #96a2b1; font-size: 8px; }
.readonly-field { border: 1px solid #e4eaf1; background: #f8fafc; border-radius: 6px; padding: 9px 10px; color: #607188; font-size: 9px; }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.modal-field textarea { resize: vertical; min-height: 58px; border: 1px solid #e4eaf1; background: white; border-radius: 6px; padding: 9px 10px; outline: none; color: #42546b; font: inherit; font-size: 9px; }
.modal-field textarea:focus { border-color: #83a4f8; box-shadow: 0 0 0 3px #eef3ff; }
.modal-field input[type="number"] { min-width: 0; }
.modal-grid[hidden] { display: none !important; }
.checkbox-field { display: flex; align-items: center; gap: 7px; margin-top: 8px; color: #64758b; font-size: 9px; }
.license-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 5px 0 16px; }
.license-detail-item { display: grid; gap: 5px; min-width: 0; padding: 10px; border: 1px solid #edf0f5; border-radius: 7px; background: #fbfcfe; }
.license-detail-item span { color: #8896a7; font-size: 8px; }
.license-detail-item strong { overflow-wrap: anywhere; color: #35485f; font-size: 9px; font-weight: 600; }
.license-detail-heading { margin: 14px 0 8px; color: #465970; font-size: 10px; }
.license-device-list { display: grid; gap: 8px; max-height: 260px; overflow: auto; }
.license-device-detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, .8fr); gap: 10px; padding: 10px; border: 1px solid #edf0f5; border-radius: 7px; }
.license-device-detail > div { display: grid; align-content: start; gap: 4px; min-width: 0; }
.license-device-detail strong { color: #8795a6; font-size: 8px; }
.license-device-detail code, .license-device-detail span { overflow-wrap: anywhere; color: #3f5268; font-size: 8px; }
.license-device-detail small { color: #929eac; font-size: 8px; white-space: normal; }
.modal { max-height: calc(100vh - 40px); overflow-y: auto; }
.empty-state { display: grid; place-items: center; min-height: 220px; padding: 24px; color: #98a5b5; text-align: center; }
.empty-graphic { width: 49px; height: 49px; border-radius: 14px; display: grid; place-items: center; color: #6288df; background: #eef4ff; font-size: 21px; margin-bottom: 12px; }
.empty-state strong { color: #52637a; font-size: 11px; margin-bottom: 5px; }
.empty-state p { max-width: 320px; font-size: 9px; line-height: 1.7; margin: 0; }
.data-banner { display: flex; align-items: center; gap: 9px; min-height: 34px; margin: 0 0 15px; padding: 7px 12px; border: 1px solid #e6ebf1; border-radius: 8px; background: #fff; color: #78869a; font-size: 9px; }
.data-banner i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #e5aa48; }
.data-banner.connected { color: #367c68; border-color: #d8eee6; background: #f6fcf9; }
.data-banner.connected i { background: #27ad7a; }
.data-banner.offline { color: #9d6547; border-color: #f0e2d7; background: #fffaf6; }
.data-banner.offline i { background: #db8350; }
.data-banner .quiet-link { margin-left: auto; flex: 0 0 auto; }
.chart-empty { display: grid; align-content: center; justify-items: center; gap: 8px; min-height: 196px; color: #99a5b4; text-align: center; }
.chart-empty strong { color: #52637a; font-size: 11px; }
.chart-empty span { max-width: 300px; font-size: 9px; line-height: 1.6; }
.compact-empty { min-height: 92px; padding: 12px; }
.compact-empty .empty-graphic { display: none; }
.subtle-cell { display: block; margin-top: 3px; color: #9aa6b4; font-size: 8px; }
.file-action:disabled, .row-menu:disabled { cursor: not-allowed; opacity: .48; }
.sdk-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(250px, .75fr); gap: 16px; }
.code-panel { overflow: hidden; background: #121f31; border: 1px solid #22344b; border-radius: 10px; }
.code-panel-head { height: 43px; display: flex; align-items: center; justify-content: space-between; color: #b9c6d6; padding: 0 14px; border-bottom: 1px solid #26394f; font-size: 9px; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 6px; height: 6px; border-radius: 50%; background: #e67774; }
.window-dots i:nth-child(2) { background: #e7ba55; }
.window-dots i:nth-child(3) { background: #4bb58a; }
.code-copy { border: 0; color: #92a6c0; background: transparent; font-size: 8px; }
.code-block { margin: 0; overflow: auto; padding: 17px 19px 20px; color: #d2e0f1; font: 9px/1.85 'Cascadia Code', Consolas, monospace; }
.code-block .comment { color: #6e8caa; }
.code-block .keyword { color: #8eb9ff; }
.code-block .string { color: #8fd5b0; }
.code-block .function { color: #e8c47c; }
.sdk-side-card { padding: 17px; margin-bottom: 12px; }
.sdk-side-card h3 { margin: 0 0 9px; font-size: 10px; color: #43556c; }
.sdk-side-card p { margin: 0 0 9px; color: #8b99aa; font-size: 9px; line-height: 1.7; }
.sdk-side-card p:last-child { margin-bottom: 0; }
.step-list { display: grid; gap: 10px; }
.step-item { display: flex; align-items: flex-start; gap: 8px; font-size: 9px; line-height: 1.55; color: #718197; }
.step-num { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 6px; background: #eef4ff; color: #4979e5; display: grid; place-items: center; font-size: 8px; font-weight: 700; }
.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.settings-card { padding: 18px; display: flex; gap: 12px; align-items: flex-start; }
.settings-icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #4c7deb; background: #edf3ff; font-size: 15px; }
.settings-card h3 { font-size: 10px; margin: 1px 0 6px; color: #40536c; }
.settings-card p { color: #92a0af; font-size: 8px; line-height: 1.7; margin: 0; }
.settings-card .quiet-link { padding: 7px 0 0; }

/* Modal and feedback */
.modal-backdrop { position: fixed; inset: 0; background: rgba(13, 25, 43, .48); backdrop-filter: blur(3px); z-index: 20; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-backdrop.open { display: flex; }
.modal { width: min(530px, 100%); background: white; border-radius: 13px; box-shadow: 0 25px 70px rgba(11, 24, 42, .25); overflow: hidden; animation: modal-in .16s ease-out; }
@keyframes modal-in { from { opacity: .5; transform: translateY(6px) scale(.99); } to { opacity: 1; transform: none; } }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 19px 21px 15px; border-bottom: 1px solid #edf1f5; }
.modal-header h2 { font-size: 14px; margin: 0 0 5px; color: #20344d; }
.modal-header p { font-size: 9px; color: #93a0ae; margin: 0; }
.modal-close { font-size: 20px; color: #97a3b0; margin-top: -4px; }
.modal-body { padding: 17px 21px 20px; }
.dropzone { border: 1px dashed #c9d6e8; border-radius: 9px; background: #fafcff; padding: 27px 16px; text-align: center; transition: .15s; }
.dropzone.dragging { border-color: #477cf4; background: #f0f5ff; }
.upload-cloud { width: 39px; height: 39px; border-radius: 12px; margin: 0 auto 9px; background: #edf3ff; color: #4c7df0; display: grid; place-items: center; font-size: 17px; }
.dropzone strong { display: block; color: #52647a; font-size: 10px; margin-bottom: 6px; }
.dropzone p { color: #99a5b3; font-size: 8px; margin: 0 0 12px; }
.dropzone .button { padding: 7px 10px; }
.selected-files { margin-top: 11px; display: grid; gap: 7px; }
.selected-file { display: flex; align-items: center; gap: 8px; border: 1px solid #edf1f5; border-radius: 7px; padding: 8px 9px; color: #6b7a8e; font-size: 8px; }
.selected-file strong { color: #43556d; font-size: 8px; font-weight: 600; }
.selected-file small { color: #a0acb8; margin-left: auto; }
.modal-field { display: grid; gap: 6px; margin-top: 12px; }
.modal-field label { color: #718197; font-size: 8px; font-weight: 600; }
.modal-field input, .modal-field select { border: 1px solid #e4eaf1; background: white; border-radius: 6px; padding: 9px 10px; outline: none; color: #42546b; font-size: 9px; }
.modal-field input:focus, .modal-field select:focus { border-color: #83a4f8; box-shadow: 0 0 0 3px #eef3ff; }
.modal-hint { margin-top: 11px; background: #f8fafc; border-radius: 6px; padding: 8px 9px; color: #8d9aaa; font-size: 8px; line-height: 1.6; }
.modal-footer { display: flex; justify-content: flex-end; gap: 7px; padding-top: 16px; }
.toast-region { position: fixed; right: 23px; bottom: 22px; display: grid; gap: 8px; z-index: 30; }
.toast { min-width: 220px; background: #17263b; color: white; border-radius: 8px; box-shadow: 0 10px 30px rgba(13,26,44,.2); padding: 11px 14px; font-size: 9px; display: flex; align-items: center; gap: 8px; animation: toast-in .2s ease-out; }
.toast::before { content: '✓'; width: 16px; height: 16px; display: grid; place-items: center; color: #a6f0d0; background: #1c795d; border-radius: 50%; font-size: 9px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

@media (max-width: 1100px) {
  .sidebar { width: 220px; flex-basis: 220px; }
  .main-column { margin-left: 220px; width: calc(100% - 220px); }
  .page-content { padding-left: 25px; padding-right: 25px; }
  .topbar { padding: 0 25px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dashboard-grid, .bottom-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sidebar { width: 64px; flex-basis: 64px; padding: 17px 8px; align-items: center; }
  .brand { padding: 0 0 22px; }
  .brand-copy, .workspace-switcher, .nav-caption, .nav-item > span:not(.nav-icon), .storage-mini, .profile-copy, .more-button { display: none; }
  .nav-item { justify-content: center; padding: 0; width: 43px; }
  .nav-icon { font-size: 18px; }
  .main-nav { width: 100%; justify-items: center; }
  .nav-caption-spaced { display: none; }
  .sidebar-bottom { width: 100%; }
  .profile-mini { justify-content: center; padding: 15px 0 0; }
  .main-column { margin-left: 64px; width: calc(100% - 64px); }
  .topbar { padding: 0 15px; height: 60px; }
  .global-search { width: 34px; justify-content: center; padding: 0; border-color: transparent; background: transparent; }
  .global-search input, .global-search kbd, .top-profile > span:not(.profile-avatar) { display: none; }
  .topbar-actions { gap: 6px; }
  .page-content { padding: 24px 14px 35px; }
  .page-heading { flex-direction: column; margin-bottom: 18px; }
  .page-heading h1 { font-size: 20px; }
  .heading-actions { width: 100%; }
  .stats-grid { gap: 8px; }
  .stat-card { padding: 13px; min-height: 108px; }
  .stat-value { font-size: 20px; }
  .file-overview { grid-template-columns: 1fr; }
  .files-toolbar { align-items: flex-start; flex-direction: column; }
  .files-tools-right { width: 100%; }
  .inline-search { flex: 1; }
  .inline-search input { width: 100%; }
  .file-library-toolbar-main { width: 100%; justify-content: space-between; }
  .project-file-heading { align-items: flex-start; flex-direction: column; }
  .project-file-heading .heading-actions { width: 100%; }
  .file-retention-note { max-width: 55%; }
  .sdk-layout, .settings-grid { grid-template-columns: 1fr; }
  .project-summary { grid-template-columns: 1fr; }
  .project-key-line { grid-column: auto; grid-template-columns: 1fr; gap: 5px; }
  .project-summary-meta { align-items: center; }
  .modal-grid { grid-template-columns: 1fr; }
  .topbar-divider, .help-button { display: none; }
}

.agent-session .owner-only { display: none !important; }
.logout-button { width: 30px; height: 30px; border-radius: 7px; font-size: 18px; }
.logout-button:hover { color: #fff; background: #263b57; }

.login-mode { min-width: 320px; background: #f4f7fc; }
.login-mode .app-frame { min-height: 100vh; display: block; }
.login-mode .sidebar, .login-mode .topbar, .login-mode .modal-backdrop { display: none !important; }
.login-mode .main-column { width: 100%; margin: 0; min-height: 100vh; }
.login-mode .page-content { min-height: 100vh; padding: 36px 20px; }
.login-shell { min-height: calc(100vh - 72px); display: grid; place-items: center; position: relative; overflow: hidden; background: radial-gradient(ellipse at 15% 12%, rgba(76,124,241,.12), transparent 38%), radial-gradient(ellipse at 92% 83%, rgba(29,170,128,.09), transparent 35%); border-radius: 18px; }
.login-card { width: min(100%, 430px); padding: 38px 40px 30px; border: 1px solid rgba(222,231,242,.9); border-radius: 18px; background: rgba(255,255,255,.94); box-shadow: 0 24px 70px rgba(22,46,83,.12); }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 36px; }
.login-brand strong { display: block; color: #192b44; font-size: 18px; letter-spacing: .04em; }
.login-brand small { display: block; margin-top: 4px; color: #8a9ab0; font-size: 9px; letter-spacing: .2em; font-weight: 700; }
.login-card h1 { margin: 0; font-size: 24px; letter-spacing: -.03em; }
.login-copy { margin: 8px 0 24px; color: #8593a7; font-size: 12px; }
.login-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin-bottom: 24px; border-radius: 9px; background: #f2f5fa; }
.login-tab { height: 36px; border: 0; border-radius: 7px; color: #75849a; background: transparent; font-size: 12px; }
.login-tab.active { color: #315fca; background: white; box-shadow: 0 2px 8px rgba(30,53,88,.08); font-weight: 650; }
.login-label { display: block; margin: 15px 0 7px; color: #42536b; font-size: 11px; font-weight: 650; }
.login-input { width: 100%; height: 44px; border: 1px solid #dce4ef; border-radius: 8px; padding: 0 12px; outline: none; background: #fff; color: #1c2b40; font-size: 13px; transition: border-color .15s, box-shadow .15s; }
.login-input:focus { border-color: #6791f2; box-shadow: 0 0 0 3px rgba(71,124,244,.12); }
.login-error { min-height: 23px; padding-top: 8px; color: #cf4d59; font-size: 11px; }
.login-submit { width: 100%; height: 44px; justify-content: center; border-radius: 8px; font-size: 13px; }
.login-submit:disabled { opacity: .7; cursor: wait; }
.login-footnote { display: block; margin-top: 18px; text-align: center; color: #98a4b5; font-size: 10px; }

.agent-project-permissions { display: grid; gap: 10px; margin-top: 18px; }
.agent-project-row { display: grid; grid-template-columns: minmax(150px, 1fr) 2fr minmax(150px, 1fr); gap: 12px; align-items: start; padding: 14px; border: 1px solid #e6ebf3; border-radius: 10px; background: #fbfcfe; }
.agent-project-title strong,.agent-project-title small { display: block; }
.agent-project-title strong { font-size: 12px; }
.agent-project-title small { margin-top: 5px; color: #97a3b3; font: 9px ui-monospace,monospace; }
.agent-permission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.agent-permission-check { display: flex; align-items: center; gap: 6px; color: #586981; font-size: 10px; white-space: nowrap; }
.agent-permission-check input { accent-color: #477cf4; }
.agent-types-label { display: grid; gap: 6px; color: #586981; font-size: 10px; }
.agent-types-label > strong { color: #4c5e76; font-size: 10px; font-weight: 600; }
.agent-types-label > small { color: #96a3b4; font-size: 9px; }
.agent-type-options { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 7px; border: 1px solid #dfe6f0; border-radius: 8px; background: white; }
.agent-type-option { min-height: 27px; display: flex; align-items: center; gap: 6px; padding: 3px 5px; border-radius: 5px; color: #52647c; font-size: 10px; cursor: pointer; }
.agent-type-option:hover { background: #f2f6ff; color: #315fca; }
.agent-type-option input { flex: 0 0 auto; accent-color: #477cf4; }
.profile-detail { min-width: 0; }
.profile-tabs { display: flex; gap: 6px; margin: 0 0 16px; padding-bottom: 9px; border-bottom: 1px solid #e9eef5; }
.profile-tab { border: 1px solid transparent; border-radius: 7px; padding: 7px 11px; background: transparent; color: #74849a; font-size: 10px; }
.profile-tab:hover { color: #315fca; background: #f6f8fc; }
.profile-tab.active { color: #315fca; border-color: #dce7ff; background: #eef4ff; font-weight: 650; }
.profile-account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 17px; }
.profile-account-grid > div { min-width: 0; display: grid; gap: 5px; padding: 10px 12px; border: 1px solid #edf1f6; border-radius: 8px; background: #fbfcfe; }
.profile-account-grid span { color: #8b99aa; font-size: 9px; }
.profile-account-grid strong,.profile-account-grid code { color: #34465f; font-size: 10px; overflow-wrap: anywhere; }
.profile-password-form { display: grid; gap: 11px; padding: 14px; border: 1px solid #e8eef7; border-radius: 10px; background: #fbfcfe; }
.profile-password-form h3 { margin: 0; color: #263850; font-size: 12px; }
.profile-password-form p,.profile-password-note p { margin: -6px 0 0; color: #8a98aa; font-size: 9px; line-height: 1.6; }
.profile-password-form .modal-field { display: grid; gap: 6px; margin: 0; color: #687992; font-size: 10px; }
.profile-password-form input { width: 100%; height: 36px; border: 1px solid #dfe6f0; border-radius: 7px; padding: 0 10px; color: #25374e; background: #fff; outline: none; font-size: 11px; }
.profile-password-form input:focus { border-color: #6791f2; box-shadow: 0 0 0 3px rgba(71,124,244,.1); }
.profile-password-note { display: grid; gap: 11px; padding: 13px 14px; border: 1px solid #f0e1c6; border-radius: 9px; background: #fffaf1; }
.profile-password-note strong { color: #86632d; font-size: 11px; }
.profile-password-note p { margin: 0; }
.profile-history-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; color: #8391a4; font-size: 10px; }
.profile-history-scroll { max-height: 380px; overflow: auto; }
.profile-history-table { min-width: 630px; }
.operation-history-table { min-width: 660px; }
.profile-agent-cell { max-width: 190px; color: #73839a; font-size: 9px; overflow-wrap: anywhere; }
.profile-change { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 3px 0; font-size: 9px; }
.profile-change b { color: #65758b; }
.profile-change code { max-width: 230px; padding: 3px 4px; border-radius: 4px; background: #f4f6fa; color: #52627a; white-space: pre-wrap; overflow-wrap: anywhere; }
.profile-history-empty { min-height: 130px; display: grid; place-content: center; gap: 7px; color: #7e8da2; text-align: center; font-size: 11px; }
.profile-history-empty small { max-width: 400px; color: #9aa6b5; font-size: 9px; }
.profile-history-empty.error { color: #c5505a; }
.profile-history-pagination { display: flex; justify-content: flex-end; gap: 7px; padding-top: 12px; }
.login-error.success { color: #168363; }
.audit-table { min-width: 900px; }
.audit-change { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 4px 0; font-size: 10px; }
.audit-change b { color: #43536a; }
.audit-change code { max-width: 300px; overflow-wrap: anywhere; color: #51627b; background: #f5f7fb; border-radius: 4px; padding: 3px 5px; }
.audit-details { margin-top: 7px; color: #60718a; font-size: 10px; }
.audit-details summary { cursor: pointer; }
.audit-details pre { max-width: 680px; max-height: 320px; overflow: auto; padding: 10px; border-radius: 7px; background: #f5f7fb; color: #43536a; font: 10px/1.55 ui-monospace,monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 900px) { .agent-project-row { grid-template-columns: 1fr; } .login-card { padding: 30px 24px 24px; } }
@media (max-width: 600px) { .topbar { padding: 0 16px; } .topbar-actions { gap: 9px; } .profile-account-grid { grid-template-columns: 1fr; } .profile-tabs { overflow-x: auto; } .profile-tab { white-space: nowrap; } .profile-dropdown { width: min(208px, calc(100vw - 28px)); } }
@media (max-width: 760px) { .top-profile > .top-profile-name { display: none; } .top-profile > .chevron { display: inline-block; } }