:root {
    --ui-accent: #239a4d;
    --ui-accent-hover: #1f8a44;
    --ui-accent-soft: rgba(35, 154, 77, 0.10);
    --ui-accent-selected: rgba(35, 154, 77, 0.15);
    --ui-accent-border: rgba(35, 154, 77, 0.30);
    --ui-accent-ring: rgba(43, 208, 89, 0.35);
}

* {
    box-sizing: border-box;
}

html {
    scrollbar-gutter: auto;
    /* Smooth scrolling for the wheel/trackpad and programmatic jumps. NOT set
       under prefers-reduced-motion below — see the override at the end of
       this file. */
    scroll-behavior: smooth;
}

.suite-app * {
    box-sizing: border-box;
}

html,
body {
    /* Explicit #fff, and `background-color` to match style.css:230 which sets
       `background-color: var(--background)`. Same property, and this file
       loads second, so it wins — stated literally rather than relying on the
       shorthand/longhand difference or on load order. */
    background-color: #ffffff;
    /* `contain` (was `none`) keeps the rubber-band overscroll effect — the
       subtle pull past the top/bottom edge — instead of suppressing it. The
       white page behind is ours, so nothing external gets exposed. */
    overscroll-behavior: contain;
}

.suite-app {
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    background-attachment: fixed;
    color: #1c2833;
}

.suite-app ::selection {
    background: rgba(42, 180, 207, 0.3);
}

.suite-app::-webkit-scrollbar,
.suite-app *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.suite-app::-webkit-scrollbar-track,
.suite-app *::-webkit-scrollbar-track {
    background: rgba(241, 241, 241, 0.9);
}

.suite-app::-webkit-scrollbar-thumb,
.suite-app *::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.6);
}

.suite-app::-webkit-scrollbar-thumb:hover,
.suite-app *::-webkit-scrollbar-thumb:hover {
    background: #9d9d9d;
}

/* ---------------- Navbar (re-used from app pattern) ---------------- */
.suite-app .navbar {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    height: 4.5rem;
}

.suite-app .logo-text {
    font-weight: 800;
}

.suite-app .nav-links {
    gap: 0.85rem;
}

/* Apps text nav — mirrors index.html's nav-links text style */
.apps-nav {
    align-items: stretch;
    gap: 0.9rem;
}

.apps-label {
    color: #7f8a93;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    align-self: center;
}

.suite-app .apps-link {
    color: #1f2a37;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.suite-app .apps-link:hover {
    color: var(--suite-accent);
}

/* Apps text nav (mirrors index.html's nav text links) */
.apps-nav {
    gap: 0.9rem;
}

.apps-label {
    color: #8a8f98;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.apps-link {
    color: #1c2833;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.apps-link:hover {
    color: #1b8b43;
}


/* Sync indicator */
.sync-indicator {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(35, 154, 77, 0.14);
    border: 1px solid rgba(35, 154, 77, 0.28);
    color: #1f8a44;
    padding: 7px 15px;
    border-radius: 5rem;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.sync-indicator:hover {
    background: rgba(35, 154, 77, 0.22);
    box-shadow: 0 2px 8px rgba(35, 154, 77, 0.18);
}

.sync-indicator.syncing {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.35);
    color: #b45309;
    pointer-events: none;
}

.sync-indicator .sync-cloud {
    transition: transform 0.3s ease;
}

.sync-indicator.syncing .sync-cloud {
    animation: cloudSpin 1.1s ease-in-out infinite;
}

@keyframes cloudSpin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.sync-text {
    white-space: nowrap;
}

.save-indicator {
    background: rgba(107, 114, 128, 0.12);
    border: 1px solid rgba(107, 114, 128, 0.24);
    color: #4b5563;
    padding: 7px 15px;
    border-radius: 5rem;
    font-size: 12px;
    cursor: default;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    white-space: nowrap;
    transition: all 0.25s ease;
}

.save-indicator svg {
    width: 13px;
    height: 13px;
    vertical-align: -2px;
    margin-right: 5px;
    color: #239a4d;
}

@media (max-width: 760px) {
    .save-indicator {
        display: none;
    }
}

/* ---------------- App grid ---------------- */
.apps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.app-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    color: inherit;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, border-color 0.2s ease;
}

.app-tile::after {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 3px;
    background: var(--c, var(--ui-accent));
    opacity: 0;
    transition: opacity 0.2s ease;
}

.app-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.1);
    border-color: var(--soft, rgba(0, 0, 0, 0.1));
}

.app-tile:hover::after {
    opacity: 1;
}

.app-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--soft, var(--ui-accent-soft));
    color: var(--c, var(--ui-accent));
    flex-shrink: 0;
}

.app-tile-icon img {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    object-fit: contain;
}

.app-tile-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.app-tile-name {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-tile-desc {
    font-size: 12px;
    color: #7b828d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ---------------- Main ---------------- */
.suite-main {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 14px 16px 70px;
    flex: 1;
}

/* Hero */
.suite-hero {
    padding-top: 30px;
}

.hero-inner {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 26px;
}

.suite-greeting {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 20px;
    color: #111827;
}
.suite-greeting span { color: var(--ui-accent); }



.suite-search {
    position: relative;
    max-width: 480px;
    margin: 0 auto;
}

.suite-search .search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa1ab;
    pointer-events: none;
}

.suite-search input {
    width: 100%;
    padding: 15px 54px 15px 48px;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.96);
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    color: #1c2833;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.suite-search input::placeholder {
    color: #9aa1ab;
}

.suite-search input:focus {
    border-color: var(--ui-accent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 0 0 4px var(--ui-accent-ring);
}

.suite-search kbd {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #9aa1ab;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 2px 8px;
    pointer-events: none;
}

/* Files section */
.suite-files {
    margin-top: 28px;
}

.files-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.filter-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 12px;
    padding: 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    border: none;
    padding: 8px 14px;
    border-radius: 9px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    transition: all 0.2s ease;
}

.filter-btn:hover {
    background: rgba(0, 0, 0, 0.04);
    color: #1c2833;
}

.filter-btn.active {
    background: var(--ui-accent);
    color: #fff;
    box-shadow: 0 3px 10px rgba(35, 154, 77, 0.35);
}

.fd {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    object-fit: contain;
    display: inline-block;
    flex-shrink: 0;
}

.filter-btn.active .fd {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: 1px;
}

/* Toolbar actions (count + New + sort + refresh) */
.toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.files-count {
    font-size: 13px;
    font-weight: 600;
    color: #9aa1ab;
    white-space: nowrap;
}

/* New dropdown */
.new-wrap {
    position: relative;
}

