/* 全项目现代交互运行时 */

:root {
    --app-nav-width: 82px;
    --app-surface: rgba(13, 19, 42, 0.92);
    --app-surface-strong: rgba(9, 14, 32, 0.98);
    --app-border: rgba(255, 255, 255, 0.1);
    --app-muted: #92a3bd;
    --app-focus: #67e8f9;
    --app-radius-sm: 12px;
    --app-radius-md: 18px;
    --app-radius-lg: 26px;
    --app-ease: cubic-bezier(0.22, 0.72, 0.2, 1);
}

html {
    scroll-behavior: smooth;
}

body.app-ui-has-nav {
    padding-left: calc(var(--app-nav-width) + 34px);
}

body.app-ui-navigating {
    cursor: progress;
}

body.app-ui-modal-open {
    overflow: hidden !important;
}

[data-app-view] {
    view-transition-name: app-page;
}

::view-transition-old(app-page) {
    animation: appPageOut 150ms ease both;
}

::view-transition-new(app-page) {
    animation: appPageIn 260ms var(--app-ease) both;
}

@keyframes appPageOut {
    to { opacity: 0; transform: translateY(-5px) scale(0.995); }
}

@keyframes appPageIn {
    from { opacity: 0; transform: translateY(10px) scale(0.995); }
}

.app-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9000;
    width: 100%;
    height: 3px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 140ms ease;
}

.app-progress::after {
    content: '';
    display: block;
    width: 36%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #22d3ee, #8b5cf6, #ec4899);
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.62);
    transform: translateX(-110%);
}

.app-progress.is-active {
    opacity: 1;
}

.app-progress.is-active::after {
    animation: appProgress 1.05s ease-in-out infinite;
}

@keyframes appProgress {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(320%); }
}

.app-nav {
    position: fixed;
    left: 16px;
    top: 50%;
    z-index: 3500;
    width: var(--app-nav-width);
    display: grid;
    gap: 8px;
    padding: 11px;
    border: 1px solid var(--app-border);
    border-radius: 24px;
    background: rgba(9, 14, 32, 0.78);
    box-shadow: 0 22px 58px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    transform: translateY(-50%);
}

.app-nav-brand {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 4px;
    border-radius: 17px;
    color: #06121d;
    background: linear-gradient(145deg, #67e8f9, #a78bfa);
    box-shadow: 0 10px 24px rgba(34, 211, 238, 0.22);
    font-size: 1.25rem;
    font-weight: 900;
}

.app-nav-item {
    width: 58px;
    min-height: 52px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 3px;
    padding: 6px 4px;
    border: 1px solid transparent;
    border-radius: 15px;
    color: #99abc4;
    background: transparent;
    cursor: pointer;
    font: inherit;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.app-nav-item:hover {
    color: #ecfeff;
    background: rgba(103, 232, 249, 0.08);
    transform: translateY(-1px);
}

.app-nav-item.is-active {
    color: #ecfeff;
    border-color: rgba(103, 232, 249, 0.2);
    background: linear-gradient(145deg, rgba(34, 211, 238, 0.16), rgba(139, 92, 246, 0.12));
}

.app-nav-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.app-nav-label {
    font-size: 0.67rem;
    font-weight: 700;
}

.app-nav-divider {
    height: 1px;
    margin: 3px 7px;
    background: rgba(255, 255, 255, 0.08);
}

.app-toast-region {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 8500;
    width: min(390px, calc(100vw - 32px));
    display: grid;
    gap: 10px;
    pointer-events: none;
}

.app-toast {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 11px;
    padding: 13px 14px;
    border: 1px solid var(--app-border);
    border-radius: 15px;
    color: #edf5ff;
    background: rgba(11, 17, 37, 0.96);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    pointer-events: auto;
    opacity: 0;
    transform: translateX(20px) scale(0.98);
    transition: opacity 200ms ease, transform 220ms var(--app-ease);
}

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

.app-toast.is-leaving {
    opacity: 0;
    transform: translateX(16px) scale(0.98);
}

.app-toast-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #67e8f9;
    background: rgba(103, 232, 249, 0.11);
    font-weight: 850;
}

.app-toast.is-success .app-toast-icon {
    color: #5df2b5;
    background: rgba(93, 242, 181, 0.11);
}

.app-toast.is-error .app-toast-icon {
    color: #ff9bb2;
    background: rgba(255, 84, 125, 0.11);
}

.app-toast.is-warning .app-toast-icon {
    color: #ffe66d;
    background: rgba(255, 214, 10, 0.11);
}

.app-toast-message {
    padding-top: 3px;
    overflow-wrap: anywhere;
    font-size: 0.88rem;
    line-height: 1.5;
}

.app-toast-close {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: #8090aa;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
}

.app-toast-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
}

