/* ===================================================
   AkoPlus — Premium Mobile Task Manager Stylesheet
   Bootstrap 5 + Custom Design System
   =================================================== */

:root {
    --ako-primary: #4F46E5;
    --ako-primary-light: #818CF8;
    --ako-primary-dark: #3730A3;
    --ako-accent: #06B6D4;
    --ako-success: #10B981;
    --ako-warning: #F59E0B;
    --ako-danger: #EF4444;
    --ako-bg: #F1F5F9;
    --ako-surface: #FFFFFF;
    --ako-text: #0F172A;
    --ako-text-secondary: #64748B;
    --ako-border: #E2E8F0;
    --ako-gradient: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #06B6D4 100%);
    --ako-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
    --ako-shadow-lg: 0 8px 40px rgba(15, 23, 42, 0.12);
    --ako-radius: 16px;
    --ako-radius-sm: 10px;
    --ako-hover: #EEF2FF;
    --ako-card-bg: #FFFFFF;
    --ako-text-primary: #0F172A;
    --card-bg: #FFFFFF;
    --soft-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}


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

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--ako-bg);
    color: var(--ako-text);
    overflow: hidden;
    height: 100dvh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    overscroll-behavior: none;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* ===== LOGIN ===== */
.login-page {
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ako-gradient);
    position: relative;
    overflow: hidden;
}

.login-decoration { position: absolute; inset: 0; pointer-events: none; }
.deco-circle { position: absolute; border-radius: 50%; opacity: 0.1; background: white; }
.deco-1 { width: 400px; height: 400px; top: -100px; right: -100px; }
.deco-2 { width: 300px; height: 300px; bottom: -50px; left: -80px; }
.deco-3 { width: 200px; height: 200px; top: 40%; left: 60%; opacity: 0.06; }

.login-wrapper { position: relative; z-index: 2; width: 100%; max-width: 420px; padding: 20px; }
.login-card { background: var(--ako-surface); border-radius: 24px; padding: 40px 32px; box-shadow: var(--ako-shadow-lg); }
.login-brand { text-align: center; margin-bottom: 32px; }
.brand-icon { width: 64px; height: 64px; background: var(--ako-gradient); border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.brand-icon i { font-size: 32px; color: white; }
.login-brand h1 { font-size: 1.8rem; font-weight: 800; background: var(--ako-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.login-brand p { font-size: 0.9rem; margin-top: 4px; }

.login-form .form-control { border: 1.5px solid var(--ako-border); border-radius: var(--ako-radius-sm); font-size: 0.95rem; padding: 14px 16px; height: auto; transition: border-color 0.2s, box-shadow 0.2s; }
.login-form .form-control:focus { border-color: var(--ako-primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); }
.login-form .form-floating label { color: var(--ako-text-secondary); }

.btn-login { padding: 14px; border-radius: var(--ako-radius-sm); font-size: 1rem; font-weight: 700; background: var(--ako-gradient); border: none; letter-spacing: 0.3px; transition: transform 0.2s, box-shadow 0.2s; }
.btn-login:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(79, 70, 229, 0.35); }
.login-footer { text-align: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ako-border); }

/* ===== APP SHELL ===== */
.app-shell { display: flex; flex-direction: column; height: 100dvh; max-width: 480px; margin: 0 auto; background: var(--ako-bg); position: relative; box-shadow: -1px 0 40px rgba(0,0,0,0.06), 1px 0 40px rgba(0,0,0,0.06); overflow: hidden; }
.app-topbar { background: var(--ako-gradient); padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top)); display: flex; justify-content: space-between; align-items: center; z-index: 10; min-height: 56px; flex-shrink: 0; }
.topbar-left { display: flex; align-items: center; }
.brand-sm { color: white; font-weight: 800; font-size: 1.15rem; display: flex; align-items: center; gap: 8px; line-height: 1; }
.brand-sm i { font-size: 1.3rem; }
.topbar-right { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
.topbar-right .btn-outline-light { font-size: 0.78rem; font-weight: 600; border-width: 1.5px; height: 36px; display: inline-flex; align-items: center; padding: 0 14px; }

/* Logout icon button */
.logout-btn {
    color: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.3);
}
.logout-btn:hover {
    background: rgba(239,68,68,0.3);
    color: white;
    border-color: rgba(239,68,68,0.5);
}

/* Date Strip */
#dayViewControls { flex-shrink: 0; }
.date-strip { background: var(--ako-surface); padding: 16px 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ako-border); flex-shrink: 0; }
.date-nav-btn { width: 40px; height: 40px; border-radius: 12px; border: 1.5px solid var(--ako-border); background: var(--ako-surface); color: var(--ako-text); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer; transition: all 0.2s; }
.date-nav-btn:hover { background: var(--ako-primary); color: white; border-color: var(--ako-primary); }
.date-center { text-align: center; flex: 1; }
.date-label { font-size: 1.25rem; font-weight: 800; }
.date-full { font-size: 0.78rem; color: var(--ako-text-secondary); margin-top: 2px; }

/* Progress */
.progress-strip { background: var(--ako-surface); padding: 10px 0; border-bottom: 1px solid var(--ako-border); flex-shrink: 0; }
.progress-count { font-size: 0.8rem; font-weight: 600; color: var(--ako-text-secondary); white-space: nowrap; }
.progress-pct { font-size: 0.8rem; font-weight: 700; color: var(--ako-success); white-space: nowrap; }
.progress { border-radius: 10px; background: var(--ako-border); }
.progress-bar { border-radius: 10px; transition: width 0.5s ease; }

/* Task Area */
.task-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 12px;
    padding-bottom: 24px;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

/* ===== TASK CARD ===== */
.task-item {
    background: var(--ako-surface);
    margin: 0 12px 10px;
    border-radius: var(--ako-radius);
    box-shadow: var(--ako-shadow);
    padding: 0;
    transition: transform 0.15s;
    animation: slideUp 0.3s ease forwards;
    overflow: hidden;
}

.task-item:active { transform: scale(0.98); }

