* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: linear-gradient(135deg, #3171F6 0%, #1a56d6 100%);
    min-height: 100vh;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* Nothing in this layout should ever need horizontal page scroll —
       a defensive backstop, not currently known to be needed here (no
       off-canvas/transform panels on mobile anymore), but cheap insurance. */
    overflow-x: hidden;
}

/* Main app page only (see the app-body class in todo_list.html) — style.css
   is shared with login/register/password-reset pages, which keep the
   original floating-card-on-blue look above; this scoping avoids leaking
   the change onto them. No more floating white card on a blue page
   background, on desktop or mobile — dated look, and on mobile it was
   also the source of a never-quite-fixed Safari bottom-toolbar rendering
   gap (see troubleshooting_safari_toolbar_gap memory): any tiny height
   mismatch showed as a stray sliver of blue. White-on-white makes that
   structurally invisible even where the Safari quirk persists. */
body.app-body {
    background: white;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
}

/* Full-width header bar behind the fixed-position icon cluster (wordmark,
   search, notifications, settings, user menu) — a ::before rather than a
   template change, since those icons are already independently
   position:fixed and just need something visible behind them now that
   .app-body is white, not blue. */
body.app-body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(135deg, #3171F6 0%, #1a56d6 100%);
    z-index: 150;
}

/* Main app page only (see the app-body class in todo_list.html) — style.css
   is shared with login/register/password-reset pages, which keep the
   original floating-card-on-blue look above. No more floating white card
   on a blue page background — it dated back to the very first version of
   this app and looked dated next to the native app's plain full-bleed
   design. */
body.app-body {
    background: white;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
}

/* Full-width header bar behind the fixed-position icon cluster (wordmark,
   search, notifications, settings, user menu) — a ::before rather than a
   template change, since those icons are already independently
   position:fixed and just need something visible behind them now that
   .app-body is white, not blue. */
body.app-body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(135deg, #3171F6 0%, #1a56d6 100%);
    z-index: 150;
}

.container {
    width: 100%;
    margin-top: 0;
    /* Clears the fixed 60px header bar above. */
    padding-top: 60px;
}

.todo-app {
    background: white;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    animation: slideIn 0.5s ease-out;
    overflow: visible;
    /* vh includes space the mobile browser's address/toolbar chrome can be
       covering, so the box can end up taller than what's actually visible —
       pushing the scrollable item list below the fold with no way to reach
       it. dvh accounts for that; kept as a second declaration (not a
       replacement) so browsers without dvh support fall back to vh. */
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);
}

.app-name {
    position: fixed;
    top: 8px;
    left: 20px;
    height: 44px;
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.3px;
    z-index: 200;
    pointer-events: none;
}

.update-btn {
    position: fixed;
    top: 15px;
    right: 185px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 6px;
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    cursor: pointer;
    z-index: 200;
    transition: background 0.2s;
}
.update-btn svg {
    flex-shrink: 0;
}
.update-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.settings-btn {
    position: fixed;
    top: 8px;
    right: 64px;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    padding: 0;
    border-radius: 8px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, background 0.2s ease;
    z-index: 200;
}

.settings-btn:hover,
.settings-btn.active {
    color: white;
    background: rgba(255, 255, 255, 0.15);
}

.search-bar {
    position: fixed;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    height: 44px;
    width: 320px;
    max-width: calc(100vw - 280px);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    z-index: 200;
    transition: background 0.2s ease;
}

.search-bar:focus-within {
    background: rgba(255, 255, 255, 0.22);
}

.search-bar-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.7);
}

.search-bar-input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    color: white;
    font-size: 14px;
}

.search-bar-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.search-bar-clear {
    flex-shrink: 0;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 11px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.15s ease, background 0.15s ease;
}

.search-bar-clear:hover {
    color: white;
    background: rgba(255, 255, 255, 0.2);
}

.search-blackout {
    flex: 1;
    background: #000;
    border-radius: 16px;
}

/* Dedicated search page (search_page.html) — its own real page rather
   than the always-visible desktop search bar, which has nowhere to
   expand into on a mobile-width header. Reuses .todo-app's white-card
   look (body's blue gradient background already applies, same element). */
.search-page {
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 1200px;
    margin: 40px auto 0;
    height: calc(100vh - 80px);
    height: calc(100dvh - 80px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.search-page-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid #e0e0e0;
    color: #6c757d;
}

.search-page-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    font-size: 17px;
    color: #212529;
    font-family: inherit;
}

.search-page-close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    color: #6c757d;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.search-page-close:hover {
    background: #f0f2f5;
    color: #212529;
}