.btn-new {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--ui-accent);
    border: 1px solid var(--ui-accent);
    color: #fff;
    padding: 8px 16px;
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(35, 154, 77, 0.3);
    transition: all 0.18s ease;
    white-space: nowrap;
}

.btn-new:hover {
    background: var(--ui-accent-hover);
    border-color: var(--ui-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(35, 154, 77, 0.35);
}

.btn-new:active {
    transform: translateY(0);
}

.btn-new-caret {
    transition: transform 0.18s ease;
}

.btn-new[aria-expanded="true"] .btn-new-caret {
    transform: rotate(180deg);
}

/* Sidebar icon for the "New" dropdown */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    cursor: pointer;
    color: #4b5563;
    font-family: 'DM Sans', sans-serif;
    transition: all 0.18s ease;
}

.icon-btn:hover {
    background: rgba(255, 255, 255, 1);
    border-color: var(--ui-accent-border);
    color: var(--ui-accent);
}

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

/* New menu panel */
.new-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    min-width: 260px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px;
    animation: menuIn 0.16s ease-out;
}

.new-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

.new-menu a:hover {
    background: var(--soft, rgba(0, 0, 0, 0.05));
}

.new-menu .new-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--soft, var(--ui-accent-soft));
    color: var(--c, var(--ui-accent));
    flex-shrink: 0;
}

.new-menu .new-menu-icon img {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    object-fit: contain;
}

.new-menu b {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #1c2833;
}

.new-menu small {
    display: block;
    font-size: 12px;
    color: #7b828d;
    margin-top: 1px;
}

.sort-select {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 8px 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    outline: none;
}

.sort-select:focus {
    border-color: var(--ui-accent);
}

/* Files grid */
.files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 16px;
}

.file-card {
    position: relative;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, border-color 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    animation: cardIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes cardIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.file-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
    border-color: var(--border, rgba(0, 0, 0, 0.14));
}

.file-card:focus-visible {
    outline: 3px solid var(--ui-accent-ring);
    outline-offset: 2px;
}

.card-thumb {
    position: relative;
    height: 118px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(150deg, var(--soft, rgba(35, 154, 77, 0.08)), rgba(255, 255, 255, 0.9) 90%);
    overflow: hidden;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.card-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.65), transparent 45%),
        linear-gradient(120deg, transparent 60%, rgba(255, 255, 255, 0.4));
    pointer-events: none;
}

.type-flare {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--c, var(--ui-accent));
}

/* Card hover actions */
.card-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: flex;
    gap: 4px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.file-card:hover .card-actions,
.file-card:focus-within .card-actions {
    opacity: 1;
    transform: translateY(0);
}

.card-actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.95);
    cursor: pointer;
    color: #4b5563;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.18s ease;
    backdrop-filter: blur(3px);
}

.card-actions button:hover {
    color: var(--c, var(--ui-accent));
    border-color: var(--border, var(--ui-accent-border));
    transform: scale(1.06);
}

.card-actions button[data-action="delete"]:hover {
    color: #d93025;
    border-color: rgba(217, 48, 37, 0.4);
    background: rgba(217, 48, 37, 0.06);
}

.card-actions button svg {
    width: 15px;
    height: 15px;
}

/* Mini previews */
.mini-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
}

.mini-note {
    position: relative;
    width: 118px;
    height: 82px;
    background: #fff;
    border-radius: 10px 4px 10px 10px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
    padding: 12px 13px;
}

.mini-note::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 22px;
    height: 22px;
    background: linear-gradient(225deg, transparent 50%, rgba(0, 0, 0, 0.09) 50%);
    border-top-right-radius: 4px;
}

.mini-note::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 22px;
    height: 22px;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    border-right: 1px solid rgba(0, 0, 0, 0.07);
}

.mini-note b {
    display: block;
    height: 6px;
    width: 62%;
    border-radius: 3px;
    background: var(--c, #a21caf);
    opacity: 0.85;
    margin-bottom: 9px;
}

.mini-note i {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: #e2e5ea;
    margin: 6px 0;
}

.mini-note i:nth-child(3) { width: 88%; }
.mini-note i:nth-child(4) { width: 72%; }
.mini-note i:nth-child(5) { width: 92%; }
.mini-note i:nth-child(6) { width: 60%; }

.mini-doc {
    position: relative;
    width: 76px;
    height: 96px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
    padding: 12px 9px;
    transform: rotate(-2.5deg);
}

.mini-doc::after {
    content: "";
    position: absolute;
    top: 1px;
    right: 1px;
    width: 2px;
    height: 100%;
    background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 7px);
    border-radius: 0 4px 4px 0;
}

.mini-doc b {
    display: block;
    height: 7px;
    width: 70%;
    border-radius: 3px;
    background: var(--c, #0891b2);
    opacity: 0.9;
    margin-bottom: 10px;
}

.mini-doc i {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: #dde1e7;
    margin: 5px 0;
}

.mini-doc i:nth-child(2) { width: 86%; }
.mini-doc i:nth-child(3) { width: 94%; }
.mini-doc i:nth-child(4) { width: 78%; }
.mini-doc i:nth-child(5) { width: 90%; }
.mini-doc i:nth-child(6) { width: 64%; }

.mini-slide {
    width: 132px;
    height: 78px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
    transform: rotate(1.6deg);
    overflow: hidden;
    position: relative;
}

.mini-slide .slide-bar {
    height: 15px;
    background: var(--c, #f97316);
    opacity: 0.95;
    display: flex;
    align-items: center;
    padding-left: 8px;
}

.mini-slide .slide-bar i {
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.8);
}

.mini-slide .slide-body {
    padding: 10px;
}

.mini-slide .slide-body i {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: #e2e5ea;
    margin: 6px 0;
}

.mini-slide .slide-body i:nth-child(1) { width: 55%; height: 6px; margin-bottom: 10px; }
.mini-slide .slide-body i:nth-child(2) { width: 82%; }
.mini-slide .slide-body i:nth-child(3) { width: 70%; }

.wb-mini {
    display: grid;
    grid-template-columns: repeat(6, 12px);
    gap: 3px;
    background: #fff;
    padding: 9px;
    border-radius: 8px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.15);
    transform: rotate(-1.2deg);
}

.wb-mini .wb-cell {
    width: 12px;
    height: 12px;
    border: 1px solid #e3e7ec;
    border-radius: 2px;
    background: #fff;
}

.wb-mini .wb-cell.hdr {
    background: var(--soft, rgba(33, 115, 70, 0.14));
    border-color: var(--border, rgba(33, 115, 70, 0.3));
}

.wb-mini .wb-cell.filled {
    background: var(--soft2, rgba(33, 115, 70, 0.32));
    border-color: var(--border, rgba(33, 115, 70, 0.4));
}