@keyframes slideUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.task-main {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    gap: 10px;
    min-height: 52px;
}

.task-check {
    width: 26px; height: 26px;
    border: 2.5px solid var(--ako-border);
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 14px;
    color: transparent;
    transition: all 0.2s;
}

.task-check.done { background: var(--ako-success); border-color: var(--ako-success); color: white; }

.task-body { flex: 1; min-width: 0; cursor: pointer; }
.task-text {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.task-item.completed .task-text { text-decoration: line-through; color: var(--ako-text-secondary); }

/* Meta tags shown inline under title */
.task-meta-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.task-meta-inline .task-meta-tag {
    font-size: 0.68rem;
    padding: 1px 6px;
}

.task-time-hint {
    font-size: 0.72rem;
    color: var(--ako-text-secondary);
    flex-shrink: 0;
    white-space: nowrap;
}

.task-expand-chevron {
    font-size: 0.78rem;
    color: var(--ako-text-secondary);
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.2s;
    padding: 4px;
}
.task-item.expanded .task-expand-chevron {
    transform: rotate(180deg);
}

/* Expandable detail panel */
.task-detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, padding 0.25s ease;
    padding: 0 16px 0 16px;
}
.task-item.expanded .task-detail {
    max-height: 500px;
    padding: 8px 16px 14px 16px;
    border-top: 1px solid var(--ako-border);
}

.task-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.task-detail-notes {
    font-size: 0.8rem;
    color: var(--ako-text-secondary);
    line-height: 1.5;
    white-space: pre-wrap;
    background: var(--ako-bg);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 6px;
}

.task-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.task-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--ako-text-secondary);
    background: var(--ako-bg);
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 500;
}

.task-meta-tag i { font-size: 0.7rem; }
.task-meta-tag.time-tag { color: var(--ako-primary); background: rgba(79,70,229,0.08); }
.task-meta-tag.notes-tag { color: #7C3AED; background: rgba(124,58,237,0.08); }
.task-meta-tag.checklist-tag { color: var(--ako-accent); background: rgba(6,182,212,0.08); }

.task-actions { display: flex; gap: 2px; flex-shrink: 0; }
.task-actions .btn { width: 30px; height: 30px; border-radius: 8px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; border: none; }
.task-edit-btn { background: rgba(79, 70, 229, 0.08); color: var(--ako-primary); }
.task-del-btn { background: rgba(239, 68, 68, 0.08); color: var(--ako-danger); }

/* Action buttons inside expanded detail */
.task-detail-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--ako-border);
}
.task-detail-actions .btn {
    flex: 1;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.task-detail-actions .task-edit-btn {
    width: auto;
    height: auto;
    background: rgba(79, 70, 229, 0.1);
    color: var(--ako-primary);
}
.task-detail-actions .task-del-btn {
    width: auto;
    height: auto;
    background: rgba(239, 68, 68, 0.1);
    color: var(--ako-danger);
}
.task-detail-actions .task-share-btn {
    width: auto;
    height: auto;
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}
.task-share-btn { background: rgba(16, 185, 129, 0.08); color: #10b981; }

/* Task Expandable Preview (notes/checklist inline) */
.task-preview,
.task-notes-preview { display: none; }

/* ===== Completed Section Divider ===== */
.completed-divider {
    padding: 6px 0;
}
.completed-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--ako-text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 8px 12px;
    width: 100%;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.15s;
}
.completed-toggle:hover {
    background: var(--ako-hover);
}
.completed-chevron {
    font-size: 0.7rem;
    transition: transform 0.2s;
}
.completed-toggle.open .completed-chevron {
    transform: rotate(90deg);
}
.completed-count {
    background: var(--ako-hover);
    color: var(--ako-text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 10px;
    min-width: 22px;
    text-align: center;
}
.completed-list .task-item {
    opacity: 0.6;
}
.completed-list .task-item:hover {
    opacity: 0.85;
}
.all-done-msg {
    text-align: center;
    padding: 24px 16px;
    color: var(--ako-success);
    font-weight: 600;
    font-size: 0.95rem;
}

.task-checklist-preview {
    margin-top: 8px;
    list-style: none;
    padding: 0;
}

.task-checklist-preview li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.82rem;
    color: var(--ako-text);
    cursor: pointer;
    transition: opacity 0.15s;
}

.task-checklist-preview li:hover { opacity: 0.7; }

.cl-check {
    width: 18px; height: 18px;
    border: 2px solid var(--ako-border);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 10px;
    color: transparent;
    transition: all 0.15s;
}

.cl-check.cl-done {
    background: var(--ako-success);
    border-color: var(--ako-success);
    color: white;
}

.cl-text-done {
    text-decoration: line-through;
    color: var(--ako-text-secondary);
}

/* Empty State */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 30px; text-align: center; }
.empty-icon { width: 80px; height: 80px; background: rgba(79, 70, 229, 0.08); border-radius: 24px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.empty-icon i { font-size: 36px; color: var(--ako-primary-light); }

/* ===== BOTTOM BAR ===== */
.bottom-bar {
    background: rgba(255,255,255,0.92);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--ako-border);
    display: flex;
    align-items: center;
    justify-content: space-around;
    min-height: 76px;
    padding-bottom: max(0px, env(safe-area-inset-bottom));
    z-index: 50;
    flex-shrink: 0;
    width: 100%;
}
.bottom-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: none; color: var(--ako-text-secondary); font-size: 0.68rem; font-weight: 600; cursor: pointer; padding: 8px 16px; border-radius: 12px; transition: color 0.2s; }
.bottom-btn i { font-size: 1.4rem; }
.bottom-btn.active { color: var(--ako-primary); }

.fab-wrapper { position: relative; top: -20px; }
.fab { width: 60px; height: 60px; border-radius: 50%; background: var(--ako-gradient); color: white; border: 4px solid var(--ako-bg); font-size: 1.6rem; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 24px rgba(79, 70, 229, 0.4); transition: transform 0.2s, box-shadow 0.2s; }
.fab:hover { transform: scale(1.08); box-shadow: 0 8px 30px rgba(79, 70, 229, 0.5); }
.fab:active { transform: scale(0.95); }