.search-page-results {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

@media (max-width: 768px) {
    .search-page {
        border-radius: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        height: 100vh;
        height: 100dvh;
    }

    .search-page-header {
        padding: 16px 16px 14px;
    }
}

.app-layout {
    display: flex;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Sidebar Styles */
.lists-sidebar {
    width: 280px;
    background: #f8f9fa;
    border-right: 1px solid #e0e0e0;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.create-list-form {
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
    margin-top: 10px;
}

.input-group-small {
    display: flex;
    width: 100%;
    max-width: 100%;
}

.list-input {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border: 2px solid #e0e0e0;
    border-left: none;
    border-right: none;
    border-radius: 0;
    font-size: 14px;
    transition: all 0.3s ease;
    outline: none;
}

.list-input:focus {
    border-color: #3171F6;
    box-shadow: 0 0 0 3px rgba(49, 113, 246, 0.1);
}

.create-list-btn {
    padding: 8px 12px;
    background: linear-gradient(135deg, #3171F6 0%, #1a56d6 100%);
    color: white;
    border: none;
    border-radius: 8px 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.create-list-btn:hover {
    filter: brightness(1.1);
}

.lists-container {
    flex: 1;
    overflow-y: auto;
}

.create-folder-btn {
    padding: 8px 10px;
    background: linear-gradient(135deg, #3171F6 0%, #1a56d6 100%);
    color: white;
    border: none;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.create-folder-btn:hover {
    filter: brightness(1.1);
}

.folder-item {
    margin-bottom: 4px;
}

.folder-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    color: #555;
    transition: background 0.15s ease;
    user-select: none;
}

.folder-header:hover {
    background: #f0f0f0;
}

.folder-header.drag-over {
    background: #e8efff;
    outline: 2px dashed #3171F6;
    outline-offset: -2px;
}

.folder-icon {
    width: 15px;
    height: 13px;
    flex-shrink: 0;
    color: #3171F6;
}

.folder-name {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #444;
}

.folder-chevron {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    color: #aaa;
    transition: transform 0.2s ease;
}

.folder-header.collapsed .folder-chevron {
    transform: rotate(-90deg);
}

.folder-lists {
    padding-left: 8px;
}

.folder-lists.hidden {
    display: none;
}

.list-item--nested {
    padding-left: 20px;
}

.folder-empty {
    padding: 6px 20px;
    font-size: 13px;
    color: #bbb;
    font-style: italic;
}

.folder-rename-input {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-bottom: 2px solid #3171F6;
    outline: none;
    background: transparent;
    color: #444;
    min-width: 0;
}

.import-list-form {
    margin-top: 4px;
}

.import-list-btn {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: 1px dashed #b0b8c8;
    border-radius: 8px;
    font-size: 13px;
    color: #6c757d;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.2s, color 0.2s;
    box-sizing: border-box;
}

.import-list-btn:hover {
    border-color: #3171F6;
    color: #3171F6;
}

.import-list-input {
    display: none;
}

.list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    margin-bottom: 8px;
    background: white;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.list-item:hover {
    background: #f0f0f0;
}

.list-item.active {
    background: linear-gradient(135deg, #3171F6 0%, #1a56d6 100%);
    color: white;
    border-color: #3171F6;
    font-weight: 600;
}

.list-type-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-right: 10px;
    opacity: 0.5;
}

.list-item.active .list-type-icon {
    opacity: 0.85;
}

.list-name {
    flex: 1;
    font-size: 15px;
}

.list-count {
    font-size: 12px;
    font-weight: 600;
    color: inherit;
    margin-left: 6px;
}

.list-count--overdue {
    color: #dc2626;
}

.list-item.active .list-count--overdue {
    color: white;
}

.delete-list-btn {
    background: rgba(255, 255, 255, 0.3);
    border: none;
    color: white;
    font-size: 20px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    line-height: 1;
}

.delete-list-btn:hover {
    background: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

.no-lists {
    text-align: center;
    color: #999;
    font-size: 14px;
    padding: 20px;
    margin: 0;
}

.lists-separator {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 10px 0;
}

.sidebar-section-label {
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 4px 6px;
}

.list-collaborators {
    display: flex;
    align-items: center;
    margin: -8px 0 12px;
}

.list-collaborators .avatar {
    margin-right: -8px;
    border: 2px solid white;
}

/* List title row with menu */
.list-title-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 30px;
}

.list-title-row .app-title {
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.list-title-row .list-menu {
    flex-shrink: 0;
}

.list-type-icon--title {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    align-self: center;
    margin-right: 4px;
    color: #3171F6;
}

.list-menu {
    position: relative;
}

/* Mobile-only "back to my lists" link — a real <a>, not a JS panel
   toggle (see the @media block for why). Hidden on desktop, where the
   sidebar is always visible alongside the list. */
.mobile-back-link {
    display: none;
}

/* Mobile-only "back to list" button at the top of the item detail panel
   (which stays a JS-toggled overlay, not a real page, so this closes it
   rather than navigating). The footer already has a small close button,
   but it's easy to miss below all the options/notes/subtasks — this
   mirrors the native app's placement. Hidden on desktop. */
.mobile-panel-back-btn {
    display: none;
}

.list-menu-btn {
    background: none;
    border: none;
    font-size: 18px;
    font-weight: 700;
    color: #3171F6;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    letter-spacing: 2px;
    transition: all 0.2s ease;
}

.list-menu-btn:hover {
    background: rgba(49, 113, 246, 0.08);
    color: #1a56d6;
}

.list-menu-btn svg {
    display: block;
}

.list-menu-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    min-width: 180px;
    z-index: 400;
    overflow: hidden;
}

.list-menu-label {
    padding: 10px 16px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #f0f0f0;
}

.delete-list-form {
    margin: 0;
}

.list-menu-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    text-align: left;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease;
    color: #333;
}

.list-menu-item:hover {
    background: #f8f9fa;
}

.list-menu-item--danger {
    color: #dc3545;
}

.sort-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sort-direction-arrow {
    font-size: 12px;
    color: #3171F6;
    font-weight: 700;
    margin-left: 8px;
}

.list-menu-item--danger:hover {
    background: rgba(220, 53, 69, 0.08);
}

.list-menu-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 4px 0;
}

.list-menu-has-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.list-menu-sub {
    display: none;
}

.sort-menu-btn {
    font-size: 16px;
    letter-spacing: 0;
}

.sort-menu-btn.active {
    color: #3171F6;
    background: rgba(49, 113, 246, 0.08);
}

.sort-option.active {
    color: #3171F6;
    font-weight: 600;
}

/* Main Content Styles */
.main-content {
    flex: 1;
    padding: 40px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.main-content-scroll {
    flex: 1;
    overflow-y: auto;
    scrollbar-gutter: stable;
    min-height: 0;
}

.app-title {
    color: #333;
    font-size: 2.2em;
    margin-bottom: 30px;
    text-align: left;
    /* margin-bottom overridden to 0 when inside .list-title-row */
    font-weight: 700;
    background: linear-gradient(135deg, #3171F6 0%, #1a56d6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.welcome-state {
    text-align: center;
    padding: 60px 20px;
}

.welcome-state .app-title {
    text-align: center;
    margin-bottom: 20px;
}

.welcome-state p {
    color: #999;
    font-size: 18px;
}

.add-todo-form {
    margin-bottom: 30px;
}

.input-group {
    display: flex;
    gap: 10px;
}

.todo-input {
    flex: 1;
    padding: 15px 20px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-size: 16px;
    transition: all 0.3s ease;
    outline: none;
}

.todo-input:focus {
    border-color: #3171F6;
    box-shadow: 0 0 0 3px rgba(49, 113, 246, 0.1);
}

.todo-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.todo-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: #f8f9fa;
    border-radius: 12px;
    transition: all 0.3s ease;
    animation: fadeIn 0.3s ease-out;
}

.todo-item.selected {
    background: rgba(49, 113, 246, 0.1);
    outline: 1px solid rgba(49, 113, 246, 0.3);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.todo-item:hover {
    background: #f0f0f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.todo-content {
    flex: 1;
    /* A flex item's default min-width is its content's natural width, not
       0 — without this, .todo-content (and the row/page around it) can't
       shrink below whatever it takes to fit the task text + subtask-
       progress badge unbroken, forcing the whole page to overflow
       horizontally once that combined width exceeds the viewport. */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.todo-task {
    font-size: 15px;
    color: #333;
    font-weight: 500;
    text-decoration: none;
}

.todo-date {
    font-size: 12px;
    color: #999;
}

.todo-list-badge {
    align-self: flex-start;
    font-size: 12px;
    color: #3171F6;
    background: #e8f0fe;
    border-radius: 5px;
    padding: 2px 8px;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.15s ease;
}

.todo-list-badge:hover {
    background: #d5e4fd;
    text-decoration: underline;
}

.subtask-progress {
    font-size: 11px;
    color: #3171F6;
    font-weight: 500;
}

.todo-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.action-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-btn {
    color: #3171F6;
    font-size: 24px;
    font-weight: bold;
}

.toggle-btn:hover {
    background: rgba(49, 113, 246, 0.1);
    transform: scale(1.1);
}

.delete-btn {
    color: #3171F6;
    font-size: 22px;
}

.delete-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    transform: scale(1.1);
}

.priority-btn {
    color: #3171F6;
    font-size: 20px;
}

.priority-btn:hover {
    background: rgba(49, 113, 246, 0.1);
    transform: scale(1.1);
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #999;
    font-size: 18px;
}

.empty-state p {
    margin: 0;
}

/* Completed section */
.completed-section {
    margin-top: 20px;
}

.completed-header {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    background: #f8f9fa;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.completed-header:hover {
    background: #f0f0f0;
}

.completed-header .chevron {
    font-size: 18px;
    font-weight: bold;
    color: #6c757d;
    margin-right: 10px;
    transition: transform 0.2s ease;
    display: inline-block;
    width: 12px;
}

.completed-header.open .chevron {
    transform: rotate(90deg);
}

.completed-header .completed-label {
    font-size: 15px;
    font-weight: 600;
    color: #6c757d;
}

.completed-header .completed-count {
    margin-left: 10px;
    background: #6c757d;
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

.completed-list {
    margin-top: 12px;
}

.completed-list .todo-item {
    opacity: 0.7;
}

.completed-list .todo-item .todo-task {
    text-decoration: line-through;
    color: #6c757d;
}

/* Responsive design */
@media (max-width: 768px) {
    /* iOS Safari auto-zooms the whole page on focusing any text input
       with a computed font-size under 16px, to keep the text legible —
       and that zoom doesn't reliably reset when the input blurs, leaving
       the page looking "too wide" afterward (this is what was actually
       behind the page-width bug chased over several reports today, not a
       layout/overflow issue — .todo-content's min-width fix was a real
       but separate issue). Bumping these to 16px on mobile avoids
       triggering the zoom in the first place. */
    .subtask-input,
    .item-panel-notes-input,
    .item-panel-task-input {
        font-size: 16px !important;
    }

    /* body/.container/.todo-app's edge-to-edge, no-floating-card styling
       and the header ::before bar are now unconditional base rules (see
       top of file) — desktop shows that bar always, but on mobile a list
       being open replaces it with a contextual per-screen header (back
       link + list title), matching the native app, so the bar and its
       .container clearance both need to go away in that state specifically. */
    body.has-current-list::before {
        display: none;
    }

    body.has-current-list .container {
        padding-top: 0;
    }

    .container {
        max-width: 100%;
    }

    body.has-current-list .todo-app {
        height: 100vh;
        height: 100dvh;
    }

    .app-name,
    .search-bar,
    .notif-bell,
    .settings-btn,
    .user-menu,
    .update-btn {
        display: none;
    }

    body:not(.has-current-list) .app-name {
        display: flex;
    }

    body:not(.has-current-list) .search-bar {
        display: flex;
    }

    body:not(.has-current-list) .notif-bell {
        display: block;
    }

    body:not(.has-current-list) .settings-btn {
        display: flex;
    }

    body:not(.has-current-list) .user-menu {
        display: block;
    }

    /* Mobile shows exactly one screen at a time — the lists-sidebar (the
       /lists/ "pick a list" page) or a list's main-content — reached via
       real page navigation (see the back link in _main_content.html and
       lists_home in views.py), not a client-side panel toggle. Plain
       display:none, no position:absolute/transform sliding: that
       technique is what caused a very persistent WebKit rendering bug
       (mobile-nav-redesign branch, see its git history) where panels
       could paint at the wrong position on first load. Simpler and
       proof against that whole bug class, at the cost of the slide
       animation — an acceptable trade since mobile users who want that
       level of polish have the native app. */
    .app-layout {
        flex-direction: column;
    }

    /* Long-press opens a context menu here (see the touchstart handler in
       todo_list.html) — without this, iOS's own text-selection callout/
       magnifier competes with it on the same gesture. */
    .todo-item,
    .list-item[draggable] {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }

    .lists-sidebar {
        width: 100%;
        height: 100%;
        border-right: none;
        padding: 20px;
    }

    .main-content {
        width: 100%;
        height: 100%;
        padding: 25px;
    }

    .app-layout.has-current-list .lists-sidebar {
        display: none;
    }

    .app-layout:not(.has-current-list) .main-content {
        display: none;
    }

    .item-panel {
        display: none;
    }

    /* !important on width/height/position: the desktop rule for this exact
       selector sits further down in this file (its own dedicated section),
       so at equal specificity it wins by source order regardless of
       viewport — same class of bug as the item-panel-inner/notif-bell
       fixes elsewhere. Without it this panel gets stuck at the desktop
       280px width, leaving the rest of the screen showing whatever's
       underneath. */
    .item-panel.open {
        display: flex;
        flex-direction: column;
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 300;
        background: white;
    }

    /* Desktop's fixed 280px sidebar-style width — needs to fill the
       screen here instead, or the content sits confined to the left
       with blank space on the right. Same source-order issue as above. */
    .item-panel-inner {
        width: 100% !important;
        border-left: none;
    }

    .mobile-panel-back-btn {
        display: block;
        background: none;
        border: none;
        color: #3171F6;
        font-weight: 600;
        font-size: 17px;
        padding: 16px 20px 0;
        margin: 0;
        cursor: pointer;
        text-align: left;
    }

    /* !important: .item-panel-task-input's desktop rule sits later in this
       file (its own dedicated section, further down) than this media
       query, so with equal selector specificity it wins by source order
       regardless of viewport — same class of bug as the earlier
       item-panel/notif-bell fixes. */
    .item-panel-task-input {
        font-size: 17px !important;
        font-weight: 700 !important;
    }

    /* Swap the desktop custom-calendar trigger buttons for the native
       date/time picker row (see .reminder-menu-item--native and the
       <label> in todo_list.html). !important: .reminder-menu-item--native's
       desktop-hide rule sits later in this file than this media query,
       same source-order issue as elsewhere in this file. */
    #remind-pick, #due-pick {
        display: none;
    }

    .reminder-menu-item--native {
        display: flex !important;
    }

    .mobile-back-link {
        display: inline-block;
        color: #3171F6;
        font-weight: 600;
        text-decoration: none;
        margin-bottom: 12px;
    }

    .app-title {
        font-size: 1.8em;
        margin-bottom: 20px;
    }

    /* At mobile width, the title row's icons (sort/share/options) leave
       little room for .app-title, and its desktop word-break:break-word
       wraps even short titles into a multi-line stack (e.g. "Shopping"
       -> "Sho/ppi/ng"). Truncating to one line with an ellipsis instead
       reads far better. */
    .list-title-row {
        margin-bottom: 20px;
    }

    .list-title-row .app-title {
        font-size: 1.3em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: normal;
    }

    /* .todo-item previously had a mobile-only override stacking
       checkbox/text/star vertically — removed, since the desktop layout
       (row, space-between, .todo-content already stacking task+date
       internally) matches the native app's list-row look just as well
       at mobile width. */

    /* Header icon cluster: app-name, search-bar, update-btn, settings-btn,
       notif-bell, and user-menu are each independently position:fixed with
       desktop pixel offsets — with no override they overlap on phone-width
       screens. Repack the right-side icons tightly, collapse search to an
       icon that expands into a full-width overlay on focus (no JS needed),
       and move the update banner out of the row entirely since it's rarely
       visible and doesn't need to fight for space when it is. */
    .app-name {
        font-size: 15px;
    }

    /* !important on these two: .user-menu's and .notif-bell's desktop rules
       sit later in this file (their own dedicated sections, further down)
       than this media query, so with equal selector specificity they'd
       otherwise win by source order regardless of viewport. Without this,
       .notif-bell stays stuck at its desktop right:108px, landing almost
       exactly on top of .settings-btn's right:104px here. */
    .user-menu {
        right: 8px !important;
    }

    .notif-bell {
        right: 56px !important;
    }

    .settings-btn {
        right: 104px;
    }

    .search-bar {
        left: auto;
        right: 152px;
        transform: none;
        width: 40px;
        max-width: 40px;
        padding: 0;
        justify-content: center;
        background: transparent;
        border: none;
        overflow: hidden;
        transition: none;
    }

    .search-bar-input,
    .search-bar-clear {
        display: none;
    }

    .search-bar:focus-within {
        left: 8px;
        right: 8px;
        width: auto;
        max-width: none;
        justify-content: flex-start;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 8px;
        z-index: 500;
    }

    .search-bar:focus-within .search-bar-input {
        display: block;
    }

    /* JS toggles this element's own inline display style based on whether
       there's query text — inline styles win over this rule regardless, so
       this just removes our "hide while collapsed" override when expanded. */
    .search-bar:focus-within .search-bar-clear {
        display: block;
    }

    .update-btn {
        top: 56px;
        left: 8px;
        right: 8px;
        width: auto;
        justify-content: center;
    }

    /* Header icon cluster: app-name, search-bar, update-btn, settings-btn,
       notif-bell, and user-menu are each independently position:fixed with
       desktop pixel offsets — with no override they overlap on phone-width
       screens. Repack the right-side icons tightly, collapse search to an
       icon that expands into a full-width overlay on focus (no JS needed),
       and move the update banner out of the row entirely since it's rarely
       visible and doesn't need to fight for space when it is. */
    .app-name {
        font-size: 15px;
    }

    .user-menu {
        right: 8px;
    }

    .notif-bell {
        right: 56px;
    }

    .settings-btn {
        right: 104px;
    }

    .search-bar {
        left: auto;
        right: 152px;
        transform: none;
        width: 40px;
        max-width: 40px;
        padding: 0;
        justify-content: center;
        background: transparent;
        border: none;
        overflow: hidden;
        transition: none;
    }

    .search-bar-input,
    .search-bar-clear {
        display: none;
    }

    .search-bar:focus-within {
        left: 8px;
        right: 8px;
        width: auto;
        max-width: none;
        justify-content: flex-start;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 8px;
        z-index: 500;
    }

    .search-bar:focus-within .search-bar-input {
        display: block;
    }

    /* JS toggles this element's own inline display style based on whether
       there's query text — inline styles win over this rule regardless, so
       this just removes our "hide while collapsed" override when expanded. */
    .search-bar:focus-within .search-bar-clear {
        display: block;
    }

    .update-btn {
        top: 56px;
        left: 8px;
        right: 8px;
        width: auto;
        justify-content: center;
    }
}

/* Item detail panel */
.item-panel {
    width: 0;
    overflow: hidden;
    flex-shrink: 0;
    transition: width 0.3s ease;
}

.item-panel.open {
    width: 280px;
    overflow: visible;
    transition: width 0.3s ease, overflow 0s 0.3s;
}

.item-panel-inner {
    width: 280px;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #e0e0e0;
    background: white;
}

.item-panel-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.item-panel-body {
    padding: 16px 20px 0;
}

.item-panel-top {
    padding: 12px 20px 0;
    border-bottom: 1px solid #e0e0e0;
}

.item-panel-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 24px 20px 12px;
    border-bottom: 1px solid #e0e0e0;
}

.item-panel-subtasks {
    padding-bottom: 12px;
}

.subtask-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.subtask-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
}

.subtask-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: #aaa;
    padding: 0;
    flex-shrink: 0;
    line-height: 1;
}

.subtask-toggle:hover {
    color: #3171F6;
}

.subtask-task {
    flex: 1;
    font-size: 13px;
    color: #333;
}

.subtask-task.completed {
    text-decoration: line-through;
    color: #aaa;
}

.subtask-delete {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    color: #ccc;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.subtask-item:hover .subtask-delete {
    opacity: 1;
}

.subtask-delete:hover {
    color: #dc3545;
}

.subtask-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
}

.subtask-add-icon {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #3171F6;
    font-size: 18px;
    font-weight: 300;
    flex-shrink: 0;
    line-height: 1;
    user-select: none;
}

.subtask-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 13px;
    color: #333;
    background: transparent;
    padding: 2px 0;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.subtask-input::placeholder {
    color: #aaa;
}

.subtask-input:focus {
    border-bottom-color: #3171F6;
}

.item-panel-task-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    background: transparent;
    min-width: 0;
    padding: 2px 0;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s ease;
    resize: none;
    overflow: hidden;
    line-height: 1.4;
    font-family: inherit;
}

