:root {
    color-scheme: light;
    --bg: #ffffff;
    --panel: #ffffff;
    --text: #111111;
    --muted: #7b7b7b;
    --line: #f2f2f2;
    /*--icon-primary: #a4b55b;*/
    --icon-primary: #737373;
    --overlay: rgba(0, 0, 0, 0.34);
    --toolbar-control-height: 28px;
    --desktop-titlebar-height: 30px;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    color: var(--text);
    background: var(--bg);
    -webkit-user-select: none;
    user-select: none;
}

.desktop-client-titlebar {
    display: none;
    flex: 0 0 var(--desktop-titlebar-height);
    height: var(--desktop-titlebar-height);
    align-items: center;
    justify-content: flex-end;
    position: relative;
    padding: 0 10px;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
    letter-spacing: 0.02em;
    -webkit-app-region: drag;
    user-select: none;
}

body.is-desktop-client .desktop-client-titlebar {
    display: flex;
}

.desktop-client-titlebar [data-no-drag] {
    -webkit-app-region: no-drag;
}

.desktop-client-titlebar-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100% - 120px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

.desktop-client-titlebar-controls {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.desktop-client-titlebar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    line-height: 1;
    cursor: pointer;
}

.desktop-client-titlebar-button:hover,
.desktop-client-titlebar-button:focus-visible {
    filter: brightness(0.94);
    outline: none;
}

.desktop-client-titlebar-icon {
    display: block;
    width: 8px;
    height: 8px;
    margin: 0;
    stroke: #ffffff;
    stroke-width: 1.25;
    stroke-linecap: round;
    fill: none;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.desktop-client-titlebar-button:hover .desktop-client-titlebar-icon,
.desktop-client-titlebar-button:focus-visible .desktop-client-titlebar-icon {
    opacity: 1;
}

.desktop-client-titlebar-button-close {
    background: #ff5f57;
    border-color: #e0443e;
}

.desktop-client-titlebar-button-minimize {
    background: #28c840;
    border-color: #1ea332;
}

img,
svg {
    -webkit-user-drag: none;
}

input,
textarea,
select,
[contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
}

.app-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%) translateY(10px);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    max-width: calc(100vw - 32px);
    padding: 10px 20px 10px 14px;
    border-radius: 0;
    border: 1px solid #2f3140;
    background: #2f3140;
    color: #f8fafc;
    font-size: 12px;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    box-shadow: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 1200;
}

.app-toast.is-info {
    background: #2f3140;
    border-color: #2f3140;
    color: #f8fafc;
}

.app-toast.is-success {
    background: #03a65a;
    border-color: #03a65a;
    color: #f8fafc;
}

.app-toast.is-error {
    background: #db3056;
    border-color: #db3056;
    color: #f8fafc;
}

.app-toast.is-question {
    background: #0070e0;
    border-color: #0070e0;
    color: #f8fafc;
}

.app-toast.is-warning {
    background: #fc8621;
    border-color: #fc8621;
    color: #f8fafc;
}

.app-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.app-toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.app-toast-icon svg {
    width: 16px;
    height: 16px;
}

.app-toast-icon svg circle,
.app-toast-icon svg path {
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.app-toast-icon svg circle[r="1"] {
    fill: currentColor;
    stroke: none;
}

.app-toast-text {
    min-width: 0;
    flex: 1 1 auto;
}

.thumb-context-menu {
    position: fixed;
    min-width: 116px;
    padding: 3px;
    border: 1px solid #dcdcdc;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    z-index: 1250;
}

.thumb-context-item {
    display: flex;
    align-items: center;
    width: 100%;
    height: 26px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 11px;
    text-align: left;
    cursor: pointer;
}

.thumb-context-item:hover:not(:disabled),
.thumb-context-item:focus-visible:not(:disabled) {
    outline: none;
    background: #f3f3f3;
}

.thumb-context-item:disabled {
    color: #a0a0a0;
    background: transparent;
    cursor: not-allowed;
}

.thumb-context-item.is-danger {
    color: #b42318;
}

.logout-form {
    margin: 0;
}

.user-menu {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-end;
    width: 26px;
    height: 22px;
}

.user-menu::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 26px;
    height: 12px;
}

.user-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid #c9b37a;
    border-radius: 999px;
    color: #ffffff;
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: default;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.1);
    overflow: hidden;
    padding: 0;
    line-height: 1;
    appearance: none;
    -webkit-appearance: none;
    transform: translateY(-2px);
    background: linear-gradient(135deg, #e5d4a8 0%, #c9b37a 100%);
}

.user-avatar-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    flex: 0 0 auto;
}

.user-avatar.has-avatar {
    color: transparent;
    background: #e8edf5;
}

.user-avatar-default {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.user-avatar-default svg {
    width: 100%;
    height: 100%;
    display: block;
}

.user-card {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 220px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.16s ease, visibility 0.16s ease;
    z-index: 40;
}

.user-menu:hover .user-card,
.user-menu:focus-within .user-card {
    opacity: 1;
    visibility: visible;
}

.user-card-panel {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    min-height: 242px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.user-card-head {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    min-height: 74px;
    padding: 14px 12px;
    background:
        linear-gradient(180deg, rgba(248, 250, 252, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
    border-bottom: 1px solid #eef2f7;
}

.user-card-meta {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.user-card-meta strong {
    color: #6b7280;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-card-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.user-card-name-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: #94a3b8;
    flex: 0 0 auto;
}

.user-card-name-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.user-card-name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-card-groups {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.user-card-assets {
    margin-top: 14px;
    display: flex;
    width: 100%;
    align-items: stretch;
    gap: 6px;
}

.user-card-asset {
    display: grid;
    flex: 1 1 0;
    min-width: 0;
    gap: 2px;
    min-height: 34px;
    padding: 6px 7px;
    border: 0;
    border-radius: 6px;
    background: #f3f6fb;
}

.user-card-asset-label {
    color: #94a3b8;
    font-size: 10px;
    line-height: 1.1;
}

.user-card-asset-value {
    color: #475569;
    font-size: 17px;
    line-height: 1.2;
}

.user-card-group-badge,
.profile-group-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 20px;
    padding: 0 8px;
    border: 1px solid color-mix(in srgb, var(--group-color, #6b7280) 28%, #ffffff);
    background: color-mix(in srgb, var(--group-color, #6b7280) 12%, #ffffff);
    color: var(--group-color, #334155);
    font-size: 11px;
    line-height: 1;
}

.user-card-group-icon,
.profile-group-chip-icon {
    width: 13px;
    height: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.user-card-group-icon svg,
.profile-group-chip-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.user-card-body {
    padding: 6px 12px;
}

.user-card-actions {
    display: grid;
    gap: 5px;
}

.user-card-foot {
    padding: 6px 12px;
    border-top: 1px solid #eef2f7;
    background: rgba(248, 250, 252, 0.82);
}

.user-card-form {
    margin: 0;
}

.user-card-button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 30px;
    padding: 6px 9px;
    border: 1px solid #e8edf3;
    border-radius: 6px;
    background: #ffffff;
    color: #334155;
    text-decoration: none;
    font: inherit;
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
}

.user-card-button:hover:not(:disabled),
.user-card-button:focus-visible:not(:disabled) {
    color: #0f172a;
    background: #f8fafc;
    border-color: #dbe4ee;
    outline: none;
}

.user-card-button:disabled {
    opacity: 0.3;
    cursor: default;
}

.user-card-link {
    box-shadow: none;
}

.user-card-logout {
    justify-content: center;
    border-color: #eadfdf;
    color: #8a3131;
    background: #fffafa;
}

.user-card-logout:hover:not(:disabled),
.user-card-logout:focus-visible:not(:disabled) {
    color: #7a1f1f;
    background: #fff1f1;
    border-color: #e5caca;
}

.shell {
    width: 100%;
    flex: 1;
    min-height: 0;
    margin: 0 auto;
    padding: 0;
    display: flex;
    gap: 0;
    overflow: visible;
}

.shell.is-helper-collapsed .helper-sidebar {
    display: none;
}

.nav-rail {
    position: relative;
    z-index: 3;
    flex: 0 0 72px;
    width: 72px;
    min-width: 72px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    border-right: 1px solid #f6f6f6;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.7);
}

.nav-rail-head {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 13px 0 5px;
    background: transparent;
}

.nav-rail-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #6b7280;
}

.nav-rail-brand-logo {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.nav-rail-brand-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.nav-rail-body {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 14px;
    padding: 26px 8px 10px;
}

.nav-rail-foot {
    display: flex;
    justify-content: center;
    margin-top: auto;
    padding: 8px 8px 20px;
}

.nav-rail-link {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 62px;
    min-width: 56px;
    padding: 5px 2px 8px;
    border: 0;
    border-radius: 14px;
    color: #9ca3af;
    text-decoration: none;
    background: transparent;
    transition: background-color 0.16s ease, color 0.16s ease;
}

.nav-rail-link:hover,
.nav-rail-link:focus-visible {
    color: #6b7280;
    background: rgba(255, 255, 255, 0.82);
    outline: none;
}

.nav-rail-link.is-active,
.nav-rail-link[aria-current="page"] {
    color: var(--icon-primary);
    background: rgba(255, 255, 255, 0.92);
}

.nav-rail-icon {
    width: 32px;
    height: 32px;
}

.nav-rail-link:not(.is-active):not([aria-current="page"]) .nav-rail-icon {
    filter: grayscale(1) saturate(0);
    opacity: 0.82;
}

.nav-rail-link span {
    position: static;
    margin-top: 2px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.nav-rail-link span::before {
    content: none;
}

.login-error {
    margin-bottom: 12px;
    padding: 8px 10px;
    border: 1px solid #ececec;
    background: #fafafa;
    color: #7a3b3b;
    font-size: 12px;
}

.login-field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
    color: var(--muted);
}

.login-field input {
    height: 32px;
    padding: 0 34px 0 10px;
    border: 1px solid var(--line);
    background: #fcfcfc;
    color: var(--text);
    font: inherit;
}

.login-field input:focus {
    outline: none;
    border-color: #dcdcdc;
    background: #ffffff;
}

.login-field.is-invalid input {
    border-color: #e7b7b7;
    background: #fff7f7;
}

.field-valid-icon {
    position: absolute;
    top: 16px;
    right: 9px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: #2f6b45;
    pointer-events: none;
    transform: translateY(-50%);
}

.field-valid-icon svg {
    width: 14px;
    height: 14px;
    display: block;
}

.login-field.is-valid .field-valid-icon {
    display: inline-flex;
}

.field-hint {
    font-size: 11px;
    line-height: 1.4;
    color: var(--muted);
}

.login-field.is-invalid .field-hint {
    color: #a54848;
}

.auth-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--overlay);
    z-index: 30;
}

.auth-modal.is-open {
    display: flex;
}

.auth-dialog {
    width: min(360px, 100%);
    border: 1px solid var(--line);
    background: var(--panel);
    overflow: hidden;
}

.auth-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    background: #fbfbfb;
    font-size: 13px;
}

.auth-body {
    padding: 14px 12px 12px;
}

.auth-copy {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 12px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.code-editor-modal {
    z-index: 80;
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
}

.code-editor-dialog {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
}

@supports (height: 100dvh) {
    .code-editor-dialog {
        height: 100dvh;
        max-height: 100dvh;
    }
}

.code-editor-head {
    flex: 0 0 auto;
    align-items: center;
    padding: 8px 10px;
}

.code-editor-head-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.code-editor-head-meta strong {
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(42vw, 520px);
}

.code-editor-head-meta strong.is-dirty {
    color: #dc2626;
}

.code-editor-head-meta span {
    color: #64748b;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
}

.code-editor-head-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.code-editor-chip {
    display: inline;
    color: #64748b;
    font-size: 11px;
    white-space: nowrap;
}

.code-editor-chip span {
    color: #0f172a;
    font-weight: 400;
}

.code-editor-body {
    flex: 1 1 auto;
    min-height: 0;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
}

.code-editor-body .CodeMirror {
    height: 100%;
    font: 13px/1.6 Consolas, "SFMono-Regular", monospace;
}

#codeEditorTextarea {
    display: none;
}

.code-editor-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: #fbfbfb;
}

.code-editor-status {
    min-height: 18px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.code-editor-status.is-success {
    color: #166534;
}

.code-editor-status.is-error {
    color: #b91c1c;
}

.code-editor-foot-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.code-editor-confirm {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, 0.16);
    z-index: 2;
}

.code-editor-confirm-card {
    width: min(420px, calc(100vw - 40px));
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.14);
    padding: 14px 14px 12px;
}

.code-editor-confirm-card strong {
    display: block;
    font-size: 14px;
    color: #0f172a;
    margin-bottom: 6px;
}

.code-editor-confirm-card p {
    margin: 0;
    color: #475569;
    font-size: 13px;
    line-height: 1.5;
}

.code-editor-confirm-actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.app {
    position: relative;
    z-index: 2;
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.app-main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.productivity-main {
    padding: 16px 0 0 5px;
    gap: 14px;
    background: #ffffff;
    overflow: hidden;
}

.productivity-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.productivity-head-copy h1 {
    margin: 0 0 6px;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 500;
    color: #0f172a;
}

.productivity-head-copy p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}

.productivity-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    flex: 1 1 auto;
    gap: 0;
    height: 100%;
    min-height: 0;
    align-items: stretch;
}

.productivity-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    min-height: 0;
    padding: 0 5px 10px;
    overflow: hidden;
}

.productivity-section + .productivity-section {
    border-left: 0;
}

.productivity-section-head {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
    flex: 0 0 auto;
    min-height: 28px;
    padding-bottom: 4px;
}

.productivity-section-head strong {
    font-size: 15px;
    font-weight: 500;
    color: #111827;
}

.productivity-list {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 10px;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.productivity-list::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.productivity-list-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding-right: 12px;
    overflow: hidden;
}

.productivity-list-wrap .productivity-list-scrollbar {
    top: 4px;
    right: 2px;
    bottom: 4px;
}

.productivity-list-wrap:hover .productivity-list-scrollbar,
.productivity-list-scrollbar.is-active {
    opacity: 1;
}

.productivity-list-scrollbar .table-scrollbar-thumb {
    background: rgba(170, 170, 170, 0.28);
}

.productivity-list-scrollbar .table-scrollbar-thumb:hover {
    background: rgba(136, 136, 136, 0.42);
}

#noteList.productivity-list {
    gap: 0;
}

#todoList.productivity-list {
    gap: 0;
}

.productivity-search-field {
    gap: 6px;
}

.productivity-search-field--inline {
    flex: 1 1 auto;
    max-width: 180px;
    margin-left: 0;
    height: 28px;
}

.productivity-search-field--inline input {
    height: 28px;
}

.productivity-search-field span {
    display: none;
}

.productivity-search-field input {
    width: 100%;
    height: 28px;
    padding: 0 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #0f172a;
    font-size: 13px;
}

.productivity-search-field input::placeholder {
    color: #c5ccd6;
}

.productivity-search-field input:focus {
    outline: none;
    background: #f3f6fa;
}

.productivity-head-button {
    height: 28px;
    min-height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: 0;
    background: #f3f6fa;
    color: #475569;
    font: inherit;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
}

.productivity-head-button:hover:not(:disabled),
.productivity-head-button:focus-visible:not(:disabled) {
    background: #e9eef5;
    color: #0f172a;
    border-color: transparent;
    outline: none;
}

.productivity-filter-menu {
    position: relative;
    flex: 0 0 auto;
    width: 76px;
}

.productivity-filter-group {
    display: inline-flex;
    align-items: stretch;
    flex: 0 0 auto;
}

.productivity-filter-button {
    display: inline-flex;
    align-items: center;
    gap: 0;
    width: 100%;
    min-width: 76px;
    justify-content: flex-start;
}

.productivity-filter-group .productivity-filter-menu .productivity-filter-button {
    border-right: 0;
}

.productivity-filter-group .productivity-filter-menu .productivity-filter-button,
.productivity-filter-group .productivity-filter-manage-button {
    border-radius: 0;
}

.productivity-filter-group .productivity-filter-menu .productivity-filter-button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.productivity-filter-group .productivity-filter-manage-button {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    line-height: 0;
    justify-content: center;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.productivity-filter-group .productivity-filter-manage-button svg {
    width: 14px;
    height: 14px;
}

.productivity-filter-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    min-width: 76px;
    z-index: 40;
    padding: 0;
    border: 1px solid #e9eef5;
    background: rgba(255, 255, 255, 0.98);
}

.productivity-filter-option {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 28px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: #475569;
    font: inherit;
    font-size: 12px;
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.productivity-filter-option:hover,
.productivity-filter-option:focus-visible,
.productivity-filter-option.is-active {
    outline: none;
    background: #eef4fb;
    color: #0f172a;
}

.productivity-head-icon-button {
    margin-left: auto;
}

.productivity-head-toggle {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    margin-left: auto;
    padding: 0;
    background: transparent;
    border: 0;
    line-height: 0;
    color: #cbd5e1;
    cursor: pointer;
}

.productivity-head-toggle,
.productivity-head-toggle:hover:not(:disabled),
.productivity-head-toggle:focus-visible:not(:disabled),
.productivity-head-toggle.is-active,
.productivity-head-toggle[aria-pressed="true"],
.productivity-head-toggle.is-active:hover:not(:disabled),
.productivity-head-toggle.is-active:focus-visible:not(:disabled),
.productivity-head-toggle[aria-pressed="true"]:hover:not(:disabled),
.productivity-head-toggle[aria-pressed="true"]:focus-visible:not(:disabled) {
    background: transparent;
    border-color: transparent;
}

.productivity-head-toggle.is-active,
.productivity-head-toggle[aria-pressed="true"] {
    color: #27d294;
}

.productivity-head-toggle svg {
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.productivity-head-toggle:hover:not(:disabled),
.productivity-head-toggle:focus-visible:not(:disabled) {
    color: #94a3b8;
    outline: none;
}

.productivity-head-toggle.is-active:hover:not(:disabled),
.productivity-head-toggle.is-active:focus-visible:not(:disabled),
.productivity-head-toggle[aria-pressed="true"]:hover:not(:disabled),
.productivity-head-toggle[aria-pressed="true"]:focus-visible:not(:disabled) {
    color: #27d294;
}

.productivity-more-menu {
    margin-left: auto;
}

.productivity-more-button svg {
    width: 18px;
    height: 18px;
}

.productivity-more-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.productivity-more-dropdown {
    top: calc(100% + 6px);
    left: 50%;
    right: auto;
    min-width: 128px;
    transform: translateX(-50%) translateY(-3px);
}

.toolbar-more-menu.is-open .productivity-more-dropdown {
    transform: translateX(-50%) translateY(0);
}

.productivity-more-dropdown::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    width: 10px;
    height: 10px;
    border-top: 1px solid #e5e7eb;
    border-left: 1px solid #e5e7eb;
    background: rgba(255, 255, 255, 0.98);
    transform: translateX(-50%) rotate(45deg);
}

.productivity-more-item {
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    justify-content: flex-start;
}

.productivity-more-item:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

#toggleCompletedButton {
    margin-left: 4px;
}

.productivity-head-icon-button,
.productivity-head-icon-button:hover:not(:disabled),
.productivity-head-icon-button:focus-visible:not(:disabled),
.productivity-head-icon-button.is-active,
.productivity-head-icon-button[aria-pressed="true"] {
    color: #94a3b8;
}

.productivity-head-icon-button:hover:not(:disabled),
.productivity-head-icon-button:focus-visible:not(:disabled) {
    color: #64748b;
}

.productivity-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 6px 7px;
    border: 1px solid #e5e7eb;
    border-radius: 0;
    background: #ffffff;
    color: inherit;
    text-align: left;
    cursor: default;
}