/* 统一旧模板页面与 Vue 控制台的视觉语言 */
:root {
    --ui-bg: #0b1020;
    --ui-surface: #111a33;
    --ui-surface-2: #151f3b;
    --ui-line: #263252;
    --ui-text: #edf1ff;
    --ui-muted: #8995b5;
    --ui-primary: #8066ff;
}

body:not(:has(#app)) {
    background: radial-gradient(circle at 70% -20%, #26315b 0, var(--ui-bg) 52%);
    color: var(--ui-text);
}

body:not(:has(#app)) .container,
body:not(:has(#app)) .login-box {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

body:not(:has(#app)) .header {
    border: 1px solid var(--ui-line);
    border-radius: 18px;
    background: rgba(17, 26, 51, .86);
    box-shadow: 0 18px 45px rgba(0,0,0,.2);
    margin: 20px 0;
    padding: 20px 24px;
}

body:not(:has(#app)) .header h1,
body:not(:has(#app)) h1,
body:not(:has(#app)) h2,
body:not(:has(#app)) h3 { color: var(--ui-text); letter-spacing: -.02em; }

body:not(:has(#app)) .card,
body:not(:has(#app)) .task-card,
body:not(:has(#app)) .plugin-card,
body:not(:has(#app)) .account-card,
body:not(:has(#app)) .log-card,
body:not(:has(#app)) .logs-container,
body:not(:has(#app)) .table-container {
    border: 1px solid var(--ui-line);
    border-radius: 16px;
    background: var(--ui-surface);
    box-shadow: 0 15px 34px rgba(0,0,0,.16);
}

body:not(:has(#app)) .btn,
body:not(:has(#app)) button,
body:not(:has(#app)) .back-button,
body:not(:has(#app)) .btn-add {
    border-radius: 10px;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

body:not(:has(#app)) button:hover,
body:not(:has(#app)) .btn:hover { transform: translateY(-1px); filter: brightness(1.08); }

body:not(:has(#app)) input,
body:not(:has(#app)) select,
body:not(:has(#app)) textarea {
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    background: var(--ui-surface-2);
    color: var(--ui-text);
}

body:not(:has(#app)) input:focus,
body:not(:has(#app)) select:focus,
body:not(:has(#app)) textarea:focus {
    border-color: #8d7bff;
    box-shadow: 0 0 0 3px rgba(128,102,255,.18);
    outline: 0;
}

body:not(:has(#app)) table th { color: #7f8cb0; border-color: var(--ui-line); }
body:not(:has(#app)) table td { border-color: rgba(38,50,82,.72); color: #d9e1f7; }
body:not(:has(#app)) .form-hint,
body:not(:has(#app)) .empty-state,
body:not(:has(#app)) .subtitle { color: var(--ui-muted); }

body:not(:has(#app)) .login-box {
    max-width: 430px;
    margin-top: 12vh;
    padding: 34px;
    border: 1px solid var(--ui-line);
    border-radius: 20px;
    background: rgba(17,26,51,.92);
    box-shadow: 0 24px 70px rgba(0,0,0,.32);
}

@media (max-width: 760px) {
    body.app-ui-has-nav { padding-left: 0; padding-bottom: 86px; }
    .app-nav { left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; transform: none; grid-template-columns: repeat(5, 1fr); }
    .app-nav-brand, .app-nav-divider { display: none; }
    .app-nav-item { width: auto; }
    body:not(:has(#app)) .container { width: calc(100% - 20px); }
}

.app-confirm-shell {
    position: fixed;
    inset: 0;
    z-index: 8000;
    display: grid;
    place-items: center;
    padding: 18px;
    visibility: hidden;
    pointer-events: none;
}

.app-confirm-shell.is-open {
    visibility: visible;
    pointer-events: auto;
}

.app-confirm-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(3, 6, 17, 0.72);
    opacity: 0;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    transition: opacity 180ms ease;
}

.app-confirm-shell.is-open .app-confirm-backdrop {
    opacity: 1;
}

.app-confirm-dialog {
    position: relative;
    width: min(440px, 100%);
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 22px;
    color: #edf5ff;
    background:
        radial-gradient(circle at 8% 0%, rgba(103, 232, 249, 0.09), transparent 38%),
        var(--app-surface-strong);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
    opacity: 0;
    transform: translateY(12px) scale(0.97);
    transition: opacity 180ms ease, transform 220ms var(--app-ease);
}

.app-confirm-shell.is-open .app-confirm-dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.app-confirm-mark {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    border-radius: 14px;
    color: #67e8f9;
    background: rgba(103, 232, 249, 0.1);
    font-size: 1.25rem;
    font-weight: 850;
}

.app-confirm-dialog.is-danger .app-confirm-mark {
    color: #ff9bb2;
    background: rgba(255, 84, 125, 0.11);
}

.app-confirm-title {
    margin: 0;
    color: #fff;
    font-size: 1.18rem;
}

.app-confirm-message {
    margin: 10px 0 22px;
    color: #a7b6cb;
    white-space: pre-line;
    line-height: 1.65;
}

.app-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.app-confirm-button {
    min-width: 96px;
    min-height: 42px;
    padding: 9px 15px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 12px;
    color: #dce7f7;
    background: rgba(255, 255, 255, 0.065);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.app-confirm-button.is-primary {
    border: 0;
    color: #04121c;
    background: linear-gradient(135deg, #67e8f9, #22d3ee);
}

.app-confirm-dialog.is-danger .app-confirm-button.is-primary {
    color: #fff;
    background: linear-gradient(135deg, #fb7185, #e11d48);
}

.app-soft-removing {
    pointer-events: none;
    animation: appSoftRemove 240ms ease forwards;
}

@keyframes appSoftRemove {
    to { opacity: 0; transform: translateX(24px) scale(0.98); }
}

button.is-app-loading,
.btn.is-app-loading {
    position: relative;
    cursor: wait !important;
    opacity: 0.72;
    pointer-events: none;
}

button.is-app-loading::before,
.btn.is-app-loading::before {
    content: '';
    width: 14px;
    height: 14px;
    display: inline-block;
    margin-right: 8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -2px;
    animation: appButtonSpin 650ms linear infinite;
}

@keyframes appButtonSpin {
    to { transform: rotate(360deg); }
}

:where(button, a, input, select, textarea):focus-visible {
    outline: 3px solid rgba(103, 232, 249, 0.28);
    outline-offset: 3px;
}

@media (max-width: 760px) {
    body.app-ui-has-nav {
        padding-left: max(15px, env(safe-area-inset-left));
        padding-bottom: calc(98px + env(safe-area-inset-bottom));
    }

    .app-nav {
        left: 50%;
        top: auto;
        bottom: max(12px, env(safe-area-inset-bottom));
        width: min(440px, calc(100vw - 24px));
        grid-template-columns: repeat(5, 1fr);
        gap: 4px;
        padding: 8px;
        border-radius: 20px;
        transform: translateX(-50%);
    }

    .app-nav-brand,
    .app-nav-divider {
        display: none;
    }

    .app-nav-item {
        width: 100%;
        min-height: 54px;
    }

    .app-toast-region {
        right: 16px;
        bottom: calc(91px + env(safe-area-inset-bottom));
    }

    .app-confirm-dialog {
        padding: 21px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    ::view-transition-old(app-page),
    ::view-transition-new(app-page),
    .app-progress::after,
    .app-toast,
    .app-confirm-backdrop,
    .app-confirm-dialog,
    .app-soft-removing {
        animation: none !important;
        transition: none !important;
    }
}