/* ===== MODALS ===== */
.modal-card { border-radius: 20px !important; }

@media (max-width: 575.98px) {
    .modal-card { border-radius: 20px 20px 0 0 !important; }
}

/* Checklist editor inside modals */
.checklist-items-edit { display: flex; flex-direction: column; gap: 6px; }

.checklist-edit-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checklist-edit-row input {
    flex: 1;
    border: 1.5px solid var(--ako-border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.88rem;
    outline: none;
    transition: border-color 0.2s;
}

.checklist-edit-row input:focus { border-color: var(--ako-primary); }

.checklist-edit-row .btn-remove-cl {
    width: 30px; height: 30px;
    border-radius: 8px;
    border: none;
    background: rgba(239,68,68,0.08);
    color: var(--ako-danger);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    cursor: pointer;
    flex-shrink: 0;
}

/* ===== VOICE MODAL ===== */
.voice-modal-content { border-radius: 24px !important; }
.voice-modal-header h4 { background: var(--ako-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.voice-record-btn {
    width: 100px; height: 100px;
    border-radius: 50%;
    border: none;
    background: var(--ako-gradient);
    color: white;
    font-size: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 8px 30px rgba(79, 70, 229, 0.35);
}

.voice-record-btn:hover { transform: scale(1.05); }
.voice-record-btn:active { transform: scale(0.95); }
.voice-record-btn.recording { background: var(--ako-danger); box-shadow: 0 8px 30px rgba(239,68,68,0.4); animation: pulse-recording 1.5s infinite; }

@keyframes pulse-recording { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); } 70% { box-shadow: 0 0 0 20px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }

.recording-dot { display: inline-block; width: 10px; height: 10px; background: var(--ako-danger); border-radius: 50%; margin-right: 6px; animation: blink 1s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.voice-waves { display: flex; align-items: center; justify-content: center; gap: 4px; height: 28px; }
.voice-waves span { display: inline-block; width: 4px; background: var(--ako-danger); border-radius: 4px; animation: wave 0.8s ease-in-out infinite; }
.voice-waves span:nth-child(1) { height: 12px; animation-delay: 0s; }
.voice-waves span:nth-child(2) { height: 20px; animation-delay: 0.1s; }
.voice-waves span:nth-child(3) { height: 28px; animation-delay: 0.2s; }
.voice-waves span:nth-child(4) { height: 20px; animation-delay: 0.3s; }
.voice-waves span:nth-child(5) { height: 12px; animation-delay: 0.4s; }
@keyframes wave { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(1); } }

/* Detail Modal */
.detail-section { margin-bottom: 16px; }
.detail-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--ako-text-secondary); letter-spacing: 0.5px; margin-bottom: 6px; }
.detail-notes { background: var(--ako-bg); border-radius: 12px; padding: 12px 16px; font-size: 0.88rem; line-height: 1.6; white-space: pre-wrap; color: var(--ako-text); }

/* Scrollbar */
.task-area::-webkit-scrollbar { width: 4px; }
.task-area::-webkit-scrollbar-track { background: transparent; }
.task-area::-webkit-scrollbar-thumb { background: var(--ako-border); border-radius: 4px; }