.item-panel-task-input:focus {
    border-bottom-color: #3171F6;
}

.item-panel-notes {
    padding: 16px 20px 16px;
}

.item-panel-notes-input {
    width: 100%;
    min-height: 80px;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    color: #333;
    resize: vertical;
    box-sizing: border-box;
    background: #fafafa;
    transition: border-color 0.15s, background 0.15s;
}

.item-panel-notes-input:focus {
    outline: none;
    border-color: #4a9eff;
    background: white;
}

.item-panel-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-top: 1px solid #e0e0e0;
}

.item-panel-created {
    font-size: 11px;
    color: #aaa;
    text-align: center;
    flex: 1;
}

.item-panel-delete {
    font-size: 0.9em;
}


/* Fancy tooltips */
#tooltip {
    position: fixed;
    background: #333;
    color: #fff;
    font-size: 12px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 6px;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    transform: translateX(-50%) translateY(0) scale(0.9);
}

#tooltip.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

#tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
}

#tooltip.below::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #333;
}

.item-panel-close {
    background: none;
    border: none;
    font-size: 28px;
    font-weight: 300;
    color: #aaa;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    border-radius: 6px;
    transition: color 0.2s ease, background 0.2s ease;
}

.item-panel-close:hover {
    color: #3171F6;
    background: rgba(49, 113, 246, 0.08);
}