.productivity-card:hover,
.productivity-card:focus-visible {
    border-color: #d7dfeb;
    background: #fbfcff;
    outline: none;
}

.productivity-card.is-active {
    border-color: #cbd5e1;
    background: #f8fafc;
    box-shadow: inset 0 0 0 1px rgba(203, 213, 225, 0.65);
}

.productivity-card.is-overdue {
    border-color: #fecaca;
    background: #fff7f7;
}

#todoList .productivity-card {
    padding: 8px 5px;
    border: 0;
}

#noteList .productivity-card {
    padding: 8px 8px;
    border: 0;
}

#noteList .productivity-card:nth-child(odd) {
    background: #fbfbfb;
}

#noteList .productivity-card:nth-child(even) {
    background: #ffffff;
}

#todoList .productivity-card:hover,
#todoList .productivity-card:focus-visible {
    border-color: transparent;
    background: #f3f6fa;
}

#todoList .productivity-card.is-active {
    border-color: transparent;
    box-shadow: none;
}

#todoList .productivity-card.is-overdue {
    border-color: transparent;
}

#todoList .productivity-card.is-done {
    opacity: 0.3;
}

.productivity-card strong {
    font-size: 14px;
    line-height: 1.2;
    font-weight: 500;
    color: #0f172a;
}

.productivity-card span {
    color: #64748b;
    font-size: 12px;
    line-height: 1.3;
}

.productivity-card-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.productivity-card-headline {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}

.productivity-card-titleline {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.productivity-note-category {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 8px;
    border: 1px solid #dbe4ee;
    background: #f8fbff;
    color: #466178;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}

.note-category-select-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.note-category-select-row select {
    flex: 1 1 auto;
    min-width: 0;
}

.note-category-inline-button {
    flex: 0 0 auto;
    min-width: auto;
    padding: 0 10px;
}

.productivity-card-summary-inline {
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(260px, 100%);
}

.productivity-card-summary {
    margin: 0;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
}

.productivity-note-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}

.productivity-note-item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 6px;
    border: 1px solid #edf2f7;
    border-radius: 0;
    background: #f8fafc;
    width: fit-content;
    max-width: 100%;
    flex: 0 1 auto;
}

.productivity-note-item:hover {
    border-color: #d7dfeb;
    background: #f1f5f9;
}

.productivity-note-item.is-copyable {
    cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.productivity-note-item.is-copyable:hover,
.productivity-note-item.is-copyable:focus-within {
    border-color: #cbd5e1;
    background: #eef6ff;
    box-shadow: inset 0 0 0 1px rgba(203, 213, 225, 0.55);
}

.productivity-note-item.is-empty {
    color: #64748b;
    font-size: 12px;
}

.productivity-note-item-title {
    color: #0f172a;
    font-size: 12px;
    line-height: 1.1;
    font-weight: 500;
    white-space: nowrap;
}

.productivity-note-item-content {
    color: #64748b;
    font-size: 12px;
    line-height: 1.1;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    min-width: 0;
    flex: 0 1 auto;
}

.productivity-card-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.productivity-card-main {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
    padding: 0 3px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: default;
}

.productivity-card-main.is-without-note {
    justify-content: center;
}

.productivity-card-main:focus-visible {
    outline: none;
}

.productivity-card-edit {
    flex: 0 0 auto;
    min-width: 52px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid #dbe4ee;
    border-radius: 999px;
    background: #ffffff;
    color: #475569;
    font: inherit;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.productivity-card-edit:hover,
.productivity-card-edit:focus-visible {
    outline: none;
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #0f172a;
}

.productivity-todo-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.productivity-todo-headline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.productivity-todo-titleline {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
    flex-wrap: nowrap;
}

.productivity-todo-titleline strong {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
}

.productivity-todo-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: 11px;
    line-height: 1;
}

.productivity-todo-due {
    flex: 0 0 auto;
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
    text-align: right;
    white-space: nowrap;
}

.productivity-todo-due.is-overdue {
    color: #b42318;
    font-weight: 600;
}

.productivity-todo-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #cbd5e1;
    cursor: pointer;
    transition: color 0.16s ease;
}

.productivity-todo-check svg {
    display: block;
    width: 18px;
    height: 18px;
}

.productivity-todo-check:hover,
.productivity-todo-check:focus-visible {
    color: #94a3b8;
    outline: none;
}

.productivity-todo-check.is-done {
    color: #27d294;
}

.productivity-empty {
    padding: 24px 12px;
    border: 1px dashed #d9e2ec;
    border-radius: 12px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.7;
    text-align: center;
    background: rgba(248, 250, 252, 0.76);
}

.is-modal-open {
    overflow: hidden;
}

.entry-modal-shell {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.entry-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.34);
}

.entry-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(620px, 100%);
    max-height: min(86vh, 100%);
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e7eb;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}

.entry-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 30px;
    padding: 5px 8px;
    border-bottom: 1px solid #eef2f7;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.92) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.entry-modal-title {
    font-size: 12px;
    line-height: 1.2;
    font-weight: 500;
    color: #0f172a;
}

.entry-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 0;
    background: #ffffff;
    color: #475569;
    font: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.entry-modal-close:hover,
.entry-modal-close:focus-visible {
    outline: none;
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #0f172a;
}

.entry-modal-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    overflow: auto;
}

.entry-modal-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    width: 100%;
}

.entry-modal-label {
    color: #475569;
    font-size: 12px;
    line-height: 1.2;
}

.todo-modal-field .entry-modal-label {
    display: none;
}

.todo-modal-due-picker {
    display: flex;
    align-items: stretch;
    width: 100%;
    border: 1px solid #e5e7eb;
    background: #ffffff;
}

.todo-modal-due-picker:focus-within {
    border-color: #d0d9e5;
}

.todo-modal-due-picker input[type="datetime-local"] {
    border: 0;
    border-right: 1px solid #e5e7eb;
}

.todo-modal-due-shortcuts {
    display: inline-flex;
    align-items: stretch;
    flex: 0 0 auto;
}

.todo-modal-due-shortcut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 28px;
    padding: 0 8px;
    border: 0;
    border-left: 1px solid #e5e7eb;
    background: #ffffff;
    color: #64748b;
    font: inherit;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.todo-modal-due-shortcut:hover,
.todo-modal-due-shortcut:focus-visible {
    outline: none;
    background: #f8fafc;
    color: #0f172a;
}

.entry-modal-field input[type="text"],
.entry-modal-field select,
.entry-modal-field textarea,
.entry-modal-field input[type="datetime-local"] {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 0;
    background: #ffffff;
    color: var(--text);
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
}

.entry-modal-field input[type="text"],
.entry-modal-field select,
.entry-modal-field input[type="datetime-local"] {
    height: 28px;
    padding: 4px 7px;
}

.entry-modal-field textarea {
    min-height: 48px;
    padding: 6px 7px;
    resize: vertical;
}

.entry-modal-field input[type="text"]:focus,
.entry-modal-field select:focus,
.entry-modal-field textarea:focus,
.entry-modal-field input[type="datetime-local"]:focus {
    outline: none;
    border-color: #d0d9e5;
    background: #ffffff;
}