/* Desktop */
@media (min-width: 481px) {
    body { background: linear-gradient(135deg, #E0E7FF 0%, #F1F5F9 50%, #CFFAFE 100%); position: static; }
    .app-shell { border-radius: 24px; overflow: hidden; height: 92dvh; margin-top: 4dvh; border: 1px solid var(--ako-border); }
}

/* ===== TOAST NOTIFICATIONS ===== */
.ako-toast-container {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    max-width: 420px;
    width: 90%;
}

.ako-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 14px;
    font-size: 0.88rem;
    font-weight: 600;
    color: white;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    animation: toastIn 0.35s ease forwards;
    width: 100%;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.ako-toast.toast-success { background: linear-gradient(135deg, #10B981, #059669); }
.ako-toast.toast-error { background: linear-gradient(135deg, #EF4444, #DC2626); }
.ako-toast.toast-info { background: linear-gradient(135deg, #4F46E5, #7C3AED); }
.ako-toast.toast-warning { background: linear-gradient(135deg, #F59E0B, #D97706); }

.ako-toast i { font-size: 1.2rem; flex-shrink: 0; }
.ako-toast span { flex: 1; }
.ako-toast .undo-btn {
    background: rgba(255,255,255,0.25);
    border: 1px solid rgba(255,255,255,0.4);
    color: white;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.ako-toast .undo-btn:hover { background: rgba(255,255,255,0.4); }

.ako-toast.toast-out { animation: toastOut 0.3s ease forwards; }

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

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

/* ===== INSTALL BANNER (PWA) ===== */
.install-banner {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(84px + env(safe-area-inset-bottom));
    max-width: 456px;
    width: calc(100% - 24px);
    background: var(--ako-surface);
    border: 1px solid var(--ako-border);
    border-radius: 14px;
    box-shadow: var(--ako-shadow);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 60;
}

.install-banner-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.install-banner-text strong {
    font-size: 0.84rem;
    color: var(--ako-text);
    line-height: 1.2;
}

.install-banner-text span {
    font-size: 0.75rem;
    color: var(--ako-text-secondary);
    line-height: 1.3;
}

.install-action {
    border: none;
    background: var(--ako-gradient);
    color: #fff;
    border-radius: 10px;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 8px 12px;
    white-space: nowrap;
}

.install-dismiss {
    border: 1px solid var(--ako-border);
    background: var(--ako-bg);
    color: var(--ako-text-secondary);
    border-radius: 10px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ===== SWIPE GESTURES ===== */
.task-item {
    position: relative;
    overflow: hidden;
}

.swipe-action {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.4rem;
    z-index: 0;
    transition: opacity 0.2s;
}

.swipe-action-left {
    right: 0;
    background: var(--ako-danger);
    border-radius: 0 var(--ako-radius) var(--ako-radius) 0;
}

.swipe-action-right {
    left: 0;
    background: var(--ako-success);
    border-radius: var(--ako-radius) 0 0 var(--ako-radius);
}

.task-item .task-main,
.task-item .task-preview,
.task-item .task-detail {
    position: relative;
    z-index: 1;
    background: var(--ako-surface);
    transition: transform 0.15s ease;
}

/* ===== MINI CALENDAR WIDGET ===== */
.calendar-popover {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background: var(--ako-surface);
    border-radius: var(--ako-radius);
    box-shadow: var(--ako-shadow-lg);
    border: 1px solid var(--ako-border);
    padding: 16px;
    width: min(300px, calc(100vw - 24px));
    margin-top: 8px;
    animation: calendarIn 0.2s ease forwards;
}

@keyframes calendarIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

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

.cal-header-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ako-text);
}

.cal-nav-btn {
    width: 32px; height: 32px;
    border-radius: 8px;
    border: 1px solid var(--ako-border);
    background: var(--ako-surface);
    color: var(--ako-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.15s;
}

.cal-nav-btn:hover { background: var(--ako-primary); color: white; border-color: var(--ako-primary); }

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

.cal-day-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--ako-text-secondary);
    text-transform: uppercase;
    padding: 4px 0;
}

.cal-day {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--ako-text);
    margin: 0 auto;
    position: relative;
}

.cal-day:hover { background: rgba(79, 70, 229, 0.1); }
.cal-day.cal-today { font-weight: 800; color: var(--ako-primary); border: 2px solid var(--ako-primary); }
.cal-day.cal-selected { background: var(--ako-primary); color: white; font-weight: 700; }
.cal-day.cal-other-month { color: var(--ako-text-secondary); opacity: 0.4; }
.cal-day.cal-has-tasks::after {
    content: '';
    position: absolute;
    bottom: 3px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--ako-primary);
}
.cal-day.cal-selected.cal-has-tasks::after { background: white; }

.date-strip { position: relative; }

/* ===== DRAG & DROP ===== */
.task-item.dragging {
    opacity: 0.5;
    transform: scale(0.98);
}

.task-item.drag-over {
    border-top: 3px solid var(--ako-primary);
}

.drag-handle {
    width: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: grab;
    color: var(--ako-border);
    font-size: 1rem;
    flex-shrink: 0;
    padding: 0 2px;
    transition: color 0.15s;
    touch-action: none;
}

.drag-handle:hover { color: var(--ako-text-secondary); }
.drag-handle:active { cursor: grabbing; }

/* ===== KEYBOARD SHORTCUT HINT ===== */
.kbd-hint {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ako-surface);
    color: var(--ako-text);
    padding: 12px 24px;
    border-radius: 14px;
    box-shadow: var(--ako-shadow-lg);
    border: 1px solid var(--ako-border);
    font-size: 0.82rem;
    z-index: 9999;
    animation: toastIn 0.3s ease;
    max-width: 360px;
    text-align: center;
}

.kbd-hint kbd {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--ako-bg);
    border: 1px solid var(--ako-border);
    font-size: 0.78rem;
    font-weight: 700;
    font-family: inherit;
    margin: 0 2px;
}

/* ===== ICON BUTTONS (Search / Settings) ===== */
.icon-btn {
    width: 36px; height: 36px;
    border-radius: 10px;
    border: 1.5px solid rgba(255,255,255,0.3);
    background: transparent;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    padding: 0;
}
.icon-btn:hover { background: rgba(255,255,255,0.15); }

.icon-btn { position: relative; }
.vault-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #EF4444;
    color: #fff;
    border-radius: 50%;
    font-size: 0.55rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    pointer-events: none;
}

/* ===== SMART CHAT ===== */
.chatbot-modal-content {
    border-radius: 20px !important;
}

.chatbot-modal-content .modal-body {
    min-height: 0;
}

.chatbot-messages {
    background: var(--ako-bg);
    border: 1px solid var(--ako-border);
    border-radius: 14px;
    padding: 12px;
    min-height: 280px;
    max-height: 48vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-msg {
    max-width: 90%;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 0.88rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-msg.user {
    align-self: flex-end;
    background: var(--ako-primary);
    color: white;
    border-bottom-right-radius: 6px;
}

.chat-msg.assistant {
    align-self: flex-start;
    background: var(--ako-surface);
    color: var(--ako-text);
    border: 1px solid var(--ako-border);
    border-bottom-left-radius: 6px;
    white-space: normal;
}

.chat-msg.assistant p {
    margin: 0 0 8px;
}

.chat-msg.assistant p:last-child {
    margin-bottom: 0;
}

.chat-msg.assistant h4,
.chat-msg.assistant h5,
.chat-msg.assistant h6 {
    margin: 0 0 8px;
    font-weight: 700;
    line-height: 1.35;
}

.chat-msg.assistant h4 { font-size: 1rem; }
.chat-msg.assistant h5 { font-size: 0.94rem; }
.chat-msg.assistant h6 { font-size: 0.89rem; }

.chat-msg.assistant ul,
.chat-msg.assistant ol {
    margin: 0 0 8px;
    padding-left: 1.15rem;
}

.chat-msg.assistant li {
    margin: 2px 0;
}

.chat-msg.assistant code {
    background: var(--ako-bg);
    border: 1px solid var(--ako-border);
    border-radius: 6px;
    padding: 1px 5px;
    font-size: 0.8em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

.chat-md-pre {
    margin: 0 0 10px;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    overflow-x: auto;
    border: 1px solid rgba(148,163,184,0.25);
}

.chat-md-pre code {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    color: inherit;
    font-size: 0.8rem;
    white-space: pre;
}

.chat-msg.assistant a {
    color: var(--ako-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.chat-md-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 10px;
    font-size: 0.82rem;
}

.chat-md-table td {
    border: 1px solid var(--ako-border);
    padding: 5px 7px;
    vertical-align: top;
}

.chat-msg-sources {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--ako-border);
    font-size: 0.75rem;
}

.chat-msg-sources a {
    color: var(--ako-primary);
    text-decoration: none;
}

.chat-msg-sources a:hover {
    text-decoration: underline;
}

.chatbot-input-row {
    display: flex;
    gap: 8px;
}

.chatbot-input-row .form-control {
    border-radius: 999px;
}

.chatbot-input-row .btn {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    flex-shrink: 0;
}

.chatbot-hint {
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--ako-text-secondary);
}

@media (max-width: 575.98px) {
    #chatbotModal .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100%;
    }

    .chatbot-modal-content {
        border-radius: 20px 20px 0 0 !important;
        height: 100dvh;
    }

    .chatbot-modal-content .modal-header {
        padding: 0.85rem 0.9rem 0.35rem;
    }

    .chatbot-modal-content .modal-body {
        padding: 0.75rem;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
        flex: 1;
        min-height: 0;
    }

    .chatbot-messages {
        min-height: 0;
        max-height: none;
        flex: 1;
        padding: 10px;
        border-radius: 12px;
    }

    .chat-msg {
        max-width: 96%;
        font-size: 0.86rem;
    }

    .chatbot-input-row {
        margin-top: 8px !important;
    }

    .chatbot-hint {
        margin-top: 6px;
        font-size: 0.72rem;
    }
}

/* ===== SEARCH BAR ===== */
.search-bar {
    background: var(--ako-surface);
    padding: 10px 12px;
    border-bottom: 1px solid var(--ako-border);
    flex-shrink: 0;
}
.search-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ako-bg);
    border-radius: var(--ako-radius-sm);
    padding: 6px 12px;
    border: 1.5px solid var(--ako-border);
    transition: border-color 0.2s;
}
.search-input-wrap:focus-within { border-color: var(--ako-primary); }
.search-input-wrap i { color: var(--ako-text-secondary); font-size: 0.95rem; }
.search-input-wrap input {
    flex: 1; border: none; background: transparent;
    outline: none; font-size: 0.9rem; color: var(--ako-text);
    font-family: inherit;
}
.search-input-wrap input::placeholder { color: var(--ako-text-secondary); }
.search-close-btn {
    border: none; background: none; color: var(--ako-text-secondary);
    font-size: 1.1rem; cursor: pointer; padding: 0;
}
.search-results {
    background: var(--ako-surface);
    border: 1px solid var(--ako-border);
    border-top: none;
    max-height: 300px;
    overflow-y: auto;
    position: relative;
    z-index: 20;
}
.search-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--ako-border);
    transition: background 0.15s;
}
.search-result-item:hover { background: var(--ako-bg); }
.search-result-item.completed .search-result-text { text-decoration: line-through; color: var(--ako-text-secondary); }
.search-result-body { flex: 1; min-width: 0; }
.search-result-text { font-size: 0.9rem; font-weight: 600; }
.search-result-meta { font-size: 0.75rem; color: var(--ako-text-secondary); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.search-empty { padding: 20px; text-align: center; color: var(--ako-text-secondary); font-size: 0.88rem; }

/* ===== VIEW TOGGLE STRIP ===== */
.view-toggle-strip {
    display: flex;
    gap: 4px;
    background: var(--ako-bg);
    border-radius: 10px;
    padding: 3px;
    margin: 10px 12px 6px;
    flex-shrink: 0;
}
.view-btn {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--ako-text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.view-btn.active {
    background: var(--ako-surface);
    color: var(--ako-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.view-btn i { font-size: 0.9rem; }

/* ===== AGENDA VIEW ===== */
.agenda-area {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0 24px;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}
.agenda-area::-webkit-scrollbar { width: 4px; }
.agenda-area::-webkit-scrollbar-thumb { background: var(--ako-border); border-radius: 4px; }

.agenda-date-section {
    margin: 0 12px 12px;
    background: var(--ako-surface);
    border-radius: var(--ako-radius);
    box-shadow: var(--ako-shadow);
    overflow: hidden;
    animation: slideUp 0.3s ease forwards;
}
.agenda-date-section.agenda-today {
    border: 2px solid var(--ako-primary);
}
.agenda-date-section.agenda-past {
    opacity: 0.7;
}

.agenda-date-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--ako-border);
}
.agenda-date-header:hover { background: var(--ako-bg); }

.agenda-date-info {
    display: flex;
    align-items: center;
    gap: 8px;
}
.agenda-date-day {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ako-text-secondary);
    width: 32px;
}
.agenda-date-num {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--ako-text);
    line-height: 1;
}
.agenda-date-month {
    font-size: 0.78rem;
    color: var(--ako-text-secondary);
    font-weight: 500;
}
.agenda-date-progress {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ako-text-secondary);
    background: var(--ako-bg);
    padding: 2px 10px;
    border-radius: 10px;
}