/* Card body */
.card-body {
    padding: 12px 14px 13px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.card-title {
    font-size: 14px;
    font-weight: 700;
    color: #1c2833;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #8a919c;
}

.card-meta .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c, var(--ui-accent));
    flex-shrink: 0;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 52px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.empty-state img {
    width: 130px;
    height: auto;
    margin-bottom: 18px;
    opacity: 0.95;
    border-radius: 14px;
}

.empty-state h3 {
    font-size: 1.25rem;
    margin: 0 0 6px;
    font-weight: 700;
}

.empty-state p {
    margin: 0 0 20px;
    color: #8a919c;
    font-size: 14px;
}

/* ---------------- File context menu ---------------- */
.file-menu {
    position: fixed;
    z-index: 10010;
    min-width: 240px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px;
    animation: menuIn 0.16s ease-out;
    overflow: hidden;
}

@keyframes menuIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.file-menu-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 12px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    margin-bottom: 4px;
}

.file-menu-head .fm-title {
    font-size: 13px;
    font-weight: 700;
    color: #1c2833;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 8px;
}

.file-menu-head .fm-icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: var(--soft, var(--ui-accent-soft));
    color: var(--c, var(--ui-accent));
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.file-menu-head .fm-icon svg {
    width: 14px;
    height: 14px;
}

.file-menu-head .fm-meta {
    font-size: 11px;
    font-weight: 500;
    color: #9aa1ab;
}

.file-menu-body {
    display: flex;
    flex-direction: column;
}

.fm-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    text-align: left;
    transition: background 0.15s ease;
}

.fm-item svg {
    width: 14px;
    height: 14px;
    color: #6b7280;
}

.fm-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

.fm-item.fm-danger {
    color: #d93025;
}

.fm-item.fm-danger svg {
    color: #d93025;
}

.fm-item.fm-danger:hover {
    background: rgba(217, 48, 37, 0.07);
}

.fm-sep {
    height: 1px;
    background: rgba(0, 0, 0, 0.07);
    margin: 4px 6px;
}

/* ---------------- Modals ---------------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(18, 27, 39, 0.42);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 20000;
    padding: 20px;
}

.modal-overlay.show {
    display: flex;
    animation: fadeInOverlay 0.2s ease;
}

@keyframes fadeInOverlay {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-dialog {
    width: min(420px, 94vw);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.28);
    padding: 22px;
    animation: slideUpModal 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideUpModal {
    from { opacity: 0; transform: translateY(24px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.modal-head h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: #111827;
}

.modal-x {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #9aa1ab;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 8px;
    transition: all 0.18s ease;
    font-family: 'DM Sans', sans-serif;
}

.modal-x:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #1c2833;
}

.modal-app {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    background: #f3f4f6;
    padding: 5px 12px;
    border-radius: 999px;
    margin: 4px 0 14px;
}

.modal-app svg {
    width: 13px;
    height: 13px;
}

.modal-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    color: #1c2833;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.modal-input:focus {
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 4px var(--ui-accent-ring);
}

.modal-text {
    font-size: 14px;
    color: #4b5563;
    margin: 2px 0 4px;
    line-height: 1.6;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.btn {
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.18s ease;
}

.btn-ghost {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.08);
    color: #4b5563;
}

.btn-ghost:hover {
    background: rgba(0, 0, 0, 0.09);
}

.btn-primary {
    background: var(--ui-accent);
    color: #fff;
    box-shadow: 0 5px 14px rgba(35, 154, 77, 0.3);
}

.btn-primary:hover {
    background: var(--ui-accent-hover);
    transform: translateY(-1px);
}

.btn-danger {
    background: #d93025;
    color: #fff;
    box-shadow: 0 5px 14px rgba(217, 48, 37, 0.3);
}

.btn-danger:hover {
    background: #b71c1c;
    transform: translateY(-1px);
}

/* ---------------- Responsive ---------------- */
@media (max-width: 860px) {
    .apps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .apps-grid {
        grid-template-columns: 1fr 1fr;
    }

    .suite-greeting {
        font-size: 1.9rem;
    }

    .files-count {
        display: none;
    }

    .sync-text {
        display: none;
    }

    .files-toolbar {
        justify-content: flex-start;
    }
}