.todo-item.panel-active {
    background: #e8f0fe;
}

.todo-item.dragging {
    opacity: 0.4;
}

.list-item.drag-over {
    background: rgba(49, 113, 246, 0.15);
    outline: 2px dashed #3171F6;
    outline-offset: -2px;
}

.list-item.dragging {
    opacity: 0.4;
}

.folder-header.dragging {
    opacity: 0.4;
}

.list-drop-spacer {
    height: 40px;
    border-radius: 8px;
    background: rgba(49, 113, 246, 0.12);
    border: 2px dashed #3171F6;
    margin-bottom: 8px;
    transition: height 0.15s ease;
}

.list-context-menu {
    position: fixed;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    padding: 4px;
    min-width: 160px;
}

.list-context-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    text-align: left;
    background: none;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}

.list-context-item:hover {
    background: #f0f4ff;
}

.list-context-item--danger {
    color: #dc3545;
}

.list-context-item--danger:hover {
    background: #fff0f0;
}

.list-context-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 4px 0;
}

.list-context-has-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}

/* Task context menu */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-overlay[hidden] {
    display: none;
}

.modal-box {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    width: 320px;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title {
    font-size: 16px;
    font-weight: 700;
    color: #111;
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    font-size: 14px;
    color: #aaa;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}

.modal-close:hover {
    color: #555;
}

.modal-input {
    width: 100%;
    padding: 9px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.modal-input:focus {
    border-color: #3171F6;
}

.modal-list-label {
    font-size: 12px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.modal-list-scroll {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 8px;
}

.modal-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    cursor: pointer;
    transition: background 0.15s;
}

.modal-list-item:hover {
    background: #f5f5f5;
}

.modal-list-item input[type="checkbox"] {
    accent-color: #3171F6;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.modal-list-item-name {
    font-size: 14px;
    color: #333;
}

.modal-list-empty {
    padding: 12px;
    font-size: 13px;
    color: #bbb;
    text-align: center;
    font-style: italic;
}

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

.modal-btn {
    padding: 8px 18px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-btn--cancel {
    background: #f0f0f0;
    color: #555;
}

.modal-btn--cancel:hover {
    background: #e4e4e4;
}

.modal-btn--primary {
    background: linear-gradient(135deg, #3171F6 0%, #1a56d6 100%);
    color: #fff;
}

.modal-btn--primary:hover {
    filter: brightness(1.08);
}

.modal-btn--danger {
    background: #dc3545;
    color: #fff;
}

.modal-btn--danger:hover {
    filter: brightness(1.08);
}

.modal-btn--danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.modal-error {
    color: #dc3545;
    font-size: 13px;
    margin-top: 8px;
}

.task-context-menu {
    position: fixed;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 1000;
    padding: 4px;
    min-width: 190px;
}

.task-ctx-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 12px;
    text-align: left;
    background: none;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
}

.task-ctx-item:hover {
    background: #f0f4ff;
}

.task-ctx-danger {
    color: #dc3545;
}

.task-ctx-danger:hover {
    background: #fff0f0;
}

.task-ctx-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 4px 0;
}

.task-ctx-arrow {
    font-size: 16px;
    color: #aaa;
    margin-left: 8px;
}

.task-ctx-has-sub {
    user-select: none;
}

.task-ctx-submenu {
    display: none;
    position: fixed;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 1001;
    padding: 4px;
    min-width: 170px;
}

.task-ctx-submenu-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    text-align: left;
    background: none;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.task-ctx-submenu-item:hover {
    background: #f0f4ff;
}

.list-drop-indicator {
    height: 2px;
    background: #3171F6;
    border-radius: 1px;
    margin: 1px 8px;
    pointer-events: none;
}

.todo-content {
    cursor: pointer;
}

/* Settings panel */
.settings-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    height: 100vh;
    background: white;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 300;
    display: flex;
    flex-direction: column;
}

.settings-panel.open {
    transform: translateX(0);
}

.settings-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.settings-panel-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.settings-panel-close {
    background: none;
    border: none;
    font-size: 16px;
    color: #aaa;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
    transition: color 0.2s ease, background 0.2s ease;
}

.settings-panel-close:hover {
    color: #333;
    background: #f0f0f0;
}

.item-panel-options {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.item-panel-option-row {
    position: relative;
}

.item-panel-option-row .item-panel-option.active {
    padding-right: 44px;
}

.remind-clear-btn {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    flex-shrink: 0;
    background: none;
    border: 1px solid #ddd;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    font-size: 11px;
    color: #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.remind-clear-btn:hover {
    color: #dc3545;
    border-color: #dc3545;
    background: rgba(220, 53, 69, 0.06);
}

.item-panel-option {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 15px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #555;
    text-align: left;
    transition: all 0.2s ease;
}

.item-panel-option:hover {
    background: #f0f0f0;
    border-color: #ccc;
}

.item-panel-option.active {
    background: #e8f0fe;
    border-color: #3171F6;
    color: #3171F6;
    font-weight: 500;
}

.settings-panel-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.settings-section-title {
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-top: 24px;
    margin-bottom: 12px;
}

.settings-section-title:first-child {
    margin-top: 0;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
}

.settings-row-label {
    font-size: 14px;
    color: #333;
}

.settings-row-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-danger-btn {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: 1px dashed #dc3545;
    border-radius: 8px;
    font-size: 13px;
    color: #dc3545;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s;
    box-sizing: border-box;
}

.settings-danger-btn:hover {
    background: rgba(220, 53, 69, 0.08);
}

.toggle-switch {
    position: relative;
    width: 40px;
    height: 22px;
    background: #ccc;
    border: none;
    border-radius: 11px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.toggle-switch.on {
    background: #3171F6;
}

.toggle-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch.on .toggle-switch-thumb {
    transform: translateX(18px);
}

.toggle-switch-state {
    font-size: 13px;
    color: #999;
    min-width: 22px;
}

.list-title-editable {
    cursor: text;
    border-radius: 6px;
    padding: 2px 6px;
    margin-left: -6px;
    outline: none;
    transition: outline-color 0.2s ease;
    outline: 2px solid transparent;
}

.list-title-editable:hover {
    outline-color: rgba(49, 113, 246, 0.25);
}

.list-title-editable:focus {
    outline-color: rgba(49, 113, 246, 0.5);
    background: none;
    -webkit-text-fill-color: #3171F6;
}

/* Login page */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f7fa;
}

.login-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    padding: 40px;
    width: 100%;
    max-width: 360px;
}

.login-title {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 32px;
    color: #1a1a2e;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.login-label {
    font-size: 13px;
    font-weight: 600;
    color: #555;
}

.login-input {
    padding: 10px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s;
}

.login-input:focus {
    border-color: #3171F6;
}

.login-btn {
    margin-top: 8px;
    padding: 11px;
    background: linear-gradient(135deg, #3171F6 0%, #1a56d6 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s;
}

.login-btn:hover {
    filter: brightness(1.1);
}

.login-error {
    background: #fff0f0;
    border: 1px solid #f5c6cb;
    color: #dc3545;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
}

.login-notice {
    background: #f0f6ff;
    border: 1px solid #c6d9f5;
    color: #1a56d6;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
}

.login-input-error {
    border-color: #dc3545;
}

.login-field-error {
    font-size: 12px;
    color: #dc3545;
    margin-top: 2px;
}

.email-hint {
    font-size: 12px;
    color: #2e7d32;
    margin-top: 4px;
}

.password-match {
    font-size: 12px;
    color: #2e7d32;
    margin-top: 4px;
}

.password-match.mismatch {
    color: #dc3545;
}

.password-checklist {
    list-style: none;
    margin: -6px 0 14px;
    padding: 10px 12px;
    background: #f8f9fa;
    border-radius: 8px;
}

.password-checklist li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    font-size: 12px;
    color: #999;
}

.password-checklist li::before {
    content: '○';
    font-size: 10px;
    color: #ccc;
}

.password-checklist li.met {
    color: #2e7d32;
}

.password-checklist li.met::before {
    content: '✓';
    color: #2e7d32;
}

.login-message {
    font-size: 14px;
    color: #555;
    text-align: center;
    margin: 0 0 20px;
    line-height: 1.5;
}

.login-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    color: #888;
}

.login-footer a {
    color: #3171F6;
    text-decoration: none;
}

.login-footer a:hover {
    text-decoration: underline;
}

/* User menu */
.user-menu {
    position: fixed;
    top: 8px;
    right: 20px;
    z-index: 200;
}

.user-menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    padding: 8px;
    border-radius: 8px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, background 0.2s ease;
    width: 44px;
    height: 44px;
}