.todo-modal-due-picker input[type="datetime-local"],
.todo-modal-due-picker input[type="datetime-local"]:focus {
    height: 28px;
    border: 0;
    border-right: 1px solid #e5e7eb;
    background: transparent;
}

.entry-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.entry-modal-grid--title-row {
    grid-template-columns: minmax(0, 1fr) 120px;
    align-items: end;
}

.entry-modal-field--category {
    width: 100%;
}

.entry-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.productivity-modal-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #e5e7eb;
    border-radius: 0;
    background: #ffffff;
    color: #64748b;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.productivity-modal-button--secondary:hover,
.productivity-modal-button--secondary:focus-visible {
    outline: none;
    border-color: #d4dbe5;
    background: #f8fafc;
    color: #0f172a;
}

.productivity-modal-button--primary {
    border-color: #111111;
    background: #111111;
    color: #ffffff;
}

.productivity-modal-button--primary:hover,
.productivity-modal-button--primary:focus-visible {
    outline: none;
    border-color: #2a2a2a;
    background: #2a2a2a;
}

.productivity-confirm-dialog {
    width: min(420px, 100%);
}

.productivity-confirm-form {
    gap: 14px;
}

.productivity-confirm-message {
    margin: 0;
    color: #334155;
    font-size: 12px;
    line-height: 1.6;
    white-space: pre-wrap;
}

.note-modal-dialog,
.todo-modal-dialog {
    width: min(620px, 100%);
}

.note-modal-head,
.todo-modal-head,
.note-modal-title,
.todo-modal-title,
.note-modal-close,
.todo-modal-close,
.note-modal-form,
.todo-modal-form,
.note-modal-field,
.todo-modal-field,
.note-modal-actions,
.todo-modal-actions,
.note-modal-cancel,
.todo-modal-cancel,
.note-modal-save,
.todo-modal-save {
}

.note-modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.note-modal-grid {
    grid-template-columns: minmax(0, 1fr);
}

.note-modal-grid.entry-modal-grid--title-row {
    grid-template-columns: minmax(0, 1fr) 120px;
}

.note-category-modal-dialog {
    width: min(520px, 100%);
}

.note-category-modal-form {
    gap: 14px;
}

.note-category-panel {
    display: flex;
    flex-direction: column;
    padding: 12px;
    border: 1px solid #e5e7eb;
    background: #fbfdff;
}

.note-category-editor-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    max-width: 420px;
}

.note-category-editor-row input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
}

.note-category-cancel-button,
.note-category-save-button {
    flex: 0 0 auto;
    min-width: 88px;
}

.note-category-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

.note-category-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 20px;
}

.note-category-section-head strong {
    color: #0f172a;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.note-category-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: min-content;
    gap: 8px;
    align-content: start;
    align-items: start;
    min-height: 120px;
    max-height: min(44vh, 360px);
    overflow: auto;
}

.note-category-empty {
    padding: 16px 14px;
    border: 1px dashed #d6dce4;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
    background: #fafcff;
}

.note-category-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    cursor: pointer;
}

.note-category-item.is-active {
    border-color: #c9d7e8;
    background: #f7fbff;
}

.note-category-item-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
    padding-right: 112px;
}

.note-category-item-name {
    color: #0f172a;
    font-size: 12px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.note-category-item-meta {
    color: #64748b;
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
}

.note-category-item-tools {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease;
}

.note-category-item:hover .note-category-item-tools,
.note-category-item:focus-within .note-category-item-tools {
    opacity: 1;
    pointer-events: auto;
}

.note-category-item-button {
    height: 24px;
    padding: 0 8px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #475569;
    font: inherit;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.note-category-item-button:hover,
.note-category-item-button:focus-visible {
    outline: none;
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #0f172a;
}

.note-modal-actions-main {
    display: flex;
    align-items: center;
    gap: 8px;
}

.note-modal-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.note-modal-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 9px;
    border: 1px solid #edf2f7;
    border-radius: 0;
    background: #fbfcfe;
}

.note-modal-item-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 146px;
    gap: 8px;
    align-items: stretch;
}

.note-modal-item-content {
    display: flex;
    min-width: 0;
    height: 100%;
}

.note-modal-item-content textarea {
    flex: 1 1 auto;
    height: 100%;
    min-height: 100%;
}

.note-modal-item .entry-modal-field input[type="text"],
.note-modal-item .entry-modal-field select {
    height: 28px;
    padding: 4px 7px;
    font-size: 12px;
}

.note-modal-item .entry-modal-field textarea {
    min-height: 48px;
    padding: 6px 7px;
    font-size: 12px;
}

.note-modal-item-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

.note-modal-item-tools {
    display: flex;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
    width: 100%;
}

.note-modal-item-type {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
}

.note-modal-item-remove {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    height: 28px;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 0;
    background: #ffffff;
    color: #64748b;
    font: inherit;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.note-modal-item-remove:hover,
.note-modal-item-remove:focus-visible {
    outline: none;
    border-color: #d4dbe5;
    background: #f8fafc;
    color: #0f172a;
}


.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 12px 2px;
    height: 38px;
    background: var(--panel);
}

.table-region {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 0;
    position: relative;
}

.table-region.is-dragover::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px dashed #93c5fd;
    background: rgba(219, 234, 254, 0.45);
    pointer-events: none;
    z-index: 2;
}

.table-region.is-dragover::before {
    content: "Drop files to add them to upload list";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: #6b7280;
    font-size: 18px;
    line-height: 1.3;
    text-align: center;
    pointer-events: none;
    z-index: 3;
}

.table-main {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.table-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 26px;
    padding: 0 12px 2px;
}

.table-statusbar-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.table-status-pill {
    color: #b0bbcd;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
}

.table-statusbar-info {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    min-width: 0;
    color: #b0bbcd;
    font-size: 11px;
    line-height: 1.2;
    text-align: right;
}

.table-statusbar-info span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selection-layer {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    overflow: hidden;
}

.helper-sidebar {
    position: relative;
    z-index: 1;
    flex: 0 0 220px;
    width: 220px;
    max-width: 220px;
    min-width: 220px;
    border: 0;
    border-left: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: linear-gradient(180deg, rgba(252, 253, 254, 0.98) 0%, rgba(247, 249, 252, 0.98) 100%);
    padding: 0;
    overflow: auto;
}

.helper-card {
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
}

.helper-card:last-child {
    border-bottom: 0;
}

.helper-card-head {
    padding: 12px 14px 6px;
}

.helper-card-head-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 39px;
    padding: 12px 14px 6px;
    background: transparent;
}

.helper-user-search {
    flex: 0 1 140px;
    width: 140px;
    min-width: 0;
}

.helper-user-search-input {
    width: 100%;
}

.toolbar-search-popover {
    position: relative;
    flex: 0 0 auto;
}

.toolbar-more-menu {
    position: relative;
    flex: 0 0 auto;
}

.toolbar-more-button {
    position: relative;
}

.toolbar-more-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    min-width: 120px;
    padding: 6px;
    display: grid;
    gap: 4px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(-3px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
    z-index: 40;
}

.toolbar-more-menu.is-open .toolbar-more-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.toolbar-more-item {
    display: flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 6px;
    color: #334155;
    text-decoration: none;
    font-size: 12px;
    white-space: nowrap;
}

.toolbar-more-item:hover,
.toolbar-more-item:focus-visible {
    background: #f8fafc;
    color: #0f172a;
    outline: none;
}

.search-floating-toolbar {
    position: fixed;
    top: 0;
    left: 0;
    width: min(220px, calc(100vw - 16px));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease, visibility 0.16s ease;
    z-index: 80;
}

.search-floating-toolbar.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.search-floating-toolbar-panel {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.search-floating-input {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 6px;
    background: #ffffff;
}

.search-floating-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--toolbar-control-height);
    width: var(--toolbar-control-height);
    min-width: var(--toolbar-control-height);
    height: var(--toolbar-control-height);
    padding: 0;
    line-height: 0;
    border: 1px solid #e8edf3;
    border-radius: 6px;
    background: #ffffff;
}

.search-floating-close .icon {
    display: block;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin: 0;
}

.search-floating-close:hover:not(:disabled),
.search-floating-close:focus-visible:not(:disabled) {
    border-color: #dbe4ee;
    background: #f8fafc;
}

.helper-card-head strong {
    font-size: 13px;
    font-weight: 400;
    color: var(--muted);
}

.helper-card-body {
    padding: 4px 14px 14px;
}

.helper-storage-value {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    word-break: break-word;
}

.helper-user-card {
    position: relative;
    z-index: 5;
    border-bottom: 0;
}

.user-menu-nav {
    flex: 0 0 38px;
    min-width: 38px;
    width: 38px;
    height: 38px;
}

.user-menu-nav .user-avatar {
    width: 38px;
    height: 38px;
    border: 0;
}

.user-menu-nav .user-avatar-default {
    width: 22px;
    height: 22px;
}

.user-menu-nav .user-card {
    top: auto;
    right: auto;
    bottom: calc(100% + 6px);
    left: -6px;
    transform: none;
}

.user-menu-nav::after {
    top: auto;
    bottom: 100%;
    left: 0;
    width: 38px;
    height: 12px;
}

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.toolbar-inline {
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

.manage-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-left: 2px;
}

.view-toggle-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    height: var(--toolbar-control-height);
    min-height: var(--toolbar-control-height);
    min-width: var(--toolbar-control-height);
    width: var(--toolbar-control-height);
    border: 0;
    border-radius: 7px;
    background: var(--panel);
    color: var(--muted);
    cursor: pointer;
    padding: 0;
}

.view-toggle-button:hover:not(:disabled),
.view-toggle-button:focus-visible:not(:disabled) {
    color: var(--text);
    background: #f6f6f6;
    border-color: #e5e5e5;
    outline: none;
}

.view-toggle-icon {
    width: 24px;
    height: 24px;
    display: block;
    opacity: 0.72;
}

.view-toggle-icon-thumb { display: none; }
html[data-view-mode="thumb"] .view-toggle-icon-list { display: none; }
html[data-view-mode="thumb"] .view-toggle-icon-thumb { display: block; }

.view-toggle-button:hover .view-toggle-icon,
.view-toggle-button:focus-visible .view-toggle-icon { opacity: 1; }

.toolbar-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 0 1 auto;
}

.toolbar-field-plain {
    gap: 0;
}

.toolbar-field-compact {
    flex: 0 0 96px;
}

.toolbar-label {
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--muted);
}

.toolbar-input,
.toolbar-select {
    width: 100%;
    height: var(--toolbar-control-height);
    padding: 0 7px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: #fcfcfc;
    color: var(--text);
    font: inherit;
    font-size: 13px;
}

.toolbar-inline .toolbar-input {
    width: 136px;
}

#sortSelect {
    color: #8f8f8f;
}

.toolbar-input:focus,
.toolbar-select:focus {
    outline: none;
    border-color: #dcdcdc;
    background: #ffffff;
}

.pathbar {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
}

.pathbar-back-button,
.toolbar-icon-button,
.modal-close-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--panel);
    color: var(--muted);
    cursor: pointer;
    padding: 0;
}

.pathbar-back-button:hover:not(:disabled),
.pathbar-back-button:focus-visible:not(:disabled),
.toolbar-icon-button:hover:not(:disabled),
.toolbar-icon-button:focus-visible:not(:disabled),
.modal-close-button:hover:not(:disabled),
.modal-close-button:focus-visible:not(:disabled) {
    color: var(--text);
    background: #f6f6f6;
    border-color: #e5e5e5;
    outline: none;
}

.pathbar-back-button {
    flex: 0 0 var(--toolbar-control-height);
    width: var(--toolbar-control-height);
    min-width: var(--toolbar-control-height);
    height: var(--toolbar-control-height);
    border: 0;
}

.modal-close-button {
    width: 20px;
    min-width: 20px;
    height: 20px;
}

.toolbar-action-button,
.toolbar-icon-button {
    height: var(--toolbar-control-height);
    min-height: var(--toolbar-control-height);
    font-size: 12px;
}

.toolbar-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--panel);
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
}

.toolbar-action-button:hover:not(:disabled),
.toolbar-action-button:focus-visible:not(:disabled) {
    color: var(--text);
    background: #f6f6f6;
    border-color: #e5e5e5;
    outline: none;
}

.toolbar-icon-button {
    width: var(--toolbar-control-height);
    min-width: var(--toolbar-control-height);
    border: 0;
    background: transparent;
}

.toolbar-icon-button:hover:not(:disabled),
.toolbar-icon-button:focus-visible:not(:disabled) {
    border-color: transparent;
    background: #f2f2f2;
}

.toolbar-icon-button.is-active {
    color: var(--text);
    background: #f2f2f2;
}

.toolbar-icon-button .icon {
    width: 24px;
    height: 24px;
}

#uploadButton .icon,
#newFolderButton .icon,
#refreshButton .icon,
#searchToggleButton .icon,
#viewModeToggleButton .view-toggle-icon,
#toggleHelperSidebarButton .icon {
    opacity: 0.5;
}

#refreshButton .icon { transform: rotate(180deg) scaleX(-1); }