@media (max-width: 440px) {
    .apps-grid {
        grid-template-columns: 1fr;
    }

    .suite-main {
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .file-card,
    .app-tile,
    .modal-dialog,
    .file-menu {
        animation: none;
        transition: none;
    }
}
/* ====================================================================
   MS365-style overhaul (2026): topbar + icon rail + clean cards
   ==================================================================== */
.suite-app { background: #ffffff; color: #1f1f1f; }
.su-top {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 20px;
  height: 62px; padding: 0 24px 0 20px;
  background: #faf9f8;
}
/* Shadow cast by the main canvas onto the chrome. Both pieces share one light
   direction: the canvas sits right of the rail and below the bar, so the shadow
   reaches full strength away from their shared top-left corner and is fully
   absent at the corner itself. The mask therefore starts at 0 opacity on the
   corner side and plateaus at full past the fade — no residual tint in the
   corner, so the bar and rail can't read as two stacked layers. */
.su-top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9px;
  pointer-events: none;
  background: linear-gradient(to top, rgba(15, 22, 17, .045), rgba(15, 22, 17, 0));
  /* transparent at x=0 (the corner); the fade is compressed into a narrow band
     so the shadow arrives quickly instead of smearing across half the bar.
     The band sits to the right of the rail column so nothing lands on the
     left edge of the screen. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 60px, rgba(0, 0, 0, .35) 78px, #000 96px);
          mask-image: linear-gradient(to right, transparent 0, transparent 60px, rgba(0, 0, 0, .35) 78px, #000 96px);
}
.su-top .logo { display: flex; align-items: center; gap: 9px; margin-top: 3px; text-decoration: none; color: inherit; flex: none; }
.su-search {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, 46vw); max-width: 560px;
  display: flex; align-items: center; gap: 8px;
  background: #ffffff; border-radius: 8px; box-shadow: 0 4px 6px -1px rgb(221 221 221 / 50%); border: 1px solid #d3d3d3;
  padding: 7px 12px; color: #605e5c;
}
.su-search:focus-within { background: #fff; border-color: var(--ui-accent-border); box-shadow: 0 0 0 3px var(--ui-accent-soft); }
.su-search input { border: none; background: transparent; outline: none; flex: 1; font-size: 13.5px; color: #201f1e; min-width: 0; }
.su-search input::placeholder { color: #8a8886; }
.su-search kbd { background: #fff; border: 1px solid #edebe9; border-radius: 4px; padding: 0 5px; font: 11px/1.6 var(--font-ui, sans-serif); color: #8a8886; }
.su-top-right { display: flex; align-items: center; gap: 14px; flex: none; margin-left: auto; }
.su-sync { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; cursor: pointer; font-size: 12px; color: #605e5c; padding: 4px 8px; border-radius: 6px; }
.su-sync:hover { background: #f3f2f1; }
.su-sync-dot { width: 8px; height: 8px; border-radius: 50%; background: #239a4d; transition: background .2s; }
.su-sync.syncing .su-sync-dot { background: #f59e0b; animation: suSyncPulse 1s infinite alternate; }
@keyframes suSyncPulse { from { opacity: .4 } to { opacity: 1 } }
.su-appnav { display: flex; gap: 2px; }
.su-appnav a { text-decoration: none; color: #605e5c; font-size: 13px; font-weight: 500; padding: 6px 10px; border-radius: 6px; }
.su-appnav a:hover { background: #f3f2f1; color: var(--ui-accent); }

.su-shell { display: flex; align-items: stretch; flex: 1; min-height: 0; }
.su-rail {
  position: sticky; top: 62px; z-index: 1; align-self: flex-start; height: calc(100vh - 62px);
  width: 68px; flex: none; background: #faf9f8;
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0;
}
/* Right-edge shadow cast by the main canvas onto the rail. Drawn as a gradient
   layer rather than an inset box-shadow for the same reason as .su-top::after:
   box-shadow has a hard rectangular end, which showed as a cut. Mask mirrors
   the bar's — absent at the top (their shared corner), easing in downward,
   full past the fade. */
.su-rail::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 9px;
  pointer-events: none;
  background: linear-gradient(to left, rgba(15, 22, 17, .035), rgba(15, 22, 17, 0));
  /* transparent at y=0 (the corner); fade compressed to a narrow band, mirroring
     the bar's 11% so both arrive at full strength at the same visual rate */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 6px, rgba(0, 0, 0, .35) 14px, #000 22px);
          mask-image: linear-gradient(to bottom, transparent 0, transparent 6px, rgba(0, 0, 0, .35) 14px, #000 22px);
}
.rail-item {
  display: flex; align-items: center; justify-content: center;
  width: 48px; padding: 10px 0; border-radius: 8px; text-decoration: none;
  color: #605e5c; font-size: 10.5px; font-weight: 500; line-height: 1.2; text-align: center;
}
.rail-item span { display: none; }
.rail-item:hover { background: #f3f2f1; color: #201f1e; }
.rail-item.active { color: var(--ui-accent); }

.suite-main { flex: 1; min-width: 0; padding: 28px 32px 56px; max-width: 1460px; margin: 0 auto; width: 100%; }
.suite-hero { padding: 7rem 0 18px; }
.suite-greeting { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; color: #201f1e; margin: 0 0 4px; }
.suite-subtitle { font-size: 13px; color: #8a8886; margin: 0; }

/* App create cards — like MS365 Create row */
.apps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 10px 0 28px; }
.app-tile {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid #edebe9; border-radius: 12px;
  padding: 14px 16px; text-decoration: none; color: inherit;
  transition: box-shadow .15s, border-color .15s, transform .15s;
}
.app-tile:hover { box-shadow: 0 4px 18px rgba(0,0,0,.07); border-color: var(--c, #edebe9); transform: translateY(-1px); }
.app-tile::after { display: none; }
.app-tile-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--soft, #f3f2f1); flex: none; }
.app-tile-icon img { width: 24px; height: 24px; }
.app-tile-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.app-tile-name { font-size: 14px; font-weight: 700; color: #201f1e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-tile-desc { font-size: 11.5px; color: #8a8886; }

/* Files toolbar — filter chips like MS365 */
.files-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid #edebe9; border-radius: 999px;
  padding: 6px 13px; font-size: 12.5px; font-weight: 500; color: #605e5c; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.filter-btn:hover { border-color: var(--ui-accent-border); color: #201f1e; }
.filter-btn.active { background: #201f1e; border-color: #201f1e; color: #fff; }
.filter-btn .fd { width: 14px; height: 14px; }
.toolbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.files-count { font-size: 12px; color: #8a8886; margin-right: 4px; }
.btn-new {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--ui-accent); color: #fff; border: none; border-radius: 8px;
  padding: 8px 13px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s, transform .12s;
}
.btn-new:hover { background: var(--ui-accent-hover); }
.btn-new:active { transform: scale(.97); }
.sort-select, .icon-btn {
  background: #fff; border: 1px solid #edebe9; border-radius: 8px;
  padding: 8px 10px; font-size: 12.5px; color: #605e5c; cursor: pointer;
}
.sort-select:focus, .icon-btn:hover { border-color: var(--ui-accent-border); }

/* File cards — clean MS365 recommended style */
.files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.file-card { background: #fff; border: 1px solid #edebe9; border-radius: 12px; overflow: hidden; cursor: pointer; transition: box-shadow .15s, border-color .15s, transform .15s; }
.file-card:hover { box-shadow: 0 6px 22px rgba(0,0,0,.08); border-color: #d8d8d8; transform: translateY(-1px); }
.card-thumb { position: relative; height: 132px; background: var(--soft, #f3f2f1); overflow: hidden; }
.card-thumb::before { display: none; }
.type-flare { position: absolute; inset: 0; background: linear-gradient(135deg, var(--soft) 0%, transparent 70%); }
.card-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 2px; opacity: 0; transition: opacity .15s; background: rgba(255,255,255,.85); border-radius: 8px; padding: 2px; }
.file-card:hover .card-actions, .file-card:focus-within .card-actions { opacity: 1; }
.card-actions button { border: none; background: transparent; cursor: pointer; padding: 5px; border-radius: 6px; color: #605e5c; }
.card-actions button:hover { background: #edebe9; color: #201f1e; }
.card-body { padding: 11px 13px 13px; }
.card-title { font-size: 13.5px; font-weight: 600; color: #201f1e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-meta { font-size: 11.5px; color: #8a8886; margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.card-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c, #8a8886); flex: none; }

/* Empty state */
.empty-state { text-align: center; padding: 56px 20px; color: #605e5c; }
.empty-state img { width: 48px; height: 48px; opacity: .8; margin-bottom: 12px; }
.empty-state h3 { font-size: 16px; font-weight: 600; color: #201f1e; margin: 0 0 4px; }
.empty-state p { font-size: 13px; margin: 0 0 16px; color: #8a8886; }

/* New menu */
.new-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 70;
  background: #fff; border: 1px solid #edebe9; border-radius: 12px;
  box-shadow: 0 10px 34px rgba(0,0,0,.14); padding: 8px; min-width: 250px;
}
.new-menu a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; text-decoration: none; color: inherit; }
.new-menu a:hover { background: #f3f2f1; }
.new-menu .new-menu-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--soft, #f3f2f1); display: flex; align-items: center; justify-content: center; flex: none; }
.new-menu b { display: block; font-size: 13.5px; font-weight: 600; color: #201f1e; }
.new-menu small { font-size: 11.5px; color: #8a8886; }

@media (max-width: 900px) {
  .apps-grid { grid-template-columns: repeat(2, 1fr); }
  .su-appnav { display: none; }
  .su-rail { width: 56px; }
  .rail-item { width: 48px; }
  .rail-item span { font-size: 9.5px; }
}
@media (max-width: 640px) {
  .suite-main { padding: 16px 14px 48px; }
  .apps-grid { grid-template-columns: 1fr; }
  .su-rail { display: none; }
  .toolbar-actions { margin-left: 0; width: 100%; }
}

/* Storage popup */
.su-storage-btn { width: 34px; height: 34px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.su-storage-btn svg { width: 18px; height: 18px; }
.storage-pop {
  position: fixed; top: 66px; right: 20px; z-index: 90; width: 250px;
  background: #fff; border: 1px solid #edebe9; border-radius: 12px;
  box-shadow: 0 12px 38px rgba(0,0,0,.14); padding: 14px 16px;
}
.storage-pop[hidden] { display: none; }
.storage-pop h3 { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: #201f1e; }
.storage-row { display: flex; justify-content: space-between; font-size: 12.5px; color: #605e5c; padding: 3px 0; }
.storage-row b { color: #201f1e; font-weight: 600; }
.storage-bar { height: 6px; background: #f0f0f0; border-radius: 999px; margin: 10px 0 6px; overflow: hidden; }
.storage-bar i { display: block; height: 100%; background: var(--ui-accent); border-radius: 999px; transition: width .3s; }
.storage-note { margin: 0; font-size: 11.5px; color: #8a8886; }

/* Storage popup entrance */
.storage-pop { animation: suPopIn .16s ease-out; }
@keyframes suPopIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Storage popup close animation */
.storage-pop.closing { animation: suPopOut .14s ease-in forwards; }
@keyframes suPopOut { to { opacity: 0; transform: translateY(-6px); } }

/* Active rail item: left green pill. z-index keeps the item (and its pill)
   above .su-rail::after, which is a positioned overlay on the rail. */
.rail-item { position: relative; z-index: 1; }
.rail-item.active::before {
  content: ""; position: absolute; left: -4px; top: 10px; bottom: 10px;
  width: 4px; border-radius: 4px; background: var(--ui-accent);
}

/* Section titles + polish */
.su-section-title { font-size: 13px; font-weight: 700; color: #605e5c; text-transform: uppercase; letter-spacing: .06em; margin: 22px 0 10px; }
.suite-hero .su-section-title { margin-top: 4px; }
.app-tile { position: relative; }
.card-thumb { display: flex; align-items: center; justify-content: center; }
.card-thumb img, .card-thumb svg { width: 44px; height: 44px; opacity: .9; }

/* Author display rules above were overriding the hidden attribute */
.empty-state[hidden] { display: none; }
.new-menu[hidden], .file-menu[hidden] { display: none; }

/* Keep the logo square (style.css .logo .icon-primary was stretching it) */
.su-top .logo .icon-primary { width: 28px; height: 28px; object-fit: contain; margin-bottom: 0; }

/* Storage icon: no filled box */
.su-storage-btn { background: transparent !important; border: none !important; box-shadow: none; }

/* Search input font fix */
.su-search input, .su-search input::placeholder { font-family: 'DM Sans', -apple-system, sans-serif; letter-spacing: 0; }

/* Search icon matches placeholder color */
.su-search svg { color: #8a8886; }

/* ---------------------------------------------------------------------------
   Time-of-day background

   Two stacked layers so each can move on its own clock:
     ::before — the colour wash (slow drift/scale)
     ::after  — the detail (rotating sunburst / drifting clouds / twinkling stars)

   Both cover roughly the top half of the viewport and fade into the white page.
   The variant comes from [data-daypart] on .suite-app, set by the same
   daypartFor() call that picks the greeting, so text and art always agree.
   --------------------------------------------------------------------------- */
/* `clip`, NOT `hidden`: the sky layers below need to be clipped, but
   `overflow: hidden` would turn .su-shell into a scroll container, and the
   sidebar's `position: sticky` resolves against the nearest scrollport —
   so the rail would stop following the viewport and scroll away with the page.
   `overflow: clip` clips the same content without creating a scrollport. */
.su-shell { position: relative; overflow: clip; }
.su-shell::before,
.su-shell::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 62vh;
  pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 38%, transparent 76%);
          mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 38%, transparent 76%);
  will-change: transform;
}

/* ---- base wash: afternoon, open white-and-blue sky ----
   Deliberately STATIC. An earlier version drifted/scaled this layer, which read
   as the whole page sliding around — all motion now lives in discrete local
   features (rays, clouds, stars) instead of on the wash.

   The blue is carried well past the old ~.30 wash: the cloud puffs sit on this
   layer at up to .97 white, so a faint sky left them invisible. A deeper, more
   saturated gradient (and a stronger hold through the middle of the viewport)
   gives the white clouds something to read against. It still fades to the white
   page well above the file list. */
.su-shell::before {
  background:
    radial-gradient(1100px 760px at 8% -6%, rgba(35, 154, 77, .30), transparent 66%),
    radial-gradient(1200px 820px at 94% 4%, rgba(8, 145, 178, .34), transparent 68%),
    radial-gradient(1400px 900px at 50% -20%, rgba(249, 115, 22, .16), transparent 68%),
    /* deeper sky at the top, holding well down the viewport before clearing */
    linear-gradient(to bottom,
      rgba(126, 183, 235, .62) 0%,
      rgba(160, 206, 245, .52) 34%,
      rgba(198, 226, 250, .34) 66%,
      transparent 92%);
}

/* ---- detail layer: afternoon clouds ----
   Each cloud is stacked from many overlapping ellipses: a wide flat base, a
   row of puffs along the top, and a couple of taller towers. The puffs are
   deliberately uneven in size and spacing — evenly-sized bumps read as a
   mechanical pattern, whereas a lopsided pile reads as a cloud.
   Radial falloff ends at ~52% to hold a defined edge, and each cloud carries
   a wide thin blue-grey ellipse underneath for the shadow line. */
.su-shell::after {
  background:
    /* ── cloud 1 — upper left, the largest ── */
    radial-gradient(300px 92px at 14% 12%, rgba(255,255,255,.97), transparent 52%),
    radial-gradient(232px 108px at 6% 11%, rgba(255,255,255,.95), transparent 52%),
    radial-gradient(196px 84px at 19% 10%, rgba(255,255,255,.94), transparent 52%),
    radial-gradient(158px 116px at 12% 8%, rgba(255,255,255,.93), transparent 52%),
    radial-gradient(120px 78px at 25% 12%, rgba(255,255,255,.88), transparent 54%),
    radial-gradient(104px 66px at 33% 14%, rgba(255,255,255,.78), transparent 56%),
    radial-gradient(126px 44px at 28% 17%, rgba(255,255,255,.62), transparent 58%),
    radial-gradient(330px 34px at 16% 19%, rgba(150, 182, 220, .52), transparent 66%),
    radial-gradient(250px 22px at 10% 20%, rgba(150, 182, 220, .34), transparent 68%),

    /* ── cloud 2 — mid right, second largest ── */
    radial-gradient(268px 84px at 63% 24%, rgba(255,255,255,.93), transparent 52%),
    radial-gradient(204px 102px at 54% 23%, rgba(255,255,255,.91), transparent 52%),
    radial-gradient(170px 76px at 70% 22%, rgba(255,255,255,.89), transparent 52%),
    radial-gradient(140px 108px at 60% 19%, rgba(255,255,255,.88), transparent 52%),
    radial-gradient(112px 72px at 74% 25%, rgba(255,255,255,.82), transparent 54%),
    radial-gradient(98px 60px at 79% 27%, rgba(255,255,255,.70), transparent 56%),
    radial-gradient(290px 30px at 64% 29%, rgba(150, 182, 220, .46), transparent 66%),

    /* ── cloud 3 — far right, medium ── */
    radial-gradient(208px 76px at 89% 9%, rgba(255,255,255,.90), transparent 52%),
    radial-gradient(164px 96px at 81% 8%, rgba(255,255,255,.88), transparent 52%),
    radial-gradient(132px 66px at 95% 10%, rgba(255,255,255,.80), transparent 54%),
    radial-gradient(104px 84px at 86% 6%, rgba(255,255,255,.84), transparent 52%),
    radial-gradient(226px 26px at 88% 14%, rgba(150, 182, 220, .42), transparent 66%),

    /* ── cloud 4 — low left, under the greeting, faint ── */
    radial-gradient(186px 58px at 36% 39%, rgba(255,255,255,.64), transparent 54%),
    radial-gradient(148px 70px at 28% 38%, rgba(255,255,255,.60), transparent 54%),
    radial-gradient(114px 52px at 44% 40%, rgba(255,255,255,.52), transparent 56%),

    /* ── cloud 5 — small high wisp, top centre ── */
    radial-gradient(122px 40px at 47% 4%, rgba(255,255,255,.70), transparent 54%),
    radial-gradient(96px 52px at 42% 3%, rgba(255,255,255,.66), transparent 54%);
  animation: suCloudBreathe 15s ease-in-out infinite alternate;
}

/* ---- morning: warm dawn wash + pure-white godrays ---- */
[data-daypart="morning"] .su-shell::before {
  background:
    radial-gradient(760px 620px at 90% -4%, rgba(253, 224, 71, .48), transparent 64%),
    radial-gradient(1500px 700px at 50% -24%, rgba(253, 230, 138, .34), transparent 70%),
    radial-gradient(900px 520px at 6% 2%, rgba(251, 191, 36, .18), transparent 66%),
    linear-gradient(to bottom, rgba(255, 236, 179, .40), transparent 58%);
}
/* This layer now carries only the sun disc and its bloom — the shafts
   themselves are .su-ray nodes, because a conic gradient draws wedges that
   fan outward from the centre, whereas godrays are near-parallel shafts of
   even width that only splay slightly as they travel. */
/* Sun disc + bloom, positioned to line up with the .su-rays anchor at 92% so
   the shafts appear to leave the light source. */
/* Sun disc + bloom, positioned to line up with the .su-rays anchor at 92% so
   the shafts appear to leave the light source. Also pure white, so the source
   and the beams read as one light rather than a warm core with white shafts. */
[data-daypart="morning"] .su-shell::after {
  background:
    radial-gradient(160px 160px at 92% -8%, #fff, transparent 70%),
    radial-gradient(540px 480px at 90% -6%, rgba(255, 255, 255, .60), transparent 68%),
    radial-gradient(760px 300px at 68% 20%, rgba(255, 252, 240, .34), transparent 74%);
  opacity: .95;
}

/* Godray shafts: each is a soft white bar anchored at the sun and rotated to
   fan toward the centre. Pure white (no tint) at near-full strength, tapered by
   the gradient and diffused by a heavy blur, shimmered out of sync so they read
   as light moving through cloud. */
.su-rays { position: absolute; left: 92%; top: -8%; width: 0; height: 0; }
.su-ray {
  position: absolute; left: 0; top: 0; width: var(--w, 90px); height: 240vh;
  transform-origin: 0 0; border-radius: 999px;
  /* Pure white held near-opaque for most of the run, then cut to nothing late
     so the blur has room to dissolve the tail. The heavy blur is what spreads
     each shaft into the air; without it they read as flat stripes. */
  background: linear-gradient(to bottom,
    #fff 0%,
    rgba(255, 255, 255, .98) 50%,
    rgba(255, 255, 255, .68) 74%,
    rgba(255, 255, 255, 0) 96%);
  filter: blur(var(--blur, 18px));
  animation: suRayShimmer var(--dur, 9s) ease-in-out var(--delay, 0s) infinite alternate;
}

/* ---- evening: Milky Way band ----
   Built in three layers to get real depth:
     ::before — nebula: deep space base, then coloured gas clouds (teal low
                left, blue centre, magenta right), a warm galactic-core glow,
                and dark dust lanes laid on top to break the clouds up.
     ::after  — a fine dust of tiny background stars baked into gradients.
     .su-sky  — the bright foreground stars + shooting star, as DOM nodes.

   The clouds breathe independently of each other so the whole field never
   pulses in unison, which is what makes flat CSS skies look cheap. */
[data-daypart="evening"] .su-shell::before {
  background:
    /* dark dust lanes — dark on light clouds, so they go last (on top).
       Kept light so the whole scene reads as a luminous, milky night rather
       than a heavy black one. */
    radial-gradient(300px 90px at 26% 40%, rgba(10, 16, 40, .30), transparent 72%),
    radial-gradient(180px 60px at 52% 22%, rgba(10, 16, 40, .26), transparent 72%),
    radial-gradient(240px 70px at 74% 34%, rgba(10, 16, 40, .28), transparent 72%),
    /* warm galactic core, sitting on the band */
    radial-gradient(460px 220px at 62% 30%, rgba(255, 245, 228, .44), transparent 70%),
    radial-gradient(240px 130px at 60% 31%, rgba(255, 238, 214, .46), transparent 68%),
    /* magenta / rose gas */
    radial-gradient(620px 300px at 78% 26%, rgba(214, 116, 168, .40), transparent 70%),
    radial-gradient(380px 210px at 84% 34%, rgba(238, 142, 182, .32), transparent 70%),
    /* violet */
    radial-gradient(700px 340px at 58% 16%, rgba(134, 100, 196, .38), transparent 70%),
    /* blue gas */
    radial-gradient(820px 400px at 46% 28%, rgba(88, 134, 214, .40), transparent 70%),
    radial-gradient(520px 260px at 34% 34%, rgba(104, 154, 224, .32), transparent 70%),
    /* teal / cyan, low left like the reference */
    radial-gradient(880px 380px at 14% 46%, rgba(58, 172, 178, .40), transparent 70%),
    radial-gradient(560px 280px at 8% 54%, rgba(74, 192, 186, .34), transparent 70%),
    radial-gradient(420px 220px at 22% 56%, rgba(90, 206, 196, .28), transparent 72%),
    /* deep space base — a soft indigo haze, not near-black. The gas clouds sit on
       this layer, so the darker the base the more they mute into it. */
    radial-gradient(1500px 900px at 50% -10%, rgba(30, 40, 78, .34), transparent 74%),
    /* Lifted and clearing early: the page returns to white well before the file
       list, and the whole band reads airy rather than dense. */
    linear-gradient(to bottom, rgba(46, 58, 104, .38), rgba(58, 74, 124, .26) 34%, transparent 72%);
  animation: suNebulaBreathe 26s ease-in-out infinite alternate;
}

/* fine background dust of stars, baked in — cheap, and they sit behind the
   bright DOM stars so the field reads as having depth */
[data-daypart="evening"] .su-shell::after {
  background:
    radial-gradient(1px 1px at 12% 8%,  rgba(255,255,255,.70), transparent 60%),
    radial-gradient(1px 1px at 19% 31%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 27% 14%, rgba(214,232,255,.80), transparent 60%),
    radial-gradient(1px 1px at 34% 46%, rgba(255,255,255,.50), transparent 60%),
    radial-gradient(1.5px 1.5px at 41% 22%, rgba(255,246,230,.75), transparent 60%),
    radial-gradient(1px 1px at 48% 9%,  rgba(255,255,255,.60), transparent 60%),
    radial-gradient(1px 1px at 55% 38%, rgba(206,226,255,.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 63% 18%, rgba(255,255,255,.70), transparent 60%),
    radial-gradient(1px 1px at 70% 44%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1px 1px at 77% 12%, rgba(232,240,255,.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 85% 29%, rgba(255,248,236,.70), transparent 60%),
    radial-gradient(1px 1px at 92% 17%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 6% 22%,  rgba(255,255,255,.50), transparent 60%),
    radial-gradient(1px 1px at 60% 6%,  rgba(255,255,255,.40), transparent 60%);
  animation: suNebulaBreathe 34s ease-in-out infinite alternate-reverse;
}

/* ---- starfield + shooting star (built by JS into #skyLayer) ---- */
.su-sky {
  display: none;
  position: absolute; left: 0; right: 0; top: 0; height: 62vh;
  pointer-events: none; z-index: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 34%, transparent 70%);
          mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 34%, transparent 70%);
}
[data-daypart="evening"] .su-sky { display: block; }
/* Morning uses the same layer for its godrays (stars/shooting star aren't built). */
[data-daypart="morning"] .su-sky { display: block; }
/* Bright foreground stars. --tint varies the hue per star (white, blue-white,
   warm) so the field has colour variety instead of uniform dots. */
.su-star {
  position: absolute; border-radius: 50%; background: var(--tint, #fff);
  animation: suTwinkle var(--dur, 4s) ease-in-out var(--delay, 0s) infinite alternate;
}
.su-star.big { box-shadow: 0 0 7px 1px var(--glow, rgba(255, 255, 255, .5)); }
.su-star.big::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  background: radial-gradient(circle, var(--glow, rgba(255,255,255,.5)) 0%, transparent 70%);
  opacity: .5;
}
.su-shooting {
  position: absolute; top: 4%; right: -6%; height: 2px; width: 150px;
  border-radius: 2px; opacity: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95));
  transform: rotate(26deg); transform-origin: 100% 50%;
  animation: suShoot 13s cubic-bezier(.35, 0, .6, 1) infinite;
}

/* The scene is light enough now that the greeting's dark text reads on its
   own; the halo stays as a safety net over the denser mid-band. */
[data-daypart="evening"] .suite-greeting { text-shadow: 0 1px 12px rgba(255, 255, 255, .25); }

.suite-main > * { position: relative; z-index: 1; }

/* ---- motion: local features only ---- */
/* Clouds swell and soften out of phase. The floor stays high so they never
   dissolve — these are meant to read as clouds, not as haze. */
@keyframes suCloudBreathe {
  from { opacity: .88; }
  to   { opacity: 1; }
}
/* The nebula breathes very gently and on a long cycle. Two layers run this with
   opposite directions (see .su-shell::before / ::after) so they never rise and
   fall together — that shared phase is what makes a CSS sky look artificial. */
@keyframes suNebulaBreathe {
  from { opacity: .82; }
  to   { opacity: 1; }
}
/* One shaft breathing on its own period; --dur/--delay set per ray in JS.
   The floor stays high so the rays never fully dim out of view. */
@keyframes suRayShimmer {
  from { opacity: .82; }
  to   { opacity: 1; }
}
/* One star's own cycle; --delay and --dur are set per element in JS */
@keyframes suTwinkle {
  from { opacity: .15; transform: scale(.75); }
  to   { opacity: 1;   transform: scale(1.2); }
}
/* Sits off-stage for most of each cycle, then streaks once */
@keyframes suShoot {
  0%, 58%   { opacity: 0; transform: rotate(26deg) translate3d(0, 0, 0); }
  62%       { opacity: 1; }
  76%, 100% { opacity: 0; transform: rotate(26deg) translate3d(-680px, 380px, 0); }
}

/* Motion is decorative here — freeze everything when the user asks for it. */
@media (prefers-reduced-motion: reduce) {
  .su-shell::before,
  .su-shell::after,
  .su-star,
  .su-shooting,
  [data-daypart="morning"] .su-shell::before,
  [data-daypart="morning"] .su-shell::after,
  [data-daypart="evening"] .su-shell::before,
  [data-daypart="evening"] .su-shell::after {
    animation: none;
  }
  .su-shooting { display: none; }
}

/* Quick access polish: cleaner toolbar + cards */
.suite-files { margin-top: 4px; }
.files-toolbar { padding-bottom: 2px; }
.filter-btn { box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.filter-btn.active { box-shadow: none; }
.files-grid { gap: 14px; }
.file-card { border-color: #ececec; }

/* Search focus mode: Recent files + Quick access fade and collapse so the
   filtered results in "Your files" move up under the cursor. Uses grid-template-rows
   1fr → 0fr rather than display:none so the height animates smoothly, and the
   inner wrapper (min-height:0) is what actually clips — animating the outer
   element's height would fight the padding and margins. */
/* The blocks aren't hidden while searching — they recede: height collapses so
   "Your files" moves up, while a blur + fade reads them as out-of-focus
   background rather than removed content. */
.collapsible {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows .34s ease, opacity .3s ease,
              filter .3s ease, transform .34s ease, margin .34s ease;
  min-height: 0;
  transform-origin: 50% 0;
}
/* The single child that gets collapsed and clipped. min-height:0 is required —
   without it the grid item refuses to shrink below its content and the row
   stays open. */
.collapsible-inner { min-height: 0; overflow: hidden; }
.suite-main.searching .collapsible {
  grid-template-rows: 0fr;
  opacity: .22;
  filter: blur(7px);
  transform: scale(.985) translateY(-6px);
  pointer-events: none;
  /* collapse the section spacing too, so nothing is left stranded */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* filter is on the wrapper, but the grid track must still clip its child —
   otherwise the blurred content bleeds past the collapsed height. */
.collapsible-inner > * { transition: opacity .3s ease; }
.suite-main.searching .collapsible-inner > * { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .collapsible,
  .collapsible-inner > * { transition: none; }
  .suite-main.searching .collapsible { grid-template-rows: 0fr; }
  .suite-main.searching .collapsible-inner > * { opacity: 1; }
}

/* Your files — list rows. Same hooks as .file-card, laid out horizontally:
   preview, title + meta, edited time. */
.files-grid { display: block; }
.file-row {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid #ececec; border-radius: 10px;
  padding: 10px 14px; margin-bottom: 8px; cursor: pointer;
  transition: box-shadow .15s, border-color .15s, background .15s;
}
.file-row:last-child { margin-bottom: 0; }
.file-row:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); border-color: #dcdcdc; }
.file-row:focus-visible { outline: 2px solid var(--ui-accent-border); outline-offset: 1px; }
.row-thumb {
  position: relative; flex: none; width: 84px; height: 56px;
  border-radius: 8px; background: var(--soft, #f3f2f1); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* The mini previews are authored at card size (118x82 note, 132x78 slide,
   76x96 doc). Scale the whole preview down to fit the 84x56 row thumbnail
   rather than restyling each variant twice. */
.row-thumb .mini-wrap { transform: scale(.46); transform-origin: center; padding: 0; }
.row-main { flex: 1; min-width: 0; }
.row-title { font-size: 14px; font-weight: 600; color: #201f1e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-meta { font-size: 12px; color: #8a8886; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-time { flex: none; font-size: 12px; color: #8a8886; }
@media (max-width: 640px) { .row-time { display: none; } }

/* Recent files — same markup as .file-card, sized up so the three most recent
   read as the hero row above the full "Your files" grid. */
.recent-wrap { margin-bottom: 26px; }
.recent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.recent-card { background: #fff; border: 1px solid #ececec; border-radius: 14px; overflow: hidden; cursor: pointer; transition: box-shadow .15s, border-color .15s, transform .15s; }
.recent-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.09); border-color: #d8d8d8; transform: translateY(-2px); }
.recent-card .card-thumb { height: 168px; }
.recent-card .card-thumb img, .recent-card .card-thumb svg { width: 68px; height: 68px; opacity: .92; }
.recent-card .card-body { padding: 14px 16px 16px; }
.recent-card .card-title { font-size: 16px; margin-bottom: 2px; }
.recent-card .card-meta { font-size: 12px; }
.recent-empty { font-size: 13px; color: #8a8886; padding: 26px 0; text-align: center; }
.recent-empty[hidden] { display: none; }
@media (max-width: 900px) { .recent-grid { grid-template-columns: 1fr; } }
.card-thumb { height: 118px; }
.card-body { padding: 12px 14px 14px; }
.card-title { font-size: 14px; }
.card-meta { margin-top: 5px; }
.sort-select, .icon-btn { height: 34px; }

/* Filter chips as the Slides "Timing > Start" segmented toggle */
.filter-bar {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px;
  background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 7px; box-shadow: rgba(0, 0, 0, 0.04) 0 1px 2px inset;
}
.filter-btn {
  padding: 6px 12px; background: transparent; border: none; box-shadow: none;
  border-radius: 6px; font-size: 12.5px; font-weight: 600; color: rgba(44, 62, 80, 0.7);
  transition: background .18s, color .18s, box-shadow .18s;
}
.filter-btn:hover { color: rgba(44, 62, 80, 0.95); background: rgba(255, 255, 255, 0.6); }
.filter-btn.active { background: #fff; color: var(--ui-accent); box-shadow: rgba(0,0,0,.08) 0 1px 2px, rgba(35,154,77,.15) 0 0 0 1px; }
.filter-btn .fd { width: 14px; height: 14px; }

/* Custom sort dropdown */
.sort-dd { position: relative; }
.sort-dd-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 34px;
  background: #fff; border: 1px solid #edebe9; border-radius: 8px;
  padding: 0 11px; font-size: 12.5px; color: #605e5c; cursor: pointer; font-family: 'DM Sans', -apple-system, sans-serif;
}
.sort-dd-btn:hover { border-color: var(--ui-accent-border); }
.sort-dd-btn .caret { transition: transform .15s; }
.sort-dd-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.sort-dd-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 70;
  background: #fff; border: 1px solid #edebe9; border-radius: 12px;
  box-shadow: 0 10px 34px rgba(0,0,0,.14); padding: 6px; min-width: 170px;
  animation: menuIn .16s ease-out;
}
.sort-dd-menu[hidden] { display: none; }
.sort-dd-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 7px 10px; border-radius: 8px; font-size: 12.5px; color: #605e5c; cursor: pointer; font-family: 'DM Sans', -apple-system, sans-serif;
}
.sort-dd-item:hover { background: #f3f2f1; color: #201f1e; }
.sort-dd-item.active { color: var(--ui-accent); font-weight: 600; background: var(--ui-accent-soft); }
/* Smooth scrolling is motion the user didn't ask for — turn it off when the
   OS requests reduced motion, matching every other animation on this page. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}