.user-menu-btn:hover,
.user-menu-btn.active {
    color: white;
    background: rgba(255, 255, 255, 0.15);
}

.user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    min-width: 140px;
    overflow: hidden;
}

.user-dropdown.open {
    display: block;
}

.user-dropdown-info {
    padding: 12px 16px 10px;
}

.user-dropdown-name {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
}

.user-dropdown-email {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

.user-dropdown-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
}

.user-dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    color: #ff6b6b;
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.user-dropdown-item:hover {
    background: rgba(255, 107, 107, 0.1);
}

.user-dropdown-item--neutral {
    color: #333;
}

.user-dropdown-item--neutral:hover {
    background: #f0f0f0;
}

/* Reminder menu */
.reminder-menu {
    display: none;
    position: fixed;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 200;
    overflow: hidden;
}

.reminder-menu.open {
    display: block;
}

.reminder-menu-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #aaa;
    padding: 12px 16px 6px;
}

.reminder-menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 9px 16px;
    background: none;
    border: none;
    font-size: 14px;
    color: #1a1a2e;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.reminder-menu-item:hover {
    background: #f5f7ff;
}

.reminder-menu-item.reminder-menu-clear {
    color: #dc3545;
}

.reminder-menu-item.reminder-menu-clear:hover {
    background: rgba(220, 53, 69, 0.06);
}