#uploadButton:hover:not(:disabled) .icon,
#uploadButton:focus-visible:not(:disabled) .icon,
#newFolderButton:hover:not(:disabled) .icon,
#newFolderButton:focus-visible:not(:disabled) .icon,
#refreshButton:hover:not(:disabled) .icon,
#refreshButton:focus-visible:not(:disabled) .icon,
#searchToggleButton:hover:not(:disabled) .icon,
#searchToggleButton:focus-visible:not(:disabled) .icon,
#searchToggleButton.is-active .icon,
#viewModeToggleButton:hover:not(:disabled) .view-toggle-icon,
#viewModeToggleButton:focus-visible:not(:disabled) .view-toggle-icon,
#toggleHelperSidebarButton:hover:not(:disabled) .icon,
#toggleHelperSidebarButton:focus-visible:not(:disabled) .icon {
    opacity: 1;
}

.pathbar-back-button .icon {
    width: 24px;
    height: 24px;
}

.pathtext {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    min-width: 0;
    margin-left: 2px;
    color: var(--muted);
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
}

.crumb-link,
.crumb-current {
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
}

.crumb-link,
.crumb-separator {
    flex: 0 0 auto;
}

.crumb-current {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crumb-link:hover {
    color: var(--text);
}

.crumb-separator {
    margin: 0 8px;
    color: #a0a0a0;
    white-space: nowrap;
}

.table-wrap {
    position: relative;
    height: 100%;
    padding: 0 12px 24px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.table-wrap.initial-loading {
    visibility: hidden;
}

.table-wrap::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.selection-box {
    position: absolute;
    border: 1px solid rgba(73, 136, 255, 0.85);
    background: rgba(73, 136, 255, 0.18);
    pointer-events: none;
}

.table-scrollbar {
    position: absolute;
    top: 8px;
    right: 3px;
    bottom: 8px;
    width: 6px;
    opacity: 0;
    transition: opacity 0.16s ease;
    pointer-events: none;
}

.table-region:hover .table-scrollbar,
.table-scrollbar.is-active {
    opacity: 1;
}

.table-scrollbar-thumb {
    width: 100%;
    min-height: 36px;
    border-radius: 999px;
    background: rgba(170, 170, 170, 0.38);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
    pointer-events: auto;
    cursor: pointer;
    transition: background-color 0.14s ease;
}

.table-scrollbar-thumb:hover {
    background: rgba(136, 136, 136, 0.58);
}

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.thumb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 126px);
    justify-content: start;
    gap: 4px 6px;
    padding: 4px 0 0;
}

.thumb-grid.is-empty-state {
    min-height: 100%;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    justify-content: center;
    gap: 0;
    padding-top: 0;
}

.thumb-grid.is-layout-pending {
    visibility: hidden;
}

.thumb-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 126px;
    padding: 4px 4px 6px;
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    transition: border-color 0.14s ease, background-color 0.14s ease, box-shadow 0.14s ease;
}

.thumb-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
}

.thumb-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: center;
    cursor: pointer;
}

.thumb-main:focus-visible {
    outline: none;
}

.thumb-preview,
.thumb-preview-image {
    width: 100%;
    height: 108px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 3px;
    background: transparent;
    overflow: hidden;
}

.thumb-preview-image {
    position: relative;
    background: transparent;
    align-items: flex-end;
}

.thumb-preview-image.is-loaded {
    background: transparent;
}

.thumb-preview .icon {
    width: 72px;
    height: 72px;
}

.thumb-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center bottom;
    padding: 4px;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.thumb-preview-image.is-loaded .thumb-image {
    opacity: 1;
}

.thumb-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-width: 0;
    width: 100%;
}

.thumb-name {
    min-width: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    max-width: 100%;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.thumb-subtitle {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.thumb-empty {
    grid-column: 1 / -1;
    min-height: 220px;
    width: 100%;
}

.thumb-card:hover,
.thumb-card:focus-within {
    border-color: transparent;
    background: #eaf3ff;
    box-shadow: none;
}

.thumb-card.is-selected {
    border-color: transparent;
    border-radius: 0;
    background: #dbeafe;
    box-shadow: none;
}

td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
    text-align: left;
}

.size-col,
td.size-col {
    text-align: right;
    width: 96px;
    white-space: nowrap;
    color: #9a9a9a;
}

.modified-col,
td.modified-col {
    width: 156px;
    white-space: nowrap;
    text-align: right;
    color: #9a9a9a;
}

tbody tr:nth-child(odd) {
    background: #ffffff;
}

tbody tr:nth-child(even) {
    background: #fcfcfc;
}

tbody tr.is-selected {
    background: #dbeafe;
}

tbody tr:hover:not(.is-selected),
tbody tr:focus-within:not(.is-selected) {
    background: #eaf3ff;
}



.entry-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    gap: 10px;
}

.entry-main {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.file-entry {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.file-icon-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: #8a8a8a;
    text-decoration: none;
    flex: 0 0 auto;
    border-radius: 3px;
    transition: color 0.14s ease, background-color 0.14s ease, transform 0.14s ease;
}

.file-type-icon,
.file-download-icon {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.14s ease;
}

.file-type-icon {
    opacity: 1;
}

.file-download-icon {
    opacity: 0;
}

.entry-main:hover .entry-label,
.entry-label:hover {
    opacity: 0.68;
}

.entry-label {
    display: inline-block;
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
    color: inherit;
    text-decoration: none;
}

html[data-view-mode="list"] .entry-label {
    font-size: 13px;
}

.icon {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: var(--icon-primary);
}

.folder-icon {
    color: #6c6c6c;
}

.download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    text-decoration: none;
    flex: 0 0 auto;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.manage-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.manage-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 18px;
    padding: 0 6px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 11px;
    white-space: nowrap;
}

.manage-btn:hover:not(:disabled),
.manage-btn:focus-visible:not(:disabled),
.upload-item-remove:hover:not(:disabled),
.upload-item-remove:focus-visible:not(:disabled) {
    color: var(--text);
    background: #f7f7f7;
    border-color: #e3e3e3;
}

tbody tr:hover .manage-actions,
tbody tr:focus-within .manage-actions {
    opacity: 1;
    pointer-events: auto;
}

.file-icon-link:hover,
.file-icon-link:focus-visible {
    color: #4f4f4f;
    background: #eeeeee;
    transform: scale(1.06);
}

.file-icon-link:hover .file-type-icon,
.file-icon-link:focus-visible .file-type-icon {
    opacity: 0;
}

.file-icon-link:hover .file-download-icon,
.file-icon-link:focus-visible .file-download-icon {
    opacity: 1;
}

.action-dialog {
    width: min(380px, 100%);
}

.move-dialog {
    width: min(760px, calc(100vw - 48px));
    min-height: 460px;
    height: min(72vh, 640px);
    display: flex;
    flex-direction: column;
}

.move-body {
    flex: 1 1 auto;
    min-height: 380px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.move-target-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.move-target-row .modal-secondary-button {
    flex: 0 0 auto;
}

.move-target-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    background: #fafafa;
    font-size: 12px;
    color: #64748b;
}

.move-target-info strong {
    color: #111827;
    font-size: 12px;
    font-weight: 600;
    word-break: break-all;
}

.move-directory-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
    border: 1px solid #e5e7eb;
    background: #ffffff;
}

.move-directory-empty {
    padding: 12px;
    font-size: 12px;
    color: #6b7280;
}

.move-directory-item {
    width: 100%;
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-bottom: 1px solid #f1f5f9;
    background: #ffffff;
    color: #334155;
    font: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}

.move-directory-item:last-child {
    border-bottom: 0;
}

.move-directory-item:hover,
.move-directory-item:focus-visible {
    background: #f8fafc;
    color: #0f172a;
    outline: none;
}

.move-body .action-buttons {
    margin-top: auto;
    justify-content: flex-end;
    align-items: center;
}

.move-selection-summary {
    margin-right: 10px;
    color: #64748b;
    font-size: 12px;
    text-align: left;
}

.move-inline-error {
    min-width: 0;
    margin-right: auto;
    color: #a54848;
    font-size: 12px;
    line-height: 1.2;
    text-align: left;
}

.upload-dialog {
    width: min(640px, 100%);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.upload-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    flex: 1 1 auto;
}

.share-dialog {
    width: min(460px, 100%);
}

.share-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.share-body .auth-form {
    --share-inline-control-width: 214px;
}

.share-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

.share-body .login-field input,
.share-body .login-field select {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--line);
    background: #fcfcfc;
    color: var(--text);
    font: inherit;
    font-size: 12px;
}

.share-body .login-field input:focus,
.share-body .login-field select:focus {
    outline: none;
    border-color: #dcdcdc;
    background: #ffffff;
}

.share-inline-row {
    display: grid;
    grid-template-columns: auto max-content;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.share-inline-main {
    min-width: 0;
    width: var(--share-inline-control-width);
    max-width: 100%;
}

.share-inline-main input {
    width: 100%;
}

.share-inline-side {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

.share-inline-row--expire {
    gap: 0;
}

.share-inline-row--expire .share-inline-main input {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.share-inline-side--expire {
    align-self: stretch;
}

.share-segmented {
    display: inline-flex;
    width: 100%;
    min-height: 32px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fcfcfc;
    overflow: hidden;
}

.share-segmented-button {
    flex: 1 1 0;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #7b8798;
    font: inherit;
    font-size: 12px;
    line-height: 1;
    transition: background-color 160ms ease, color 160ms ease;
}

.share-segmented-button + .share-segmented-button {
    border-left: 1px solid var(--line);
}

.share-segmented-button:hover,
.share-segmented-button:focus-visible {
    background: #f5f7fb;
    color: #4f5d73;
    outline: none;
}

.share-segmented-button.is-active {
    background: #eef3f9;
    color: #27364a;
}

.share-expire-shortcuts {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    justify-content: flex-end;
    min-height: 32px;
    padding: 0 6px;
    border: 1px solid var(--line);
    border-left: 0;
    border-radius: 0;
    background: #fcfcfc;
}

.share-expire-shortcut {
    min-width: 0;
    height: 24px;
    padding: 0 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #64748b;
    font: inherit;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
}

.share-expire-shortcut:hover,
.share-expire-shortcut:focus-visible {
    background: #ffffff;
    color: #475569;
    outline: none;
}

.share-body .checkbox-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
}

.share-body .checkbox-field input {
    width: 14px;
    height: 14px;
    margin: 0;
}

.share-inline-checkbox {
    white-space: nowrap;
}

.share-target-summary {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid #eef2f7;
    background: #fafbfd;
    color: #475569;
}

.share-target-summary strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 400;
}

.share-create-result {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #eef2f7;
    background: #fafbfd;
}

.share-copy-field,
.share-copy-inline,
.share-code-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.share-copy-field input,
.share-copy-inline .share-inline-input {
    flex: 1 1 auto;
    min-width: 0;
}

.share-code-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #475569;
    font-size: 12px;
}

.share-code-result strong {
    color: #0f172a;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.08em;
}

.share-result-hint,
.share-manage-link {
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
}

.share-manage-link {
    text-decoration: none;
}

@media (max-width: 640px) {
    .share-body .auth-form {
        --share-inline-control-width: 100%;
    }

    .share-form-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .share-inline-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .share-inline-row--expire {
        gap: 10px;
    }

    .share-inline-row--expire .share-inline-main input {
        border-right: 1px solid var(--line);
        border-top-right-radius: 9px;
        border-bottom-right-radius: 9px;
    }

    .share-inline-side {
        justify-content: flex-start;
    }

    .share-expire-shortcuts {
        flex-wrap: wrap;
        justify-content: flex-start;
        border-left: 1px solid var(--line);
        border-radius: 0;
        padding: 6px;
    }
}

.share-copy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    height: 28px;
    padding: 0 10px;
    border: 1px solid #dbe4ee;
    background: #ffffff;
    color: #475569;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

.share-copy-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.action-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.modal-secondary-button,
.modal-primary-button {
    height: 32px;
    min-width: 72px;
    padding: 0 12px;
    font-size: 12px;
}

.modal-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--muted);
    cursor: pointer;
}

.modal-secondary-button:hover:not(:disabled),
.modal-secondary-button:focus-visible:not(:disabled) {
    color: var(--text);
    background: #f6f6f6;
    border-color: #e5e5e5;
    outline: none;
}

.modal-primary-button {
    border: 1px solid var(--line);
    background: #111111;
    color: #ffffff;
    cursor: pointer;
}

.modal-primary-button:hover:not(:disabled),
.modal-primary-button:focus-visible:not(:disabled) {
    background: #2a2a2a;
    border-color: #2a2a2a;
    outline: none;
}

.upload-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.upload-actions {
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
}

.upload-limit-hint {
    flex: 1 1 auto;
    min-width: 0;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upload-submit-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.upload-list {
    position: relative;
    min-height: 168px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--line);
    background: #fcfcfc;
}

.upload-list.is-dragover {
    border-color: rgba(72, 127, 255, 0.38);
    background: #f8fbff;
    box-shadow: inset 0 0 0 999px rgba(72, 127, 255, 0.08);
}

.upload-list.is-dragover::after {
    content: "松开以添加文件";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(72, 127, 255, 0.9);
    color: #2f4fa8;
    font-size: 15px;
    font-weight: 500;
    pointer-events: none;
}

.upload-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 166px;
    padding: 16px;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

.upload-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px 56px minmax(0, 160px) 52px;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
}

.upload-item:last-child {
    border-bottom: 0;
}

.upload-item:nth-child(odd) {
    background: #ffffff;
}

.upload-item:nth-child(even) {
    background: #f5f5f5;
}

.upload-item-name {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}

.upload-item-main {
    min-width: 0;
}