.agenda-task-item {
    border-bottom: 1px solid var(--ako-border);
}
.agenda-task-item:last-child { border-bottom: none; }
.agenda-task-item.completed { opacity: 0.6; }
.agenda-task-item.completed .agenda-task-text { text-decoration: line-through; color: var(--ako-text-secondary); }

.agenda-task-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    min-height: 44px;
}
.agenda-task-row:hover { background: rgba(79, 70, 229, 0.03); }

.agenda-task-check {
    width: 22px; height: 22px;
    border: 2px solid var(--ako-border);
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 12px;
    color: transparent;
    transition: all 0.2s;
}
.agenda-task-check.done {
    background: var(--ako-success);
    border-color: var(--ako-success);
    color: white;
}

.agenda-task-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.agenda-task-text {
    font-size: 0.88rem;
    font-weight: 500;
    word-break: break-word;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agenda-task-time-hint {
    font-size: 0.72rem;
    color: var(--ako-text-secondary);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 3px;
}

.agenda-task-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.agenda-act-btn {
    width: 30px; height: 30px;
    border-radius: 8px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}
.agenda-edit-btn { background: rgba(79, 70, 229, 0.08); color: var(--ako-primary); }
.agenda-edit-btn:hover { background: rgba(79, 70, 229, 0.18); }
.agenda-del-btn { background: rgba(239, 68, 68, 0.08); color: var(--ako-danger); }
.agenda-del-btn:hover { background: rgba(239, 68, 68, 0.18); }

/* ===== OVERDUE BANNER ===== */
.overdue-banner {
    background: linear-gradient(135deg, rgba(239,68,68,0.08), rgba(239,68,68,0.04));
    border-bottom: 1px solid rgba(239,68,68,0.15);
    padding: 10px 16px;
}
.overdue-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.overdue-toggle-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.overdue-toggle-left i { color: var(--ako-danger); font-size: 1rem; }
.overdue-count {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ako-danger);
}
.overdue-chevron {
    color: var(--ako-danger);
    transition: transform 0.2s;
    font-size: 0.9rem;
}
.overdue-chevron.rotated { transform: rotate(180deg); }