.remind-label {
    font-size: 14px;
}

.remind-time {
    font-size: 12px;
    color: #888;
}

.reminder-menu-divider {
    height: 1px;
    background: rgba(0,0,0,0.07);
    margin: 4px 0;
}

/* Notification bell */
.notif-bell {
    position: fixed;
    top: 8px;
    right: 108px;
    z-index: 200;
}

.notif-bell-btn {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    padding: 8px;
    border-radius: 8px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, background 0.2s ease;
    width: 44px;
    height: 44px;
}

.notif-bell-btn:hover,
.notif-bell-btn.active {
    color: white;
    background: rgba(255, 255, 255, 0.15);
}

.notif-bell-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #dc3545;
    color: white;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.notif-bell-dropdown {
    min-width: 300px;
    max-width: 340px;
}

.notif-item {
    cursor: default;
    align-items: flex-start;
    gap: 8px;
}

.notif-item .avatar {
    margin-top: 2px;
    flex-shrink: 0;
}

.notif-item .remind-label {
    flex: 1;
}

.notif-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.notif-accept,
.notif-reject {
    border: none;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.notif-accept {
    background: #3171F6;
    color: white;
}

.notif-accept:hover {
    background: #1a56d6;
}

.notif-reject,
.notif-dismiss {
    background: #f0f0f0;
    color: #555;
}

.notif-reject:hover,
.notif-dismiss:hover {
    background: #e0e0e0;
}

/* Avatars */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    font-weight: 600;
    flex-shrink: 0;
}