.upload-item-meta {
    flex: 0 0 auto;
    color: var(--muted);
    white-space: nowrap;
    text-align: right;
}

.upload-item-progress {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.upload-status-text {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.upload-status-text.is-error {
    color: #b42318;
}

.upload-status-text.is-success {
    color: #067647;
}

.upload-item-remove {
    flex: 0 0 auto;
    min-width: 24px;
    height: 18px;
    padding: 0 6px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 11px;
}

.preview-actions .download-btn {
    position: static;
    width: 20px;
    height: 20px;
    opacity: 1;
    pointer-events: auto;
}

.preview-action-button,
.preview-action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--muted);
    text-decoration: none;
    cursor: pointer;
    padding: 0;
}

.preview-action-button:hover:not(:disabled),
.preview-action-button:focus-visible:not(:disabled),
.preview-action-link:hover,
.preview-action-link:focus-visible {
    color: var(--text);
    background: #f6f6f6;
    border-color: #e5e5e5;
    outline: none;
}

.preview-action-button .icon,
.preview-action-link .icon {
    width: 16px;
    height: 16px;
}

.download-btn:hover,
.download-btn:focus-visible {
    color: var(--text);
}

.preview-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--overlay);
    z-index: 20;
}

.preview-modal.is-open {
    display: flex;
}

.preview-dialog {
    width: min(920px, 100%);
    height: min(78vh, 760px);
    background: var(--panel);
    border: 1px solid var(--line);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.preview-page-mode .nav-rail,
.preview-page-mode .app,
.preview-page-mode .helper-sidebar {
    display: none;
}

.preview-page-mode .shell {
    padding: 0;
}

.preview-page-mode .preview-modal.preview-modal--page {
    position: relative;
    inset: auto;
    display: flex;
    flex: 1 1 auto;
    padding: 0;
    background: #f3f4f6;
}

.preview-page-mode .preview-dialog.preview-dialog--page {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border: 0;
}

.preview-page-mode .preview-dialog--page .preview-card {
    box-shadow: none;
}

.preview-dialog--image {
    --preview-image-max-width: min(calc(100vw - 48px), 1440px);
    --preview-image-max-height: calc(100vh - 48px);
    --preview-image-content-max-height: var(--preview-image-max-height);
    width: var(--preview-image-dialog-width, auto);
    height: var(--preview-image-dialog-height, auto);
    max-width: var(--preview-image-max-width);
    max-height: var(--preview-image-max-height);
    background: #0f1113;
    border-color: transparent;
    border-width: 0;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
}

.preview-dialog--document {
    width: min(980px, 100%);
    height: min(84vh, 860px);
}

.preview-dialog--audio {
    width: min(620px, 100%);
    height: min(420px, 100%);
}

.preview-dialog--video {
    width: min(1120px, 100%);
    height: min(84vh, 820px);
    background: #111315;
    border-color: #1e2329;
}

.preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 36px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--line);
    background: #fbfbfb;
}

.preview-dialog--video .preview-head {
    border-bottom-color: #242a31;
    background: #161a1f;
}

.preview-dialog--image .preview-head {
    display: none;
}

.preview-meta {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.preview-meta strong {
    display: block;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 1 auto;
}

.preview-meta span {
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
}

.preview-dialog--video .preview-meta strong {
    color: #f3f4f6;
}

.preview-dialog--video .preview-meta span {
    color: #a6adb8;
}

.preview-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.preview-body {
    flex: 1;
    min-height: 0;
    padding: 0;
}

.preview-dialog--video .preview-body {
    padding: 0;
}

.preview-dialog--image .preview-body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--preview-image-display-height, auto);
    min-height: 0;
    padding: 0;
    max-height: var(--preview-image-content-max-height);
    background: #0f1113;
}

.preview-dialog--document .preview-body {
    padding: 0;
    background: #f3f4f6;
    -webkit-user-select: text;
    user-select: text;
}

.preview-dialog--audio .preview-body {
    padding: 0;
    background: linear-gradient(180deg, #f7f8fa 0%, #eef2f7 100%);
}

.preview-card {
    width: 100%;
    height: 100%;
    border: 1px solid var(--line);
    background: var(--panel);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#productivityConfirmModal {
    z-index: 1400;
}

.preview-card--image,
.preview-card--video {
    border: 0;
    background: #0f1113;
}

.preview-card--image {
    width: var(--preview-image-display-width, auto);
    height: var(--preview-image-display-height, auto);
    max-width: var(--preview-image-max-width);
    max-height: var(--preview-image-content-max-height);
    background: #0f1113;
    box-shadow: none;
}

.preview-card--document {
    border-color: #e5e7eb;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
    -webkit-user-select: text;
    user-select: text;
}

.preview-card--audio {
    border-color: #dde3ea;
    background: linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%);
    align-items: stretch;
    justify-content: stretch;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

.placeholder,
.empty {
    color: var(--muted);
    font-size: 13px;
    text-align: center;
    padding: 24px;
}

.empty-state {
    display: flex;
    min-height: 220px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
}

.empty-state-image {
    width: 160px;
    max-width: 42vw;
    height: auto;
    opacity: 0.95;
    pointer-events: none;
    user-select: none;
}

.empty-state-text {
    margin: 0;
    color: #cbd5e1;
}

.placeholder-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.inline-download-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--line);
    color: var(--text);
    text-decoration: none;
    background: #fafafa;
    white-space: nowrap;
}

.inline-download-link:hover,
.inline-download-link:focus-visible {
    background: #f2f2f2;
    border-color: #dcdcdc;
}

.text-preview {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 16px;
    overflow: auto;
    font: 13px/1.6 Consolas, "SFMono-Regular", monospace;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--panel);
    -webkit-user-select: text;
    user-select: text;
}

.markdown-preview {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 18px 20px;
    color: var(--text);
    background: var(--panel);
    line-height: 1.65;
    font-size: 14px;
    -webkit-user-select: text;
    user-select: text;
}

.markdown-preview > :first-child {
    margin-top: 0;
}

.markdown-preview > :last-child {
    margin-bottom: 0;
}

.markdown-preview h1,
.markdown-preview h2,
.markdown-preview h3,
.markdown-preview h4,
.markdown-preview h5,
.markdown-preview h6 {
    margin: 1.25em 0 0.6em;
    line-height: 1.3;
}

.markdown-preview p,
.markdown-preview ul,
.markdown-preview ol,
.markdown-preview blockquote,
.markdown-preview pre,
.markdown-preview table {
    margin: 0 0 1em;
}

.markdown-preview ul,
.markdown-preview ol {
    padding-left: 1.5em;
}

.markdown-preview blockquote {
    margin-left: 0;
    padding-left: 12px;
    border-left: 3px solid #dbe2ea;
    color: var(--muted);
}

.markdown-preview code {
    padding: 0.15em 0.35em;
    background: #f5f6f8;
    font-family: "Cascadia Code", "Consolas", monospace;
    font-size: 12px;
}

.markdown-preview pre {
    padding: 12px 14px;
    overflow: auto;
    background: #f5f6f8;
}

.markdown-preview pre code {
    padding: 0;
    background: transparent;
}

.markdown-preview table {
    width: 100%;
    border-collapse: collapse;
}

.markdown-preview th,
.markdown-preview td {
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: top;
}

.markdown-preview a {
    color: #2563eb;
    text-decoration: none;
}

.markdown-preview a:hover,
.markdown-preview a:focus-visible {
    text-decoration: underline;
}

.markdown-preview img {
    max-width: 100%;
    height: auto;
}

.media-preview,
.pdf-preview {
    width: 100%;
    height: 100%;
    border: 0;
    background: #f8f8f8;
}

.pdf-preview-shell {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #f4f6f8 0%, #edf1f5 100%);
}

.pdf-preview-progress-track {
    position: relative;
    overflow: hidden;
    width: min(320px, 72vw);
    height: 7px;
    border-radius: 999px;
    background: #dfe6ee;
}

.pdf-preview-progress-bar {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #5088ff 0%, #7aa8ff 100%);
    transition: width 180ms ease;
}

.pdf-preview-progress-bar.is-indeterminate {
    width: 36%;
    animation: pdf-preview-progress-indeterminate 1.1s ease-in-out infinite alternate;
}

.pdf-preview-pages {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 8px 8px 12px;
}