.overdue-list {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.overdue-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--ako-surface);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 0.85rem;
}
.overdue-item:hover { background: var(--ako-bg); }
.overdue-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.overdue-item-body span { font-weight: 500; }
.overdue-item-body small { font-size: 0.72rem; color: var(--ako-text-secondary); }
.overdue-complete-btn {
    color: var(--ako-success);
    font-size: 1.1rem;
    padding: 4px 6px;
    background: none;
    border: none;
}

/* ===== PRIORITY SELECTOR (in modals) ===== */
.priority-selector {
    display: flex;
    gap: 6px;
}
.priority-btn {
    flex: 1;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1.5px solid var(--ako-border);
    background: var(--ako-surface);
    color: var(--ako-text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.priority-btn[data-priority="high"]:hover,
.priority-btn[data-priority="high"].active {
    background: rgba(239,68,68,0.1);
    border-color: #EF4444;
    color: #EF4444;
}
.priority-btn[data-priority="medium"]:hover,
.priority-btn[data-priority="medium"].active {
    background: rgba(245,158,11,0.1);
    border-color: #F59E0B;
    color: #F59E0B;
}
.priority-btn[data-priority="low"]:hover,
.priority-btn[data-priority="low"].active {
    background: rgba(16,185,129,0.1);
    border-color: #10B981;
    color: #10B981;
}

/* ===== CATEGORY & PRIORITY & RECURRENCE Tags ===== */
.cat-badge, .cat-badge-sm {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
}
.cat-badge-sm { font-size: 0.68rem; padding: 1px 6px; }

.task-meta-tag.cat-tag { text-transform: capitalize; }
.task-meta-tag.priority-high-tag { color: #EF4444; background: rgba(239,68,68,0.08); }
.task-meta-tag.recurrence-tag { color: #8B5CF6; background: rgba(139,92,246,0.08); text-transform: capitalize; }

.priority-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ===== SETTINGS MODAL ===== */
.settings-modal-content {
    border-radius: 24px !important;
    overflow: hidden;
}
@media (max-width: 575.98px) {
    .settings-modal-content { border-radius: 24px 24px 0 0 !important; }
}
.settings-modal-header {
    padding: 20px 24px 12px;
}
.settings-modal-title {
    background: var(--ako-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    font-size: 1.25rem;
}
.settings-tabs-wrapper {
    padding: 0 24px;
    border-bottom: 1px solid var(--ako-border);
}
.settings-tabs {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tab {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 10px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ako-text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
    border-radius: 0;
}
.settings-tab:hover {
    color: var(--ako-primary);
    background: rgba(79, 70, 229, 0.04);
}
.settings-tab.active {
    color: var(--ako-primary);
    border-bottom-color: var(--ako-primary);
}
.settings-tab-content {
    display: none;
}
.settings-tab-content.active {
    display: block;
    animation: settingsFadeIn 0.25s ease;
}
@keyframes settingsFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.settings-card {
    background: var(--ako-surface);
    border: 1px solid var(--ako-border);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
    transition: border-color 0.2s ease;
}
.settings-card:hover {
    border-color: #CBD5E1;
}
.settings-card:last-child {
    margin-bottom: 0;
}
.settings-card-danger {
    border-color: #FECACA;
}
.settings-card-danger:hover {
    border-color: #FCA5A5;
}
.settings-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.settings-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.settings-card-title {
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 1px;
    color: var(--ako-text);
}
.settings-card-desc {
    font-size: 0.7rem;
    color: var(--ako-text-secondary);
    margin-bottom: 0;
}
.settings-input {
    border-radius: 10px !important;
    border-color: var(--ako-border) !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.settings-input:focus {
    border-color: var(--ako-primary-light) !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important;
}
.settings-section {
    padding: 14px 0;
    border-bottom: 1px solid var(--ako-border);
}
.settings-section:last-child { border-bottom: none; }
.settings-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ako-text-secondary);
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

/* ===== AI SMART FEATURES ===== */
.ai-hub-btn { color: var(--ako-primary); font-size: 1.15rem; }
.ai-hub-btn:hover { transform: scale(1.15); }

/* AI Hub Modal */
.ai-hub-modal-content { border-radius: 24px !important; }
.ai-hub-title { background: var(--ako-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 700; }
.ai-feature-card {
    background: var(--ako-bg);
    border: 1px solid var(--ako-border);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 14px;
}
.ai-feature-header {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 4px;
    color: var(--ako-text);
}
.ai-feature-desc {
    font-size: 0.82rem;
    color: var(--ako-text-secondary);
    margin-bottom: 10px;
}

/* NL Task Input */
.ai-nl-input-row {
    display: flex;
    gap: 8px;
}
.ai-nl-input-row input {
    flex: 1;
    border-radius: 12px;
    border: 1px solid var(--ako-border);
    padding: 8px 14px;
    font-size: 0.9rem;
    background: var(--ako-surface);
    color: var(--ako-text);
}
.ai-nl-input-row button {
    border-radius: 12px;
    width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    background: var(--ako-gradient);
    color: white;
    border: none;
}
.ai-ocr-input-row {
    display: flex;
    gap: 8px;
}
.ai-ocr-input-row input {
    flex: 1;
    border-radius: 12px;
    border: 1px solid var(--ako-border);
    background: var(--ako-surface);
    color: var(--ako-text);
    font-size: 0.84rem;
}
.ai-ocr-input-row button {
    border-radius: 12px;
    width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}
.ai-nl-result {
    margin-top: 12px;
    background: var(--ako-surface);
    border: 1px solid var(--ako-border);
    border-radius: 12px;
    padding: 14px;
}
.ai-parsed-title {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 6px;
    color: var(--ako-text);
}
.ai-parsed-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.82rem;
    color: var(--ako-text-secondary);
    margin-bottom: 6px;
}
.ai-parsed-meta i { margin-right: 3px; }
.ai-parsed-notes, .ai-parsed-checklist {
    font-size: 0.82rem;
    color: var(--ako-text-secondary);
    margin-top: 4px;
}
.ai-nl-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.ai-nl-actions .btn { border-radius: 10px; font-size: 0.85rem; padding: 6px 14px; }
.ai-ocr-task-item {
    border: 1px solid var(--ako-border);
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 8px;
    background: var(--ako-bg);
}
.ai-ocr-task-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ai-ocr-task-select {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    width: 100%;
}
.ai-ocr-task-select input,
.ai-ocr-select-all input {
    accent-color: var(--ako-primary);
}
.ai-ocr-select-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ako-text-secondary);
    font-size: 0.76rem;
    -webkit-user-select: none;
    user-select: none;
}
.ai-ocr-task-title { font-size: 0.88rem; font-weight: 600; color: var(--ako-text); }
.ai-ocr-task-meta { font-size: 0.76rem; color: var(--ako-text-secondary); margin-top: 2px; }

/* AI Result content (briefing/suggestions) */
.ai-result-content {
    background: var(--ako-surface);
    border: 1px solid var(--ako-border);
    border-radius: 12px;
    padding: 14px;
    margin-top: 10px;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--ako-text);
}
.ai-result-content h1, .ai-result-content h2, .ai-result-content h3 { font-size: 1rem; font-weight: 700; margin-top: 10px; }
.ai-result-content ul { padding-left: 18px; margin-bottom: 6px; }
.ai-result-content li { margin-bottom: 2px; }
.ai-result-content strong { color: var(--ako-primary); }

/* Suggestion Cards */
.ai-suggestion-card {
    background: var(--ako-surface);
    border: 1px solid var(--ako-border);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
}
.ai-suggestion-header {
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}
.ai-suggestion-icon { font-size: 1.1rem; }
.ai-suggestion-desc {
    font-size: 0.82rem;
    color: var(--ako-text-secondary);
    margin: 0;
}

/* Auto-Categorize Inline Button */
.ai-categorize-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    margin-bottom: 4px;
}
.ai-categorize-btn {
    font-size: 0.78rem;
    padding: 3px 10px;
    border-radius: 8px;
    background: var(--ako-gradient);
    color: white;
    border: none;
    white-space: nowrap;
}
.ai-categorize-btn:hover { opacity: 0.9; }
.ai-categorize-hint {
    font-size: 0.78rem;
    color: var(--ako-text-secondary);
}

/* ===== PWA STANDALONE MODE FIXES ===== */
@media all and (display-mode: standalone) {
    body {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100dvh;
        overflow: hidden;
        overscroll-behavior: none;
    }

    .app-shell {
        height: 100dvh;
        overflow: hidden;
        padding-top: env(safe-area-inset-top);
    }

    .app-topbar {
        padding-top: 12px;
    }

    .bottom-bar {
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }

    .task-area,
    .agenda-area {
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== MOBILE SPECIFIC FIXES ===== */
@media (max-width: 480px) {
    html, body {
        overflow: hidden;
        overscroll-behavior: none;
        touch-action: manipulation;
    }

    .app-shell {
        height: -webkit-fill-available;
        height: 100dvh;
        max-width: 100%;
    }

    /* Compact topbar for mobile */
    .app-topbar {
        padding: 8px 10px;
        padding-top: max(8px, env(safe-area-inset-top));
        min-height: 48px;
    }

    .brand-sm {
        font-size: 1rem;
        gap: 5px;
    }

    .brand-sm i {
        font-size: 1.1rem;
    }

    .topbar-right {
        gap: 3px;
    }

    .icon-btn {\n        width: 32px;\n        height: 32px;\n        border-radius: 8px;\n        font-size: 0.9rem;\n    }

    /* Kill double padding: px-3 on containers + margin on items is redundant */
    .task-list,
    .completed-list,
    .agenda-list {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Task cards */
    .task-item {
        margin: 0 10px 8px;
    }

    .task-main {
        padding: 12px 10px;
        gap: 6px;
    }

    .drag-handle {
        width: 14px;
        font-size: 0.8rem;
    }

    .task-check {
        width: 22px;
        height: 22px;
        font-size: 12px;
    }

    .task-text {
        font-size: 0.9rem;
    }

    .task-body {
        flex: 1 1 0%;
        min-width: 0;
        overflow: hidden;
    }

    .task-expand-chevron {
        padding: 4px;
        font-size: 0.75rem;
    }

    .task-item.expanded .task-detail {
        padding: 4px 12px 14px 12px;
    }

    .bottom-bar {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        min-height: 68px;
    }

    .bottom-btn {
        padding: 6px 12px;
        font-size: 0.65rem;
    }

    .bottom-btn i {
        font-size: 1.2rem;
    }

    .fab {
        width: 54px;
        height: 54px;
        font-size: 1.4rem;
    }

    .fab-wrapper {
        top: -18px;
    }

    .task-area {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    .agenda-area {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    /* Prevent iOS input zoom — inputs must be >= 16px */
    .form-control,
    .form-select,
    .form-floating > .form-control,
    .search-input-wrap input {
        font-size: 16px !important;
    }

    /* Prevent scroll-through when modals open */
    .modal-open .app-shell {
        overflow: hidden;
    }

    .modal-open .task-area,
    .modal-open .agenda-area,
    .modal-open .vault-area,
    .modal-open .vault-files-area,
    .modal-open .impact-area,
    .modal-open .impact-detail-area {
        overflow: hidden;
    }
}

/* ===== VAULT ===== */
.vault-area, .vault-files-area {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding-bottom: 100px;
}

.vault-header {
    border-bottom: 1px solid var(--ako-border);
    background: var(--ako-card-bg);
}

.vault-header h5 {
    font-size: 1.3rem;
}

/* Vault Link Cards */
.vault-link-card {
    background: var(--ako-card-bg);
    border-radius: 16px;
    border: 1.5px solid var(--ako-border);
    padding: 16px;
    margin-top: 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.vault-link-card:hover {
    border-color: var(--ako-primary-light);
    box-shadow: 0 2px 12px rgba(79, 70, 229, 0.08);
}

.vault-link-card.vault-link-inactive {
    opacity: 0.6;
}

.vault-link-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
}

.vault-link-label {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 4px;
    color: var(--ako-text-primary);
}

.vault-link-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
}

.vault-link-expiry {
    margin-top: 2px;
    font-size: 0.78rem;
}

.vault-link-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.vault-link-actions .vault-action-btn {
    font-size: 0.78rem;
    padding: 4px 10px;
}

/* Vault Files Grid */
.vault-files-header {
    border-bottom: 1px solid var(--ako-border);
    background: var(--ako-card-bg);
}

.vault-files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    padding-top: 12px;
}

.vault-file-card {
    background: var(--ako-card-bg);
    border-radius: 14px;
    border: 1.5px solid var(--ako-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.vault-file-card:hover {
    border-color: var(--ako-primary-light);
    box-shadow: 0 2px 12px rgba(79, 70, 229, 0.08);
}

.vault-file-preview {
    width: 100%;
    height: 120px;
    overflow: hidden;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vault-file-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vault-file-icon {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(79, 70, 229, 0.04);
}

.vault-file-icon i {
    font-size: 2.5rem;
    color: var(--ako-primary-light);
}

.vault-file-info {
    padding: 10px 12px 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vault-file-name {
    font-weight: 600;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ako-text-primary);
}

.vault-file-meta {
    font-size: 0.72rem;
    color: var(--ako-text-secondary);
}

.vault-file-actions {
    padding: 6px 12px 10px;
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.vault-file-actions .btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== MONTH VIEW ===== */
.month-area {
    padding-bottom: 100px;
    overflow-y: auto;
    height: calc(100dvh - 140px);
    -webkit-overflow-scrolling: touch;
}

.month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.month-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ako-text);
}

.month-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
}

.month-weekday {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ako-text-secondary);
    padding: 6px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

.month-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--ako-radius-sm);
    cursor: pointer;
    position: relative;
    background: var(--ako-surface);
    transition: background 0.15s, box-shadow 0.15s;
    min-height: 44px;
}

.month-day:hover {
    background: var(--ako-bg);
    box-shadow: var(--ako-shadow);
}

.month-day.empty {
    background: transparent;
    cursor: default;
}

.month-day.empty:hover {
    box-shadow: none;
}

.month-day.today {
    background: var(--ako-primary);
    color: #fff;
}

.month-day.today:hover {
    background: var(--ako-primary-dark);
}

.month-day.selected:not(.today) {
    outline: 2px solid var(--ako-primary);
    outline-offset: -2px;
}

.month-day-num {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
}

.month-day-badge {
    font-size: 0.6rem;
    font-weight: 700;
    background: var(--ako-primary-light);
    color: #fff;
    border-radius: 10px;
    padding: 1px 5px;
    margin-top: 2px;
    line-height: 1.3;
    min-width: 16px;
    text-align: center;
}

.month-day.today .month-day-badge {
    background: rgba(255,255,255,0.3);
}

.month-day-badge.all-done {
    background: var(--ako-success);
}

.month-day.has-tasks::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ako-primary-light);
}

.month-day.today.has-tasks::after {
    background: rgba(255,255,255,0.5);
}

/* ===== IMPACT ===== */
.impact-area, .impact-detail-area {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding-bottom: 24px;
}

.impact-header {
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.impact-header h5 {
    font-size: 1.1rem;
}

/* Campaign Cards */
.impact-campaign-card {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--soft-shadow);
    margin-bottom: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.impact-campaign-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.impact-card-image {
    width: 100%;
    height: 140px;
    overflow: hidden;
    background: #f0f0f0;
}

.impact-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.impact-card-body {
    padding: 14px 16px;
}

.impact-card-body h6 {
    font-size: 0.95rem;
    line-height: 1.3;
}

/* Impact Detail */
.impact-detail-header {
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.impact-progress-bar-wrap .progress {
    border-radius: 10px;
    background: rgba(0,0,0,0.06);
}

.impact-progress-bar-wrap .progress-bar {
    border-radius: 10px;
}

/* Pledge Rows */
.impact-pledge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--soft-shadow);
    margin-bottom: 8px;
}

.impact-pledge-row .fw-semibold {
    font-size: 0.88rem;
}

/* ===== OFFLINE BANNER ===== */
.offline-banner {
    background: var(--ako-warning);
    color: #1a1a1a;
    text-align: center;
    padding: 6px 16px;
    font-size: 0.78rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    z-index: 100;
}

.offline-banner i {
    font-size: 0.9rem;
}

.offline-sync-icon {
    font-size: 0.7rem;
    color: var(--ako-warning);
    margin-left: 5px;
    opacity: 0.85;
    animation: offlinePulse 2s ease-in-out infinite;
}

@keyframes offlinePulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ===== iOS SAFE AREA — notched devices ===== */
@supports (padding-top: env(safe-area-inset-top)) {
    .app-topbar {
        padding-top: max(12px, env(safe-area-inset-top));
    }

    .bottom-bar {
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }

    .install-banner {
        bottom: calc(84px + env(safe-area-inset-bottom));
    }
}

/* ===== Admin user row hover ===== */
.admin-user-row {
    transition: background 0.15s;
}
.admin-user-row:hover {
    background: #f3f4f6;
}