/* Share panel */
.share-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    height: 100vh;
    background: white;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 300;
    display: flex;
    flex-direction: column;
}

.share-panel.open {
    transform: translateX(0);
}

.share-link-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.share-link-row input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    color: #333;
    background: #f8f9fa;
}

.copy-share-link {
    flex-shrink: 0;
    background: #3171F6;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.copy-share-link:hover {
    background: #1a56d6;
}

.share-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
}

.share-row .remind-label {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.revoke-share-btn {
    flex-shrink: 0;
    background: none;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    color: #dc3545;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.revoke-share-btn:hover {
    background: rgba(220, 53, 69, 0.06);
    border-color: #dc3545;
}

.share-with-contact-btn {
    flex-shrink: 0;
    background: #3171F6;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.share-with-contact-btn:hover {
    background: #1a56d6;
}

/* Custom calendar */
.remind-calendar {
    margin-bottom: 8px;
    padding: 10px 12px 0;
}

.remind-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.remind-cal-month-label {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a2e;
}

.remind-cal-nav-btn {
    background: none;
    border: none;
    font-size: 18px;
    color: #888;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.remind-cal-nav-btn:hover { color: #3171F6; }

.remind-cal-days-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 4px;
}

.remind-cal-days-header span {
    font-size: 10px;
    font-weight: 700;
    color: #aaa;
    text-align: center;
    text-transform: uppercase;
}

.remind-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.remind-cal-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 50%;
    cursor: pointer;
    color: #1a1a2e;
    transition: background 0.15s;
}