.pdf-preview-document {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.pdf-preview-loading {
    min-height: 100%;
    display: grid;
    place-items: center;
    padding: 24px;
}

.pdf-preview-loading-card {
    width: min(360px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}

.pdf-preview-loading-card strong {
    color: #2b3645;
    font-size: 14px;
    font-weight: 600;
}

.pdf-preview-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
}

.pdf-preview-page--placeholder .pdf-preview-page-label {
    opacity: 0.7;
}

.pdf-preview-page-skeleton {
    width: min(100%, 840px);
    border: 1px dashed #d7dee7;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.48) 50%, rgba(255,255,255,0.18) 100%),
        linear-gradient(180deg, #eef2f6 0%, #e7edf4 100%);
    background-size: 200% 100%, 100% 100%;
    border-radius: 12px;
    animation: pdf-preview-skeleton-shimmer 1.25s ease-in-out infinite;
}

.pdf-preview-canvas {
    display: block;
    max-width: 100%;
    height: auto;
    background: #ffffff;
    border: 1px solid #dde3ea;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

.pdf-preview-page-label {
    color: #6b7280;
    font-size: 12px;
}

.pdf-preview-fallback {
    min-height: 100%;
}

@keyframes pdf-preview-progress-indeterminate {
    from {
        transform: translateX(-22%);
    }
    to {
        transform: translateX(146%);
    }
}

@keyframes pdf-preview-skeleton-shimmer {
    from {
        background-position: 180% 0, 0 0;
    }
    to {
        background-position: -20% 0, 0 0;
    }
}

.preview-card--audio .media-preview {
    padding: 20px;
    background: transparent;
}

.image-preview {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: transparent;
}

.preview-card--image .image-preview {
    display: block;
    width: var(--preview-image-display-width, auto);
    height: var(--preview-image-display-height, auto);
    background: #0f1113;
    max-width: var(--preview-image-max-width);
    max-height: var(--preview-image-content-max-height);
}

.preview-card--video .media-preview,
.preview-card--video .pdf-preview {
    background: #0f1113;
}

.loading {
    opacity: 0.6;
    pointer-events: none;
}

.auth-page {
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(17, 24, 39, 0.08), transparent 28%),
        linear-gradient(180deg, #f6f6f6 0%, #eceff3 100%);
}

body.is-desktop-client.auth-page {
    flex-direction: column;
}

/* 桌面客户端：带左侧导航的 auth 页面统一使用该网格布局，避免纵向 flex 使左轨尺寸异常。 */
body.is-desktop-client.auth-page.has-nav-layout {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: var(--desktop-titlebar-height) minmax(0, 1fr);
    grid-template-areas:
        "titlebar titlebar"
        "nav main";
    overflow: hidden;
}

body.is-desktop-client.auth-page.has-nav-layout > .desktop-client-titlebar {
    grid-area: titlebar;
}

body.is-desktop-client.auth-page.has-nav-layout > .nav-rail {
    grid-area: nav;
    width: 56px;
    min-width: 56px;
    max-width: 56px;
    min-height: 0;
    align-self: stretch;
}

body.is-desktop-client.auth-page.has-nav-layout > main {
    grid-area: main;
    min-width: 0;
    min-height: 0;
    overflow: auto;
}

.auth-page-shell {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    overflow: auto;
}

.auth-page-card {
    width: min(420px, 100%);
    padding: 28px 24px;
    border: 1px solid #e5e7eb;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
}

.auth-page-copy {
    margin-bottom: 18px;
}

.auth-page-card-flow {
    width: min(460px, 100%);
}

.auth-step-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.auth-invite-benefit {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    background: #fafafa;
}

.auth-invite-benefit.is-empty {
    display: none;
}

.auth-invite-benefit-title {
    font-size: 12px;
    font-weight: 600;
    color: #111111;
}

.auth-invite-benefit-text {
    color: #6b7280;
    font-size: 12px;
    line-height: 1.5;
}

.auth-display-name-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 20px;
    color: #4b5563;
    font-size: 13px;
    line-height: 1.4;
}

.auth-display-name-preview.is-empty {
    display: none;
}

.auth-display-name-preview-label {
    color: #6b7280;
    font-weight: 500;
}

.auth-display-name-preview-value {
    color: #111111;
    font-weight: 600;
}

.auth-flow-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.auth-flow-actions-split {
    justify-content: space-between;
}

.auth-flow-actions .auth-page-primary-button,
.auth-flow-actions .auth-page-secondary-button {
    width: auto;
}

.auth-page-eyebrow {
    margin: 0 0 10px;
    color: #6b7280;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.auth-page-title {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 600;
}

.auth-page-text {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
}

.auth-page-form {
    gap: 14px;
}

.auth-page-primary-button,
.auth-page-secondary-button {
    width: 100%;
    height: 36px;
    min-width: 120px;
    padding: 0 14px;
    border: 1px solid var(--line);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.auth-page-primary-button {
    background: #111111;
    color: #ffffff;
}

.auth-page-primary-button:hover:not(:disabled),
.auth-page-primary-button:focus-visible:not(:disabled) {
    background: #2a2a2a;
    border-color: #2a2a2a;
    outline: none;
}

.auth-page-secondary-button {
    background: #ffffff;
    color: #111111;
}

.auth-page-secondary-button:hover:not(:disabled),
.auth-page-secondary-button:focus-visible:not(:disabled) {
    background: #f5f5f5;
    border-color: #dcdcdc;
    color: #111111;
    outline: none;
}

.auth-page-footer {
    margin: 16px 0 0;
    color: #6b7280;
    font-size: 13px;
}

.auth-page-footer-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.auth-page-footer-right {
    margin-left: auto;
    white-space: nowrap;
}

.auth-page-footer a {
    color: #111111;
    text-decoration: none;
}

.auth-page-footer a:hover,
.auth-page-footer a:focus-visible {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .auth-page-footer-row {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .auth-page-footer-right {
        margin-left: 0;
    }
}

.redeem-page {
    background: #f5f7fa;
}

.redeem-layout {
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding: 28px;
    overflow: auto;
    background: #fff;
}

.redeem-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 20px;
    align-items: start;
}

.redeem-panel {
    width: 100%;
    min-height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.redeem-side {
    display: grid;
    gap: 12px;
}

.redeem-side-card {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid #e8edf3;
    background: #fafbfd;
}

.redeem-side-list {
    margin: 0;
    padding-left: 16px;
    display: grid;
    gap: 6px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
}

.redeem-head {
    display: grid;
    gap: 8px;
}

.redeem-title {
    margin: 0;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 400;
    color: #0f172a;
}

.redeem-text {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}

.redeem-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.redeem-form,
.redeem-confirm-form {
    width: 100%;
}

.redeem-confirm-form {
    margin-top: 10px;
}

.redeem-form-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.redeem-field input {
    height: 38px;
}

.redeem-form-row .redeem-field {
    flex: 0 0 360px;
    width: 360px;
    max-width: 100%;
}

.redeem-button {
    width: 132px;
    min-width: 132px;
    height: 38px;
    padding: 0 20px;
    align-self: flex-start;
}

.redeem-check-button {
    border-color: var(--line);
    background: #fcfcfc;
    color: var(--text);
}

.redeem-check-button:hover:not(:disabled),
.redeem-check-button:focus-visible:not(:disabled) {
    border-color: #dcdcdc;
    background: #ffffff;
    color: var(--text);
    outline: none;
}

.redeem-result-panel {
    display: grid;
    gap: 12px;
    margin-top: 22px;
}

.redeem-result {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    display: grid;
    gap: 10px;
}

.redeem-result.is-valid {
    border-color: transparent;
    background: transparent;
}

.redeem-result.is-invalid {
    border-color: transparent;
    background: transparent;
}

.redeem-result-row {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.redeem-result-label {
    color: #475569;
    font-size: 12px;
    line-height: 1.55;
}

.redeem-result-value {
    color: #0f172a;
    font-size: 13px;
    line-height: 1.55;
    word-break: break-word;
}

.redeem-benefits {
    display: grid;
    grid-template-columns: repeat(3, 188px);
    gap: 12px;
    min-width: 0;
    justify-content: start;
}

.redeem-benefits-panel {
    display: grid;
    gap: 8px;
    margin-top: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.redeem-benefits-head {
    color: #334155;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
}

.redeem-benefits-empty {
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}

.redeem-benefit {
    --benefit-bg-start: #fffdf8;
    --benefit-bg-end: #f8efdc;
    --benefit-border: #e4cf97;
    --benefit-title: #7a5a1d;
    --benefit-value: #3a2b11;
    --benefit-unit-bg: rgba(214, 181, 110, 0.18);
    --benefit-unit-text: #7a5a1d;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 12px 14px;
    border: 1px solid var(--benefit-border);
    border-radius: 12px;
    background: linear-gradient(180deg, var(--benefit-bg-start) 0%, var(--benefit-bg-end) 100%);
    width: 188px;
    height: 128px;
    min-height: 128px;
    min-width: 188px;
    position: relative;
    overflow: hidden;
}

.redeem-benefit::after {
    content: "";
    display: block;
    width: 42px;
    height: 3px;
    border-radius: 999px;
    background: var(--benefit-border);
}

.redeem-benefit-name {
    color: var(--benefit-title);
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.02em;
    font-weight: 600;
}

.redeem-benefit-value {
    color: var(--benefit-value);
    font-size: 18px;
    line-height: 1.25;
    font-weight: 600;
    word-break: break-word;
    margin: auto 0;
    display: block;
}

.redeem-status-valid {
    color: #15803d;
}

.redeem-status-invalid {
    color: #c2410c;
}

.redeem-benefit-value-main {
    display: block;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: 0.01em;
    font-weight: 700;
}

.redeem-benefit-unit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    width: fit-content;
    min-width: 38px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--benefit-unit-bg);
    color: var(--benefit-unit-text);
    font-size: 11px;
    line-height: 1.25;
    font-weight: 600;
}

.redeem-benefit--balance {
    --benefit-bg-start: #fffdf8;
    --benefit-bg-end: #f8efdc;
    --benefit-border: #e4cf97;
    --benefit-title: #7a5a1d;
    --benefit-value: #3a2b11;
    --benefit-unit-bg: rgba(214, 181, 110, 0.18);
    --benefit-unit-text: #7a5a1d;
}

.redeem-benefit--points {
    --benefit-bg-start: #fffdfa;
    --benefit-bg-end: #f4ecde;
    --benefit-border: #ddcfae;
    --benefit-title: #6f5a2d;
    --benefit-value: #322814;
    --benefit-unit-bg: rgba(189, 163, 113, 0.2);
    --benefit-unit-text: #6f5a2d;
}

.redeem-benefit--storage {
    --benefit-bg-start: #fffefb;
    --benefit-bg-end: #f5efe4;
    --benefit-border: #dcccc0;
    --benefit-title: #66563a;
    --benefit-value: #2e2517;
    --benefit-unit-bg: rgba(169, 145, 104, 0.2);
    --benefit-unit-text: #66563a;
}

.profile-shell {
    flex: 1;
    width: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    padding: 24px 20px 40px;
    overflow: auto;
}

.profile-card {
    width: 100%;
    max-width: none;
    padding: 0;
    background: #ffffff;
    border: 0;
    border-radius: 14px;
    box-shadow: none;
    overflow: hidden;
}

.profile-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.profile-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    width: 240px;
    min-width: 240px;
    max-width: 240px;
    justify-self: start;
    padding: 10px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(180deg, #fbfdff 0%, #f8fafc 100%);
}

.profile-content {
    min-width: 0;
}

.profile-tab-pane {
    display: none;
}

.profile-tab-pane.is-active {
    display: block;
}

.profile-head {
    display: grid;
    justify-items: start;
    gap: 14px;
    margin: 0;
    padding: 18px;
    border: 0;
    background: transparent;
}

.profile-avatar-box {
    position: relative;
    width: 76px;
    height: 76px;
    border: 2px solid #dbe7f5;
    border-radius: 14px;
    background: #f8fafc;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-avatar-trigger {
    padding: 0;
    cursor: pointer;
}

.profile-avatar-trigger:hover,
.profile-avatar-trigger:focus-visible {
    outline: none;
}

.profile-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: rgba(15, 23, 42, 0.48);
    color: #ffffff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
}

.profile-avatar-overlay-text {
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.profile-avatar-trigger:hover .profile-avatar-overlay,
.profile-avatar-trigger:focus-visible .profile-avatar-overlay {
    opacity: 1;
}

.profile-avatar-fallback {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}

.profile-avatar-fallback svg {
    width: 100%;
    height: 100%;
    display: block;
}

.profile-head-copy {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.profile-title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.profile-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(460px, 1.1fr);
    align-items: center;
    gap: 18px 24px;
    margin-bottom: 18px;
    padding: 14px 18px 18px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 12px;
    background: linear-gradient(180deg, #fbfdff 0%, #f8fbff 100%);
}

.profile-summary-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.profile-summary-copy {
    min-width: 0;
}

.profile-summary-caption {
    margin: 0;
    color: #64748b;
    font-size: 13px;
}

.profile-summary-stats {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.profile-summary-stat {
    display: grid;
    gap: 6px;
    min-height: 72px;
    padding: 12px 14px;
    border: 1px solid #e6edf7;
    border-radius: 10px;
    background: #ffffff;
}

.profile-summary-stat--balance {
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-summary-stat--points {
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-summary-balance-main {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.profile-summary-stat-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #9aa6b2;
    font-size: 12px;
    line-height: 1.2;
}

.profile-summary-stat--balance .profile-summary-stat-label,
.profile-summary-stat--points .profile-summary-stat-label {
    color: #aeb8c3;
}

.profile-balance-icon {
    width: 48px;
    height: 48px;
    color: var(--icon-primary);
    fill: currentColor;
    flex: 0 0 auto;
}

.profile-points-icon {
    width: 48px;
    height: 48px;
    color: var(--icon-primary);
    fill: currentColor;
    flex: 0 0 auto;
}

.profile-summary-stat-value {
    color: #0f172a;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
}

.profile-summary-stat-value-time {
    font-size: 14px;
    font-weight: 500;
}

.avatar-editor-modal {
    z-index: 40;
}

.avatar-editor-dialog {
    width: min(920px, 100%);
    max-width: 920px;
    overflow: hidden;
}

.avatar-editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr);
    min-height: 560px;
}

.avatar-editor-left,
.avatar-editor-right {
    padding: 20px;
}

.avatar-editor-left {
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.avatar-editor-stage {
    flex: 1 1 auto;
    position: relative;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        linear-gradient(45deg, #f3f4f6 25%, transparent 25%) -12px 0/24px 24px,
        linear-gradient(-45deg, #f3f4f6 25%, transparent 25%) -12px 0/24px 24px,
        linear-gradient(45deg, transparent 75%, #f3f4f6 75%) -12px 0/24px 24px,
        linear-gradient(-45deg, transparent 75%, #f3f4f6 75%) -12px 0/24px 24px,
        #ffffff;
}

.avatar-editor-empty {
    color: var(--muted);
    font-size: 14px;
}

.avatar-editor-crop-box {
    position: absolute;
    width: 180px;
    height: 180px;
    border: 1px dashed #0070e0;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.22);
    cursor: move;
    touch-action: none;
    z-index: 3;
}

.avatar-editor-crop-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #ffffff;
}

.avatar-editor-crop-handle.is-tl {
    left: 0;
    top: 0;
    cursor: nwse-resize;
}

.avatar-editor-crop-handle.is-tr {
    right: 0;
    top: 0;
    cursor: nesw-resize;
}

.avatar-editor-crop-handle.is-bl {
    left: 0;
    bottom: 0;
    cursor: nesw-resize;
}

.avatar-editor-crop-handle.is-br {
    right: 0;
    bottom: 0;
    cursor: nwse-resize;
}

.avatar-editor-stage:not(.has-image) .avatar-editor-crop-box {
    display: none;
}

.avatar-editor-image {
    position: absolute;
    max-width: none;
    max-height: none;
    user-select: none;
    z-index: 1;
}

.avatar-editor-right {
    display: grid;
    gap: 20px;
    align-content: space-between;
    background: #fafafa;
}

.avatar-preview-panel {
    display: grid;
    gap: 10px;
}

.avatar-preview-label {
    color: var(--muted);
    font-size: 13px;
}

.avatar-preview-frame {
    width: 220px;
    height: 220px;
    border: 1px solid var(--line);
    background: #ffffff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-preview-frame canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.avatar-editor-actions {
    display: grid;
    gap: 10px;
}

.avatar-editor-actions .avatar-editor-secondary-button,
.avatar-editor-actions .avatar-editor-primary-button {
    width: 100%;
}

.profile-summary-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 10px;
    color: #64748b;
    font-size: 12px;
}

.profile-head-copy::after {
    content: "个人空间";
    display: inline-flex;
    align-items: center;
    justify-self: start;
    height: 24px;
    padding: 0 10px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: #ffffff;
    color: #475569;
    font-size: 11px;
    white-space: nowrap;
}

.profile-tabs {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.profile-tab {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 38px;
    padding: 0 12px;
    color: #475569;
    font-size: 13px;
    border-radius: 10px;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.profile-tab:hover,
.profile-tab:focus-visible {
    color: #0f172a;
    background: #eef4ff;
}

.profile-tab.is-active {
    color: #0f172a;
    font-weight: 600;
    background: #eaf2ff;
    border: 1px solid #dbeafe;
}

.profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.85fr);
    gap: 18px;
    align-items: start;
}

.profile-panel {
    border: 1px solid #edf2f7;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
}

.profile-panel + .profile-panel {
    margin-top: 16px;
}

.profile-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 12px;
    border-bottom: 1px solid #edf2f7;
    font-size: 13px;
}

.profile-panel-head strong {
    font-size: 14px;
    letter-spacing: -0.01em;
}

.profile-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
}

.profile-meta-list {
    display: grid;
    gap: 0;
}

.profile-meta-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 12px;
}

.profile-meta-list > .profile-meta-item:last-child,
.profile-meta-list > form:last-child .profile-meta-item {
    border-bottom: 0;
}

.profile-meta-item > span:first-child {
    color: #64748b;
}

.profile-meta-item strong {
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    color: #0f172a;
}

.profile-group-list {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    max-width: 72%;
}

.profile-meta-list-editable .profile-meta-item-editable:hover {
    background: #f8fafc;
}

.profile-inline-value {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.profile-inline-display-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    min-width: 0;
}

.profile-inline-value [data-display-value] {
    display: inline-block;
}

.profile-inline-input {
    width: 260px;
    min-width: 260px;
    max-width: calc(100% - 126px);
    height: 26px;
    padding: 0 8px;
    border: 1px solid rgba(203, 213, 225, 0.95);
    background: #ffffff;
    color: #0f172a;
    font-size: 12px;
    line-height: 24px;
    text-align: left;
    border-radius: 8px;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: auto;
    right: 118px;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.profile-inline-input:focus {
    outline: none;
    border-color: #94a3b8;
}

.profile-meta-item.is-editing {
    background: #f8fafc;
}

.profile-inline-edit,
.profile-inline-cancel,
.profile-inline-save {
    border-radius: 8px;
    border: 1px solid rgba(203, 213, 225, 0.95);
    background: #ffffff;
    color: #334155;
    font: inherit;
    cursor: pointer;
}

.profile-inline-edit {
    height: 24px;
    padding: 0 8px;
    font-size: 11px;
    position: absolute;
    top: 50%;
    right: calc(100% + 8px);
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease;
    white-space: nowrap;
}

.profile-inline-cancel,
.profile-inline-save {
    min-width: 52px;
    height: 24px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    background: #ffffff;
    border-color: rgba(203, 213, 225, 0.95);
    color: #334155;
    box-shadow: none;
}

.profile-inline-cancel:hover,
.profile-inline-cancel:focus-visible,
.profile-inline-save:hover,
.profile-inline-save:focus-visible {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
    transform: none;
}

.profile-page .profile-inline-cancel,
.profile-page .profile-inline-save {
    width: auto;
    min-width: 52px;
    height: 24px;
    padding: 0 8px;
    align-self: auto;
    background: #ffffff;
    border: 1px solid rgba(203, 213, 225, 0.95);
    color: #334155;
    box-shadow: none;
}

.profile-page .profile-inline-cancel:hover:not(:disabled),
.profile-page .profile-inline-cancel:focus-visible:not(:disabled),
.profile-page .profile-inline-save:hover:not(:disabled),
.profile-page .profile-inline-save:focus-visible:not(:disabled) {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}

.profile-meta-item-editable:hover .profile-inline-edit,
.profile-meta-item-editable:focus-within .profile-inline-edit {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.profile-inline-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.profile-meta-item.is-editing .profile-inline-input,
.profile-meta-item.is-editing .profile-inline-actions {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.profile-meta-item.is-editing .profile-inline-display-wrap {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.profile-table-wrap {
    overflow: auto;
    padding: 8px 18px 18px;
    background: #ffffff;
}

.share-page-main {
    background: #ffffff;
}

.share-page-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    overflow: auto;
}

.share-panel {
    background: rgba(255, 255, 255, 0.92);
}

.share-feedback {
    margin: 18px 18px 12px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.4;
}

.share-feedback-success {
    background: #f6fffa;
    color: #067647;
    border: 1px solid #ccebd7;
}

.share-feedback-error {
    background: #fff7f7;
    color: #b42318;
    border: 1px solid #f2c7c7;
}

.share-empty-state {
    margin: 0 18px 18px;
    padding: 24px 16px;
    border: 1px dashed #dbe4ee;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
}

.share-table-wrap {
    overflow: auto;
    padding: 0 12px 12px;
}

.share-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: 12px;
}

.share-col-target {
    width: auto;
}

.share-col-credentials {
    width: 1%;
}

.share-col-stats {
    width: 1%;
}

.share-col-times {
    width: 1%;
}

.share-col-actions {
    width: 1%;
}

.share-table th,
.share-table td {
    padding: 10px 8px;
    border-top: 1px solid #eef2f7;
    vertical-align: middle;
    text-align: left;
}

.share-table th {
    color: #64748b;
    font-weight: 400;
    white-space: nowrap;
}

.share-table tbody tr:hover td {
    background: #f8fafc;
}

.share-target,
.share-stats,
.share-times,
.share-credentials,
.share-actions {
    display: grid;
    gap: 4px;
}

.share-credentials {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
}

.share-target strong {
    color: #0f172a;
    font-weight: 400;
}

.share-target span,
.share-stats span,
.share-times span,
.share-subtle-meta {
    color: #64748b;
}

.share-kind-icon {
    width: 12px;
    height: 12px;
    vertical-align: -2px;
    color: #94a3b8;
}

.share-target span .share-status-disabled {
    color: #d97706;
}

.share-col-stats .share-stats,
.share-col-times .share-times {
    min-width: max-content;
}

.share-col-actions .share-actions {
    min-width: max-content;
}

.share-col-stats,
.share-col-times,
.share-col-actions,
.share-col-credentials,
.share-table th.share-col-stats,
.share-table th.share-col-times,
.share-table th.share-col-actions,
.share-table th.share-col-credentials {
    white-space: nowrap;
}

.share-table-wrap .share-copy-button {
    gap: 5px;
    height: 24px;
    padding: 0 8px;
    min-width: 70px;
    font-size: 11px;
}

.share-copy-button-label {
    display: inline-block;
    min-width: 3em;
    text-align: center;
}

.share-col-target .share-target,
.share-col-times .share-times {
    min-width: 0;
}

.share-col-target .share-target strong,
.share-col-target .share-target span,
.share-col-times .share-times span {
    overflow-wrap: anywhere;
}

.share-inline-input {
    width: min(320px, 100%);
    height: 28px;
    padding: 0 8px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    font: inherit;
    font-size: 12px;
}

.share-code-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 4px 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    font: inherit;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.share-table-wrap .share-code-chip {
    padding: 3px 7px;
    min-width: 56px;
    font-size: 11px;
    text-align: center;
}

.share-code-chip.is-copied {
    border-color: #ccebd7;
    background: #f6fffa;
    color: #067647;
}

.share-actions {
    grid-auto-flow: column;
    justify-content: start;
    gap: 6px;
}

.share-action-button {
    min-width: 56px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid #dbe4ee;
    background: #ffffff;
    color: #475569;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.share-col-actions .share-action-button {
    min-width: 48px;
    height: 24px;
    padding: 0 8px;
    font-size: 11px;
}

.share-action-button.is-danger {
    color: #b42318;
    border-color: #f1d0d0;
    background: #fffafa;
}

.share-public-page {
    display: block;
    overflow: auto;
    background: linear-gradient(180deg, #f6f8fb 0%, #edf2f7 100%);
}

.share-public-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.share-public-card {
    width: min(760px, 100%);
    border: 1px solid #e5e7eb;
    background: rgba(255, 255, 255, 0.96);
}

.share-public-head {
    padding: 18px 20px 10px;
    border-bottom: 1px solid #eef2f7;
    display: flex;
    align-items: center;
}

.share-public-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.share-public-head span {
    color: #64748b;
    font-size: 12px;
}

.share-extract-code-form,
.share-file-summary,
.share-directory-view {
    display: grid;
    gap: 14px;
    padding: 20px;
}

.share-file-summary h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: #0f172a;
}

.share-file-meta,
.share-directory-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #64748b;
    font-size: 12px;
}

.share-download-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 92px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #dbe4ee;
    background: #ffffff;
    color: #334155;
    text-decoration: none;
}

.share-directory-list {
    display: grid;
    gap: 8px;
}

.share-entry-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #eef2f7;
    background: #ffffff;
    color: inherit;
    text-decoration: none;
}

.share-entry-row strong {
    color: #0f172a;
    font-weight: 400;
}

.share-entry-row span {
    color: #64748b;
    font-size: 12px;
    text-align: right;
}

.share-public-shell.is-browser {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
}

.share-public-card.is-browser {
    max-width: none;
    width: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
}

.share-browser {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 680px;
}

.share-browser-head {
    padding-bottom: 4px;
}

.share-browser-list,
.share-browser-grid {
    min-height: 100%;
}

.share-browser-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
}

.share-browser-list {
    padding: 0;
}

.share-browser-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.share-browser-table tbody tr:hover {
    background: #f8fbff;
}

.share-browser-main {
    min-height: 0;
}

.share-browser-wrap {
    padding-bottom: 10px;
}

.share-browser .thumb-grid {
    padding: 4px 0 0;
}

.share-browser .thumb-main {
    color: inherit;
    text-decoration: none;
}

.share-browser .thumb-preview .share-browser-icon,
.share-browser .thumb-preview .icon {
    width: 72px;
    height: 72px;
}

.share-browser-status {
    padding-left: 12px;
    padding-right: 12px;
}

@media (max-width: 900px) {
    .share-public-shell.is-browser {
        padding: 0;
    }
}

.profile-table {
    width: 100%;
    border-collapse: collapse;
}

.profile-table-auto-fit {
    width: 100%;
    table-layout: auto;
}

.profile-table.profile-table-auto-fit th,
.profile-table.profile-table-auto-fit td {
    padding-left: 12px;
    padding-right: 12px;
}

.profile-table.profile-table-auto-fit th:first-child,
.profile-table.profile-table-auto-fit td:first-child {
    padding-left: 0;
}

.profile-table.profile-table-auto-fit th:last-child,
.profile-table.profile-table-auto-fit td:last-child {
    padding-right: 0;
}

.profile-table.profile-table-auto-fit th:not(:last-child),
.profile-table.profile-table-auto-fit td:not(:last-child) {
    width: 1%;
    white-space: nowrap;
}

.profile-table.profile-table-auto-fit th:last-child,
.profile-table.profile-table-auto-fit td:last-child {
    width: 100%;
    white-space: normal;
}

.profile-table th,
.profile-table td {
    padding: 12px 0;
    border-bottom: 1px solid rgba(241, 245, 249, 0.95);
    text-align: left;
    font-size: 12px;
    white-space: nowrap;
}

.profile-table th {
    color: #64748b;
    font-weight: 600;
}

.profile-table tbody tr:hover td {
    background: #f8fafc;
}

.profile-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 18px 18px;
}

.profile-pagination-summary,
.profile-pagination-current {
    color: #64748b;
    font-size: 12px;
}

.profile-pagination-links {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.profile-pagination-link {
    color: #0f172a;
    font-size: 12px;
    font-weight: 600;
}

.profile-pagination-link:hover {
    text-decoration: underline;
}

.share-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
}

.share-pagination-summary,
.share-pagination-current {
    color: #64748b;
    font-size: 12px;
}

.share-pagination-links {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.share-pagination-link {
    color: #0f172a;
    font-size: 12px;
    font-weight: 600;
}

.share-pagination-link:hover {
    text-decoration: underline;
}

.profile-page .notice,
.profile-page .login-error {
    margin: 0 0 16px;
}

.profile-page {
    background: #ffffff;
}

.profile-page .login-field {
    gap: 6px;
}

.subscription-page {
    background: #ffffff;
}

.subscription-shell {
    width: 100%;
    margin: 0 auto;
    overflow: auto;
}

.subscription-panel {
    margin-top: 18px;
    border-radius: 14px;
    background: #ffffff;
    padding: 20px;
}

.subscription-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
}

.subscription-layout-main,
.subscription-layout-side {
    min-width: 0;
}

.subscription-layout-side {
    display: flex;
    flex-direction: column;
    --subscription-flow-gap: 26px;
    --subscription-flow-arrow-size: 12px;
}

.subscription-section + .subscription-section {
    margin-top: 16px;
}

.subscription-layout-side .subscription-section + .subscription-section {
    margin-top: var(--subscription-flow-gap);
}

.subscription-layout-side .subscription-section {
    position: relative;
}

.subscription-layout-side .subscription-section:not(#subscriptionGatewaySection)::after {
    content: "";
    position: absolute;
    top: calc(100% + var(--subscription-flow-gap) / 2);
    left: 50%;
    width: var(--subscription-flow-arrow-size);
    height: 8px;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23cbd5e1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    pointer-events: none;
}

.subscription-section {
    border: 1px solid #eef2f7;
    border-radius: 12px;
    background: #ffffff;
    padding: 14px;
}

.subscription-section-head {
    display: grid;
    gap: 4px;
    margin-bottom: 10px;
}

.subscription-section-head h2 {
    margin: 0;
    font-size: 14px;
    color: #0f172a;
    font-weight: 400;
}

.subscription-intro-section {
    background: #ffffff;
    border-color: #f2e4cf;
    padding: 10px 14px;
}

.subscription-intro-text {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #7c5f34;
}

.subscription-selected-summary {
    display: grid;
    gap: 8px;
}

.subscription-selected-inline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.subscription-selected-item {
    min-width: 0;
    flex: 1 1 0;
    display: grid;
    gap: 4px;
}

.subscription-selected-label {
    color: #94a3b8;
    font-size: 12px;
}

.subscription-selected-value {
    color: #0f172a;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.subscription-plans {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(228px, 252px);
    align-items: center;
    gap: 10px;
    height: 100%;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 2px;
}

.subscription-card {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    border: 0;
    border-radius: 12px;
    background: #f8fafc;
    min-height: 130px;
    padding: 14px 16px;
    cursor: pointer;
    transition: box-shadow 0.16s ease, background-color 0.16s ease;
}

.subscription-card-body {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
}

.subscription-plans-section {
    height: 165px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    background-color: #f8f8f8;
}

.subscription-card.is-active {
    background: #fdfefe;
    box-shadow: inset 0 0 0 1px #dbe4ee;
}

.subscription-card:hover,
.subscription-card:focus-within {
    background: #fbfdff;
    box-shadow: inset 0 0 0 1px #d5deea;
}

.subscription-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.subscription-card-main {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.subscription-card-main strong {
    font-size: 15px;
    color: #0f172a;
    line-height: 1.35;
}

.subscription-card-main span {
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.subscription-card-helper {
    color: #94a3b8;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.subscription-card-helper.is-empty {
    visibility: hidden;
}

.subscription-pay-methods,
.subscription-cycles,
.subscription-gateways {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.subscription-layout-side .subscription-pay-methods {
    flex-direction: column;
    align-items: stretch;
}

.subscription-layout-side .subscription-pay-method {
    width: 100%;
    justify-content: flex-start;
}

.subscription-layout-side #subscriptionGatewaySection {
    min-height: 154px;
}

.subscription-layout-side .subscription-gateways {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    min-height: 124px;
    align-content: start;
}

.subscription-layout-side .subscription-gateways > * {
    width: 100%;
}

.subscription-cycles {
    min-height: 96px;
    align-content: flex-start;
}

.subscription-pay-method,
.subscription-cycle-item,
.subscription-gateway-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: #f8fafc;
    color: #334155;
    font-size: 12px;
    cursor: pointer;
    transition: box-shadow 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.subscription-pay-method input,
.subscription-cycle-item input,
.subscription-gateway-item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
    margin: 0;
}

.subscription-pay-method input + span {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 2px;
}

.subscription-pay-method input:checked + span {
    color: #0f172a;
    font-weight: 600;
}

.subscription-pay-method:has(input:checked) {
    background: #fdfefe;
    color: #0f172a;
    box-shadow: inset 0 0 0 1px #dbe4ee;
}

.subscription-pay-method:hover,
.subscription-pay-method:focus-within {
    background: #fbfdff;
    box-shadow: inset 0 0 0 1px #d5deea;
}

.subscription-cycle-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    min-width: 152px;
    max-width: none;
    min-height: 62px;
    padding: 10px 20px;
}

.subscription-cycle-item.is-active {
    background: #fdfefe;
    box-shadow: inset 0 0 0 1px #dbe4ee;
}

.subscription-cycle-item:hover,
.subscription-cycle-item:focus-within {
    background: #fbfdff;
    box-shadow: inset 0 0 0 1px #d5deea;
}

.subscription-cycle-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.subscription-cycle-main strong {
    font-size: 13px;
    color: #0f172a;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
}

.subscription-cycle-main span {
    font-size: 12px;
    color: #64748b;
    line-height: 1.25;
    white-space: nowrap;
}

.subscription-cycle-item b {
    display: inline-block;
    width: auto;
    min-width: 72px;
    text-align: right;
    font-size: 12px;
    color: #0f172a;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.subscription-gateway-item.is-active {
    background: #fdfefe;
    box-shadow: inset 0 0 0 1px #dbe4ee;
}

.subscription-gateway-item:hover,
.subscription-gateway-item:focus-within {
    background: #fbfdff;
    box-shadow: inset 0 0 0 1px #d5deea;
}

.subscription-gateway-balance {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 180px;
    min-height: 124px;
    padding: 10px 12px;
    border: 1px solid #dbe4ee;
    background: #f8fbff;
    color: #334155;
}

.subscription-gateway-balance span {
    font-size: 12px;
    color: #64748b;
}

.subscription-gateway-balance strong {
    font-size: 15px;
    color: #0f172a;
    font-weight: 600;
}

.subscription-gateway-redeem-link {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 4px;
    font-size: 12px;
    color: #0f172a;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.subscription-gateway-redeem-link:hover,
.subscription-gateway-redeem-link:focus-visible {
    color: #2563eb;
}

.subscription-empty {
    color: #64748b;
    font-size: 12px;
    padding: 8px 2px;
    line-height: 1.5;
}

.subscription-footer {
    margin-top: 12px;
}

.subscription-footer .auth-page-primary-button {
    width: 100%;
    min-height: 42px;
}

@media (max-width: 1024px) {
    .subscription-shell {
        max-width: 980px;
        padding: 20px 16px 24px;
    }

    .subscription-layout {
        grid-template-columns: 1fr;
    }
}

.profile-page .login-field input {
    height: 38px;
    border-color: rgba(203, 213, 225, 0.9);
    background: #ffffff;
}

.profile-page .login-field input:focus {
    border-color: #94a3b8;
    background: #ffffff;
    box-shadow: none;
}

.avatar-editor-secondary-button,
.avatar-editor-primary-button,
.profile-security-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 14px;
    border: 1px solid rgba(203, 213, 225, 0.95);
    background: #ffffff;
    color: #334155;
    font: inherit;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
}

.avatar-editor-secondary-button:hover:not(:disabled),
.avatar-editor-secondary-button:focus-visible:not(:disabled) {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
    outline: none;
}

.avatar-editor-primary-button,
.profile-security-button {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
}

.avatar-editor-primary-button:hover:not(:disabled),
.avatar-editor-primary-button:focus-visible:not(:disabled),
.profile-security-button:hover:not(:disabled),
.profile-security-button:focus-visible:not(:disabled) {
    background: #1e293b;
    border-color: #1e293b;
    outline: none;
}

.profile-security-button {
    width: auto;
    min-width: 132px;
    align-self: flex-start;
}

.profile-security-group {
    display: grid;
    gap: 0;
}

.profile-security-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-bottom: 1px solid #f1f5f9;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.profile-security-toggle:hover,
.profile-security-toggle:focus-visible {
    background: #f8fafc;
    outline: none;
}

.profile-security-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: transform 0.18s ease;
}

.profile-security-toggle[aria-expanded="true"] .profile-security-toggle-icon {
    transform: rotate(180deg);
}

.profile-security-form {
    width: min(360px, 100%);
    padding: 14px 18px 18px;
}

@media (max-width: 900px) {
    body {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .auth-page {
        flex-direction: column;
    }

    .redeem-layout {
        padding: 28px;
    }

    .redeem-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .redeem-panel {
        min-height: auto;
        padding: 0;
    }

    .redeem-title {
        font-size: 19px;
    }

    .redeem-body {
        grid-template-columns: 1fr;
    }

    .redeem-result-panel {
        margin-top: 18px;
    }

    .redeem-form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .redeem-form-row .redeem-field {
        flex: 1 1 auto;
        width: 100%;
    }

    .table-region {
        display: block;
        min-height: auto;
    }

    .table-main,
    .app,
    .app-main {
        min-height: auto;
    }

    .section-head {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        height: auto;
        min-height: 38px;
    }

    .toolbar,
    .toolbar-inline {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }

    .app-main > .section-head {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding-bottom: 2px;
        height: 38px;
        min-height: 0;
    }

    .app-main > .section-head .pathbar {
        width: auto;
        align-items: center;
    }

    .app-main > .section-head .toolbar-inline {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        width: auto;
        overflow: visible;
    }

    .table-wrap {
        height: auto;
        min-height: 0;
        touch-action: pan-x pan-y;
    }

    .app-main > .section-head .manage-tools {
        display: flex;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .app-main > .section-head .toolbar-field-compact {
        flex: 0 0 96px;
        min-width: 96px;
    }

    .search-floating-toolbar {
        width: min(220px, calc(100vw - 24px));
    }

    .app-main > .section-head .view-toggle {
        margin-left: 0;
    }

    .toolbar-field-compact {
        flex: 1 1 auto;
    }

    .preview-modal {
        padding: 12px;
    }

    .auth-modal {
        padding: 12px;
    }

    .preview-dialog {
        width: 100%;
        height: min(84vh, 100%);
    }

    .preview-dialog--image {
        --preview-image-max-width: calc(100vw - 24px);
        --preview-image-max-height: calc(100vh - 24px);
        --preview-image-content-max-height: var(--preview-image-max-height);
        width: var(--preview-image-dialog-width, auto);
        height: var(--preview-image-dialog-height, auto);
        max-width: var(--preview-image-max-width);
        max-height: var(--preview-image-max-height);
    }

    .profile-grid {
        grid-template-columns: 1fr;
    }

    .profile-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .profile-sidebar {
        position: static;
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .profile-card {
        width: 100%;
        padding: 0;
    }

    .profile-shell {
        padding: 16px 12px 28px;
    }

    .productivity-main {
        padding: 14px 14px 0;
        overflow: auto;
    }

    .productivity-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
    }

    .productivity-section-head {
        flex-wrap: wrap;
    }

    .productivity-search-field--inline {
        order: 3;
        flex: 1 1 100%;
        max-width: none;
        margin-left: 0;
    }

    .entry-modal-grid {
        grid-template-columns: 1fr;
    }

    .note-modal-item-layout {
        grid-template-columns: 1fr;
    }

    .productivity-section {
        padding-left: 0;
        padding-right: 0;
        overflow: visible;
    }

    .productivity-section + .productivity-section {
        border-left: 0;
        border-top: 1px solid #e5e7eb;
        padding-top: 18px;
    }

    .productivity-list {
        overflow: visible;
    }

    .productivity-list-wrap {
        padding-right: 0;
        overflow: visible;
    }

    .productivity-list-scrollbar {
        display: none;
    }

    .productivity-card-headline,
    .productivity-card-row,
    .productivity-todo-headline {
        flex-direction: column;
        align-items: stretch;
    }

    .productivity-card-titleline {
        align-items: flex-start;
    }

    .productivity-note-items {
        flex-direction: column;
    }

    .productivity-note-item {
        display: flex;
        width: 100%;
    }

    .productivity-card-summary-inline {
        max-width: 100%;
        white-space: normal;
    }

    .entry-modal-dialog {
        width: 100%;
        max-height: min(92vh, 100%);
    }

    .entry-modal-shell {
        padding: 12px;
    }

    th:nth-child(3),
    td:nth-child(3) {
        display: none;
    }
}

@media (max-width: 900px) and (hover: none) and (pointer: coarse) {
    .shell {
        flex-direction: column;
        min-height: auto;
    }

    .nav-rail {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        overflow: visible;
    }

    .nav-rail-head {
        justify-content: flex-start;
        padding: 7px 0 7px 10px;
        flex: 0 0 auto;
    }

    .nav-rail-body {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        padding: 7px 0;
        flex: 1 1 auto;
        min-width: 0;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
    }

    .nav-rail-foot {
        justify-content: flex-start;
        padding: 7px 10px 7px 0;
        flex: 0 0 auto;
        margin-top: 0;
    }

    .nav-rail-link {
        width: auto;
        height: 32px;
        min-width: max-content;
        flex: 0 0 auto;
        justify-content: flex-start;
        gap: 6px;
        padding: 0 8px;
        border-radius: 8px;
    }

    .nav-rail-icon {
        width: 32px;
        height: 32px;
        flex: 0 0 auto;
    }

    .nav-rail-link span {
        position: static;
        top: auto;
        left: auto;
        transform: none;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        color: inherit;
        font-size: 12px;
        line-height: 1.2;
        white-space: nowrap;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .user-avatar {
        width: 24px;
        height: 24px;
        transform: none;
    }

    .user-avatar-default {
        width: 18px;
        height: 18px;
    }

    .nav-rail-link span::before {
        content: none;
    }

    .nav-rail-link:hover span,
    .nav-rail-link:focus-visible span {
        opacity: 1;
        visibility: visible;
    }

    .user-menu-nav .user-card {
        top: calc(100% + 6px);
        right: 0;
        bottom: auto;
        left: auto;
        transform: none;
        z-index: 80;
    }

    .user-menu-nav::after {
        top: 100%;
        bottom: auto;
        left: 0;
        width: 26px;
        height: 12px;
    }

    .helper-sidebar {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        min-width: 0;
        min-height: 120px;
        border-left: 1px solid var(--line);
        border-top: 0;
        border-radius: 0;
    }
}

.home-app {
    overflow: auto;
}

.home-page {
    width: 100%;
    padding: 26px 28px;
    min-height: 100%;
}

.home-topbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.home-auth-actions {
    display: inline-flex;
    gap: 10px;
}

.home-auth-button {
    color: #475569;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.4;
}

.home-auth-button:hover,
.home-auth-button:focus-visible {
    color: #0f172a;
    text-decoration: underline;
    outline: none;
}

@media (max-width: 640px) {
    .home-page {
        padding: 18px 16px;
    }

    .note-category-list {
        grid-template-columns: 1fr;
    }

    .profile-head {
        padding: 18px 16px 16px;
    }

    .profile-summary {
        grid-template-columns: 1fr;
        align-items: stretch;
        padding: 6px 14px 16px;
    }

    .profile-summary-main {
        gap: 12px;
    }

    .profile-summary-stats {
        grid-template-columns: 1fr;
    }

    .profile-summary-stat {
        min-height: 0;
    }

    .profile-card {
        padding: 0;
    }

    .profile-tabs {
        gap: 4px;
    }

    .profile-meta-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .profile-meta-item strong {
        text-align: left;
    }

    .profile-group-list {
        max-width: 100%;
        justify-content: flex-start;
    }

    .profile-inline-value {
        width: 100%;
        justify-content: flex-start;
    }

    .profile-inline-input {
        width: 100%;
    }

    .profile-form,
    .profile-meta-item,
    .profile-table-wrap {
        padding-left: 14px;
        padding-right: 14px;
    }

    .profile-pagination {
        flex-direction: column;
        align-items: stretch;
        padding-left: 14px;
        padding-right: 14px;
    }

    .profile-pagination-links {
        justify-content: space-between;
    }

    .share-pagination {
        flex-direction: column;
        align-items: stretch;
    }

    .share-pagination-links {
        justify-content: space-between;
    }
}