.remind-cal-cell:hover:not(.past):not(.empty) { background: #f0f4ff; }
.remind-cal-cell.empty { cursor: default; }
.remind-cal-cell.past { color: #ccc; cursor: default; }
.remind-cal-cell.today { font-weight: 700; color: #3171F6; }
.remind-cal-cell.selected { background: #3171F6 !important; color: #fff !important; font-weight: 600; }

/* Date/time picker panel */
.remind-datetime-panel {
    margin-top: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.remind-datetime-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #aaa;
    border-bottom: 1px solid #f0f0f0;
}

.remind-picker-back {
    background: none;
    border: none;
    font-size: 14px;
    color: #aaa;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.remind-picker-back:hover { color: #dc3545; }

/* Time selector */
.remind-datetime-panel .remind-time-selector,
.remind-datetime-panel .remind-save-btn {
    margin: 0 12px;
}

.remind-datetime-panel .remind-save-btn {
    margin-bottom: 12px;
}

.remind-time-selector {
    margin-top: 8px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.remind-time-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 9px 12px;
    background: #f8f8f8;
    border: none;
    cursor: pointer;
    font-size: 13px;
    color: #555;
    text-align: left;
    font-family: inherit;
}

.remind-time-display:hover { background: #f0f0f0; }

.remind-time-edit-input {
    background: transparent;
    border: none;
    outline: none;
    font-size: 13px;
    font-family: inherit;
    color: #333;
    width: 80px;
    padding: 0;
}

.remind-time-chevron {
    font-size: 16px;
    color: #aaa;
    transition: transform 0.2s;
    display: inline-block;
}

.remind-time-list {
    max-height: 150px;
    overflow-y: auto;
    border-top: 1px solid #e0e0e0;
}

.remind-time-list::-webkit-scrollbar { width: 4px; }
.remind-time-list::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

.remind-time-item {
    padding: 8px 14px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    transition: background 0.12s;
}

.remind-time-item:hover { background: #f0f4ff; }
.remind-time-item.selected { background: #3171F6; color: #fff; font-weight: 600; }

.remind-save-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 8px;
    background: #3171F6;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: filter 0.15s;
}

.remind-save-btn:hover:not(:disabled) { filter: brightness(1.1); }

/* Wrapped in a <label> (see .reminder-menu-item--native) rather than shown
   directly — the label gives it the same menu-row look as its desktop
   sibling button, and tapping anywhere on the label is native browser
   behaviour that forwards to this control regardless of its own opacity/
   pointer-events, opening its picker sheet. position:absolute takes it out
   of flow so its size can't disturb the label's flex layout; some browsers
   also refuse to open a picker on a truly zero-area element even when it
   isn't display:none, hence 1px rather than 0. */
.native-picker-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    border: none;
    padding: 0;
    pointer-events: none;
}

/* Desktop keeps the button beside this that opens the custom calendar
   (see #remind-pick/#due-pick) — this native-input row only makes sense
   on mobile (see the @media block for its display:flex counterpart). */
.reminder-menu-item--native {
    display: none;
}

.remind-save-btn:disabled {
    background: #ccc;
    cursor: default;
}

/* Toast notifications */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    padding: 14px 16px;
    min-width: 220px;
    max-width: 300px;
    pointer-events: all;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    border-left: 4px solid #3171F6;
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}

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

.toast-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #3171F6;
}

.toast-close {
    background: none;
    border: none;
    font-size: 12px;
    color: #aaa;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.toast-close:hover {
    color: #555;
}

.toast-body {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
}