:root{
    --primary:#0079bf;--primary-dark:#026aa7;--primary-light:rgba(0,121,191,.08);
    --success:#61bd4f;--danger:#eb5a46;--warning:#f2d600;
    --bg:#f4f5f7;--card:#fff;--text:#172b4d;--text2:#5e6c84;--border:#dfe1e6;
    --shadow:0 1px 3px rgba(0,0,0,.1);--header-bg:var(--primary)
}
[data-theme="dark"]{
    --primary:#5ca8db;--primary-dark:#4a96c9;--primary-light:rgba(92,168,219,.12);
    --bg:#121318;--card:#1c1d24;--text:#e2e4e9;--text2:#8b8fa3;--border:#2d2e3a;
    --shadow:0 1px 4px rgba(0,0,0,.4);--header-bg:#1a1b26
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overscroll-behavior-y:contain}

:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
button:focus:not(:focus-visible),a:focus:not(:focus-visible),input:focus:not(:focus-visible),select:focus:not(:focus-visible),textarea:focus:not(:focus-visible){outline:none}

/* Splash */
.splash{position:fixed;inset:0;background:linear-gradient(135deg,#0079bf,#026aa7);display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .5s}
.splash.hidden{opacity:0;pointer-events:none}
.splash-content{text-align:center;color:#fff}
.splash-logo{margin-bottom:20px}
.splash-logo svg,.splash-logo i{width:64px;height:64px;stroke-width:1.5}
.splash-title{font-size:28px;font-weight:700}
.splash-subtitle{font-size:15px;opacity:.7;margin-top:8px}

/* App */
.app{display:none;flex-direction:column;min-height:100vh;padding-bottom:70px}
.app.show{display:flex}

/* Offline */
.offline-badge{display:none;align-items:center;justify-content:center;gap:6px;padding:8px;background:#ff9f1a;color:#fff;font-size:13px;font-weight:600}
.offline-badge.show{display:flex}
.offline-badge i{width:16px;height:16px}

/* Header */
.app-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--header-bg);color:#fff;position:sticky;top:0;z-index:100}
.app-header h1{font-size:19px;white-space:nowrap;display:flex;align-items:center;gap:8px}
.header-logo{width:22px;height:22px}
.header-actions{display:flex;gap:6px;align-items:center}
.header-btn{width:38px;height:38px;background:rgba(255,255,255,.15);border:none;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
.header-btn:active{background:rgba(255,255,255,.3)}
.header-btn i{width:20px;height:20px}

/* Add Task Button */
.add-task-bar{padding:10px 16px;background:var(--bg)}
.add-task-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px 20px;background:var(--primary);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;transition:background .2s;box-shadow:0 2px 8px rgba(0,121,191,.35)}
.add-task-btn:active{background:var(--primary-dark);transform:scale(.98)}
.add-task-btn i{width:22px;height:22px;stroke-width:2.5}

/* Quick Add */
.quick-add{background:var(--card);padding:12px 16px;box-shadow:var(--shadow)}
.quick-add-row{display:flex;gap:8px;margin-bottom:8px}
.quick-add-row:last-child{margin-bottom:0}
.quick-add input[type="text"]{flex:1;padding:12px;border:2px solid var(--border);border-radius:8px;font-size:16px;outline:none;min-width:0;background:var(--bg);color:var(--text)}
.quick-add input:focus{border-color:var(--primary)}
.quick-add select{flex:1;padding:10px;border:2px solid var(--border);border-radius:8px;font-size:14px;background:var(--bg);color:var(--text);min-width:0}
.quick-add select#task-priority{flex:0 0 60px;text-align:center}
.voice-btn{width:48px;height:48px;background:var(--primary);border:none;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .2s}
.voice-btn:active{background:var(--primary-dark)}
.voice-btn.listening{background:var(--danger);animation:pulse-ring 1.5s infinite}
.voice-btn i{width:22px;height:22px}
@keyframes pulse-ring{0%,100%{box-shadow:0 0 0 0 rgba(235,90,70,.4)}50%{box-shadow:0 0 0 14px rgba(235,90,70,0)}}
.add-btn{display:flex;align-items:center;gap:6px;padding:10px 16px;background:var(--primary);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;flex-shrink:0;transition:background .2s}
.add-btn:active{background:var(--primary-dark)}
.add-btn i{width:18px;height:18px}

/* Voice Indicator */
.voice-indicator{display:none;flex-direction:column;align-items:center;padding:40px 20px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff}
.voice-indicator.show{display:flex}
.voice-waves{display:flex;gap:6px;height:60px;margin-bottom:20px;align-items:center}
.voice-waves span{width:6px;background:#fff;border-radius:3px;animation:wave 1s ease-in-out infinite}
.voice-waves span:nth-child(1){height:20px;animation-delay:0s}
.voice-waves span:nth-child(2){height:35px;animation-delay:.1s}
.voice-waves span:nth-child(3){height:50px;animation-delay:.2s}
.voice-waves span:nth-child(4){height:35px;animation-delay:.3s}
.voice-waves span:nth-child(5){height:20px;animation-delay:.4s}
@keyframes wave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.8)}}
.voice-text{font-size:20px;font-weight:600;margin-bottom:20px}
.voice-indicator button{padding:12px 24px;background:rgba(255,255,255,.2);border:none;border-radius:25px;color:#fff;font-size:16px;cursor:pointer}

/* Board Select */
.board-select{padding:10px 16px;background:var(--card);border-bottom:1px solid var(--border)}
.board-select select{width:100%;padding:10px;border:2px solid var(--border);border-radius:8px;font-size:15px;font-weight:600;background:var(--bg);color:var(--text)}

/* Search */
.search-bar{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--card);border-bottom:1px solid var(--border)}
.search-bar .search-icon{width:18px;height:18px;color:var(--text2);flex-shrink:0}
.search-bar input{flex:1;padding:8px 0;border:none;font-size:15px;background:transparent;color:var(--text);outline:none}
.search-clear{display:none;width:28px;height:28px;border:none;background:var(--border);border-radius:50%;color:var(--text2);cursor:pointer;align-items:center;justify-content:center;flex-shrink:0}
.search-clear i{width:14px;height:14px}

/* Filter Tabs */
.filter-tabs{display:flex;gap:0;padding:0 16px;background:var(--card);border-bottom:1px solid var(--border);overflow-x:auto;-webkit-overflow-scrolling:touch}
.filter-tab{flex:1;padding:10px 4px;background:none;border:none;border-bottom:2px solid transparent;font-size:13px;font-weight:600;color:var(--text2);cursor:pointer;white-space:nowrap;transition:all .2s}
.filter-tab.active{color:var(--primary);border-bottom-color:var(--primary)}
.filter-tab:active{background:var(--primary-light)}

/* Sort */
.sort-bar{padding:6px 16px;background:var(--bg);display:flex;align-items:center;gap:8px}
.sort-bar select{padding:6px 10px;border:1px solid var(--border);border-radius:6px;font-size:12px;background:var(--card);color:var(--text2);outline:none}

/* Lists */
.lists-container{flex:1;padding:12px 16px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.list-section{margin-bottom:16px;animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.list-header{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:2px solid var(--border);margin-bottom:8px}
.list-header h3{font-size:13px;font-weight:700;text-transform:uppercase;color:var(--text2);letter-spacing:.5px}
.list-header-right{display:flex;align-items:center;gap:6px}
.list-count{background:var(--border);padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;color:var(--text2)}
.list-count-done{color:var(--success);font-size:11px}
.list-menu-btn{width:28px;height:28px;border:none;background:none;border-radius:6px;color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.list-menu-btn:active{background:var(--border)}
.list-menu-btn i{width:16px;height:16px}

/* Swipe Container */
.swipe-container{position:relative;overflow:hidden;border-radius:10px;margin-bottom:8px}
.swipe-bg-left,.swipe-bg-right{position:absolute;top:0;bottom:0;width:100%;display:flex;align-items:center;gap:8px;padding:0 20px;font-size:14px;font-weight:600;color:#fff;opacity:0;transition:opacity .15s}
.swipe-bg-left{left:0;background:var(--success);justify-content:flex-start}
.swipe-bg-right{right:0;background:var(--danger);justify-content:flex-end}
.swipe-bg-left i,.swipe-bg-right i{width:20px;height:20px}
.swipe-container.swiping-right .swipe-bg-left{opacity:1}
.swipe-container.swiping-left .swipe-bg-right{opacity:1}

/* Task Card */
.task-card{background:var(--card);border-radius:10px;padding:12px 14px;box-shadow:var(--shadow);cursor:pointer;display:flex;align-items:flex-start;gap:10px;transition:transform .15s ease,opacity .2s;position:relative;z-index:1;border-left:3px solid transparent}
.task-card:active{transform:scale(.98)}
.task-card.done{opacity:.5}
.task-card.done .task-title{text-decoration:line-through;color:var(--text2)}
.task-card.prio-1{border-left-color:var(--danger)}
.task-card.prio-2{border-left-color:#ff9f1a}
.task-card.prio-3{border-left-color:var(--primary)}
.task-check{width:26px;height:26px;border:2px solid var(--border);border-radius:50%;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;padding:0;color:transparent}
.task-check:active{transform:scale(.85)}
.task-check.checked{background:var(--success);border-color:var(--success);color:#fff}
.task-check i{width:14px;height:14px}
.task-content{flex:1;min-width:0}
.task-labels{display:flex;gap:4px;margin-bottom:6px}
.task-label{height:6px;width:40px;border-radius:3px}
.task-title{font-size:15px;font-weight:500;line-height:1.4;word-break:break-word}
.task-meta{display:flex;gap:8px;margin-top:6px;font-size:11px;color:var(--text2);flex-wrap:wrap;align-items:center}
.task-meta-item{display:flex;align-items:center;gap:3px}
.task-meta-item i{width:13px;height:13px}
.task-meta-item.overdue{color:#fff;background:var(--danger);padding:2px 6px;border-radius:4px}
.task-meta-item.complete{color:#fff;background:var(--success);padding:2px 6px;border-radius:4px}
.prio-badge{padding:1px 6px;border-radius:4px;font-weight:700;font-size:10px;color:#fff}
.task-meta-item.recurrence{color:var(--primary);font-weight:600}

/* Alarm bell button on task card */
.task-alarm-btn{width:30px;height:30px;border:none;background:none;border-radius:50%;color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;padding:0}
.task-alarm-btn:active{transform:scale(.85)}
.task-alarm-btn i{width:16px;height:16px}
.task-alarm-btn.alarm-active{color:var(--warning);background:rgba(242,214,0,.15)}
.task-alarm-btn.alarm-active i{fill:var(--warning)}

/* Bottom Nav */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;display:flex;background:var(--card);border-top:1px solid var(--border);z-index:100;align-items:flex-end}
.bottom-nav .nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 0 8px;color:var(--text2);text-decoration:none;font-size:11px;background:none;border:none;cursor:pointer;transition:color .2s}
.bottom-nav .nav-item.active{color:var(--primary);font-weight:600}
.bottom-nav .nav-item i{width:22px;height:22px;margin-bottom:2px}
.bottom-nav .nav-fab{background:var(--primary);color:#fff;margin:-18px 16px 8px;border-radius:50%;width:52px;height:52px;flex:none;box-shadow:0 4px 12px rgba(0,121,191,.35);padding:0;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .15s}
.bottom-nav .nav-fab:active{background:var(--primary-dark);transform:scale(.92)}
.bottom-nav .nav-fab i{width:24px;height:24px;margin:0}
.bottom-nav .add-fab{background:var(--success);box-shadow:0 4px 12px rgba(97,189,79,.4)}
.bottom-nav .add-fab:active{background:#4ea83e}
.bottom-nav .add-fab i{stroke-width:3}

/* Modal */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;padding:20px;align-items:center;justify-content:center}
.modal-overlay.show{display:flex}
.modal-box{background:var(--card);border-radius:14px;width:100%;max-width:420px;max-height:85vh;overflow-y:auto;animation:slideUp .25s ease}
@keyframes slideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--border)}
.modal-header h2{font-size:18px}
.modal-header button{width:36px;height:36px;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:8px;color:var(--text)}
.modal-header button:active{background:var(--bg)}
.modal-header button i{width:22px;height:22px}
.modal-body{padding:16px}
.modal-body label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:6px;margin-top:14px;text-transform:uppercase;letter-spacing:.3px}
.modal-body label:first-child{margin-top:0}
.modal-body input,.modal-body textarea,.modal-body select{width:100%;padding:11px;border:2px solid var(--border);border-radius:8px;font-size:15px;outline:none;font-family:inherit;background:var(--bg);color:var(--text)}
.modal-body input:focus,.modal-body textarea:focus,.modal-body select:focus{border-color:var(--primary)}
.modal-body textarea{resize:vertical;min-height:50px}
.modal-footer{display:flex;justify-content:space-between;padding:16px;border-top:1px solid var(--border)}
.btn-delete{width:44px;height:44px;background:none;border:2px solid var(--danger);border-radius:8px;color:var(--danger);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.btn-delete:active{background:rgba(235,90,70,.1)}
.btn-delete i{width:20px;height:20px}
.btn-save{display:flex;align-items:center;gap:8px;padding:12px 24px;background:var(--primary);color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:background .2s}
.btn-save:active{background:var(--primary-dark)}
.btn-save i{width:18px;height:18px}

/* Date Picker Trigger */
.date-picker-trigger{display:flex;align-items:center;gap:10px;padding:11px;border:2px solid var(--border);border-radius:8px;cursor:pointer;background:var(--bg);color:var(--text);transition:border-color .2s}
.date-picker-trigger:active{border-color:var(--primary)}
.date-picker-trigger i{width:18px;height:18px;color:var(--text2);flex-shrink:0}
.date-picker-trigger span{flex:1;font-size:15px}
.date-clear-btn{width:28px;height:28px;border:none;background:var(--border);border-radius:50%;color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0}
.date-clear-btn i{width:14px;height:14px}

/* Custom Date Picker */
.custom-date-picker{margin-top:8px;background:var(--card);border:2px solid var(--border);border-radius:10px;padding:12px;animation:fadeIn .2s ease}
.dp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.dp-header button{width:32px;height:32px;border:none;background:var(--bg);border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text)}
.dp-header button:active{background:var(--border)}
.dp-header button i{width:18px;height:18px}
.dp-header span{font-size:15px;font-weight:600}
.dp-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.dp-weekdays span{text-align:center;font-size:11px;font-weight:600;color:var(--text2);padding:4px 0;text-transform:uppercase}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:14px;border-radius:8px;cursor:pointer;transition:all .15s;font-weight:500}
.dp-cell:active{transform:scale(.9)}
.dp-cell.empty{cursor:default}
.dp-cell.today{background:var(--primary-light);color:var(--primary);font-weight:700}
.dp-cell.selected{background:var(--primary);color:#fff;font-weight:700}
.dp-time{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.dp-time label{font-size:13px;font-weight:600;color:var(--text2)}
.dp-time input{width:auto;flex:1;padding:8px;font-size:15px}
.dp-confirm{width:100%;margin-top:10px;padding:10px;background:var(--primary);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.dp-confirm:active{background:var(--primary-dark)}
.dp-confirm i{width:16px;height:16px}

/* List Picker */
.list-picker{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.list-btn{flex-shrink:0;padding:8px 14px;border:2px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text2);font-size:13px;font-weight:600;cursor:pointer;text-align:center;transition:all .2s;white-space:nowrap}
.list-btn.active{border-color:var(--primary);background:var(--primary-light);color:var(--primary)}

/* Priority Picker */
.priority-picker{display:flex;gap:6px}
.prio-btn{flex:1;padding:8px;border:2px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text2);font-size:13px;font-weight:600;cursor:pointer;text-align:center;transition:all .2s}
.prio-btn.active{border-color:var(--primary);background:var(--primary-light);color:var(--primary)}
.prio-btn.p1.active{border-color:var(--danger);background:rgba(235,90,70,.1);color:var(--danger)}
.prio-btn.p2.active{border-color:#ff9f1a;background:rgba(255,159,26,.1);color:#ff9f1a}
.prio-btn.p3.active{border-color:var(--primary);background:var(--primary-light);color:var(--primary)}

/* Subtasks */
.subtasks-list{margin-bottom:8px}
.subtask-item{display:flex;align-items:center;gap:8px;padding:8px 4px;border-bottom:1px solid var(--border);animation:fadeIn .2s ease}
.subtask-item.done .subtask-title{text-decoration:line-through;color:var(--text2)}
.subtask-check{width:22px;height:22px;border:2px solid var(--border);border-radius:4px;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:transparent;transition:all .2s;padding:0}
.subtask-check.checked{background:var(--success);border-color:var(--success);color:#fff}
.subtask-check i{width:12px;height:12px}
.subtask-title{flex:1;font-size:14px;min-width:0;word-break:break-word}
.subtask-delete{width:24px;height:24px;border:none;background:none;color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:4px;opacity:.5;flex-shrink:0;padding:0}
.subtask-delete:active{opacity:1;background:rgba(235,90,70,.1);color:var(--danger)}
.subtask-delete i{width:14px;height:14px}
.subtask-add-row{display:flex;gap:6px;align-items:center}
.subtask-add-row input{flex:1;padding:8px;border:1px dashed var(--border);border-radius:6px;font-size:14px;background:transparent;color:var(--text);outline:none}
.subtask-add-row input:focus{border-color:var(--primary);border-style:solid}
.subtask-add-btn{width:32px;height:32px;border:none;background:var(--primary);color:#fff;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.subtask-add-btn i{width:16px;height:16px}

/* Photos */
.photo-grid{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.photo-thumb{position:relative;width:72px;height:72px;border-radius:8px;overflow:hidden;border:2px solid var(--border)}
.photo-thumb img{width:100%;height:100%;object-fit:cover;cursor:pointer}
.photo-remove-btn{position:absolute;top:2px;right:2px;width:22px;height:22px;border:none;background:rgba(0,0,0,.6);color:#fff;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.photo-remove-btn i{width:12px;height:12px}
.photo-add-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--bg);border:2px dashed var(--border);border-radius:8px;color:var(--text2);font-size:14px;font-weight:500;cursor:pointer;width:100%;justify-content:center;transition:border-color .2s}
.photo-add-btn:active{border-color:var(--primary);color:var(--primary)}
.photo-add-btn i{width:18px;height:18px}

/* Photo Lightbox */
.photo-lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:2000;align-items:center;justify-content:center;padding:20px}
.photo-lightbox.show{display:flex}
.photo-lightbox img{max-width:100%;max-height:90vh;border-radius:8px;object-fit:contain}
.lightbox-close{position:absolute;top:20px;right:20px;width:40px;height:40px;border:none;background:rgba(255,255,255,.15);color:#fff;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lightbox-close i{width:24px;height:24px}

/* Alarm Overlay */
.alarm-overlay{display:none;position:fixed;inset:0;background:linear-gradient(135deg,#1a1a2e,#16213e);z-index:3000;align-items:center;justify-content:center;flex-direction:column}
.alarm-overlay.show{display:flex}
.alarm-content{text-align:center;color:#fff;padding:40px 24px;max-width:360px}
.alarm-icon{margin-bottom:24px;animation:alarm-pulse 1s ease-in-out infinite}
.alarm-icon i{width:80px;height:80px;color:#ffd93d}
@keyframes alarm-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.8}}
.alarm-title{font-size:24px;font-weight:700;margin-bottom:12px;line-height:1.3;word-break:break-word}
.alarm-time{font-size:16px;opacity:.7;margin-bottom:32px}
.alarm-actions{display:flex;gap:12px;margin-bottom:20px}
.alarm-btn{flex:1;padding:14px 16px;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s}
.alarm-btn:active{transform:scale(.95)}
.alarm-snooze{background:rgba(255,255,255,.15);color:#fff}
.alarm-done{background:var(--success);color:#fff}
.alarm-btn i{width:20px;height:20px}
.alarm-dismiss{background:none;border:none;color:rgba(255,255,255,.5);font-size:14px;cursor:pointer;padding:8px 16px;border-radius:8px}
.alarm-dismiss:active{color:#fff}

/* Calendar View */
.calendar-container{background:var(--card);border-radius:16px;width:100%;max-width:420px;max-height:90vh;overflow-y:auto;animation:slideUp .25s ease;padding:16px}
.calendar-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.calendar-header h2{flex:1;font-size:17px;text-align:center}
.calendar-header button{width:36px;height:36px;background:var(--bg);border:none;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text)}
.calendar-header button:active{background:var(--border)}
.calendar-header button i{width:20px;height:20px}
.calendar-actions-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.calendar-today-btn{padding:6px 14px;background:var(--primary);color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer}
.calendar-today-btn:active{background:var(--primary-dark)}
.calendar-close-btn{width:32px;height:32px;background:var(--bg);border:none;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text)}
.calendar-close-btn i{width:18px;height:18px}
.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.calendar-weekdays span{text-align:center;font-size:11px;font-weight:700;color:var(--text2);padding:6px 0;text-transform:uppercase}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:16px}
.calendar-cell{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:10px;cursor:pointer;transition:all .15s;gap:2px;position:relative}
.calendar-cell:active{transform:scale(.9)}
.calendar-cell.empty{cursor:default}
.calendar-cell.today{background:var(--primary-light)}
.calendar-cell.today .calendar-day-num{color:var(--primary);font-weight:700}
.calendar-cell.selected{background:var(--primary);color:#fff}
.calendar-cell.selected .calendar-day-num{color:#fff}
.calendar-cell.selected .calendar-dot{color:#fff;background:rgba(255,255,255,.3)}
.calendar-day-num{font-size:14px;font-weight:500}
.calendar-dot{font-size:9px;font-weight:700;background:var(--primary-light);color:var(--primary);padding:1px 5px;border-radius:6px;line-height:1.2}
.calendar-day-tasks h3{font-size:14px;font-weight:600;margin-bottom:10px;color:var(--text2);text-transform:capitalize}
.calendar-task-item{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--bg);border-radius:8px;margin-bottom:6px;font-size:14px;cursor:pointer;transition:background .15s}
.calendar-task-item:active{background:var(--border)}
.calendar-task-time{font-size:12px;font-weight:600;color:var(--text2);min-width:40px}
.calendar-no-tasks{text-align:center;padding:20px;color:var(--text2);font-size:14px}

/* Confirm Dialog */
.confirm-box{background:var(--card);border-radius:16px;width:100%;max-width:320px;padding:24px;text-align:center;animation:slideUp .25s ease}
.confirm-icon{margin-bottom:12px;color:var(--danger)}
.confirm-icon i{width:40px;height:40px}
.confirm-title{font-size:17px;font-weight:600;margin-bottom:8px}
.confirm-text{font-size:14px;color:var(--text2);margin-bottom:20px;line-height:1.4}
.confirm-actions{display:flex;gap:10px}
.confirm-btn{flex:1;padding:12px;border:2px solid var(--border);border-radius:10px;font-size:15px;font-weight:600;background:var(--bg);color:var(--text);cursor:pointer;transition:all .2s}
.confirm-btn:active{opacity:.8}
.confirm-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.confirm-danger:active{background:#d04838}

/* Action Sheet */
.action-sheet-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1100;display:flex;align-items:flex-end;justify-content:center;padding:16px}
.action-sheet-overlay.show{display:flex}
.action-sheet-box{background:var(--card);border-radius:14px;width:100%;max-width:400px;padding:8px;animation:slideUp .25s ease}
.action-item{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;background:none;border:none;border-radius:10px;font-size:15px;color:var(--text);cursor:pointer;font-family:inherit}
.action-item:active{background:var(--bg)}
.action-item i{width:20px;height:20px;color:var(--text2)}
.action-item.danger{color:var(--danger)}
.action-item.danger i{color:var(--danger)}
.action-item.cancel{justify-content:center;color:var(--text2);font-weight:600;margin-top:4px;border-top:1px solid var(--border)}

/* Undo Bar */
.undo-bar{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(100px);background:#323232;color:#fff;padding:12px 16px;border-radius:12px;font-size:14px;display:flex;align-items:center;gap:16px;opacity:0;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:1500;box-shadow:0 6px 20px rgba(0,0,0,.3);max-width:calc(100% - 32px);white-space:nowrap}
.undo-bar.show{transform:translateX(-50%) translateY(0);opacity:1}
.undo-bar button{background:none;border:none;color:var(--primary);font-size:14px;font-weight:700;cursor:pointer;padding:4px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.5px}
.undo-bar button:active{background:rgba(255,255,255,.1)}
[data-theme="dark"] .undo-bar{background:#2a2b36}

/* Toast */
.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(100px);background:#323232;color:#fff;padding:12px 24px;border-radius:25px;font-size:14px;opacity:0;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:2000;box-shadow:0 4px 12px rgba(0,0,0,.3);max-width:calc(100% - 40px);text-align:center;white-space:nowrap}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast.error{background:var(--danger)}
.toast.success{background:var(--success)}
[data-theme="dark"] .toast{background:#2a2b36}

/* Time Range (от-до) */
.time-range-mobile{margin-bottom:4px}
.time-range-row-mobile{display:flex;align-items:center;gap:8px}
.time-field-mobile{display:flex;align-items:center;gap:6px;flex:1}
.time-field-mobile span{font-size:13px;color:var(--text2);font-weight:600;white-space:nowrap}
.time-field-mobile input[type="time"]{flex:1;padding:9px;border:2px solid var(--border);border-radius:8px;font-size:15px;background:var(--bg);color:var(--text);outline:none;min-width:0}
.time-field-mobile input[type="time"]:focus{border-color:var(--primary)}
.time-dash-mobile{color:var(--text2);font-size:16px;flex-shrink:0}
.time-clear-btn-mobile{width:32px;height:32px;border:none;background:var(--border);border-radius:50%;color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0}
.time-clear-btn-mobile i{width:14px;height:14px}
.time-range-hint{font-size:12px;color:var(--text2);margin-top:4px;padding-left:2px}
.time-range-meta{color:var(--primary)!important;font-weight:600}

/* Calendar View Toggle */
.calendar-view-toggle{display:flex;gap:4px;padding:8px 0;justify-content:center}
.cal-toggle-btn{padding:6px 16px;border:2px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text2);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.cal-toggle-btn.active{border-color:var(--primary);background:var(--primary-light);color:var(--primary)}

/* Calendar Timeline */
.cal-tl-grid{margin-top:8px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.cal-tl-hour{position:absolute;left:0;right:0;height:0}
.cal-tl-hour-label{position:absolute;left:0;top:-8px;font-size:11px;font-weight:600;color:var(--text2);width:42px;text-align:right}
.cal-tl-hour-line{position:absolute;left:48px;right:0;top:0;height:1px;background:var(--border)}
.cal-tl-now{position:absolute;left:48px;right:0;height:2px;background:var(--danger);z-index:5;border-radius:1px}
.cal-tl-now::before{content:'';position:absolute;left:-4px;top:-3px;width:8px;height:8px;background:var(--danger);border-radius:50%}
.cal-tl-block{position:absolute;left:52px;right:8px;border-radius:8px;padding:6px 10px;color:#fff;cursor:pointer;overflow:hidden;z-index:2;display:flex;flex-direction:column;gap:2px;transition:opacity .2s;min-height:24px}
.cal-tl-block:active{opacity:.8!important}
.cal-tl-block-time{font-size:11px;font-weight:600;opacity:.9}
.cal-tl-block-title{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-tl-unsched{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.cal-tl-unsched h4{font-size:12px;font-weight:600;color:var(--text2);margin-bottom:8px;text-transform:uppercase;letter-spacing:.3px}
.cal-tl-unsched-item{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg);border-radius:8px;margin-bottom:6px;font-size:14px;cursor:pointer;transition:background .15s}
.cal-tl-unsched-item:active{background:var(--border)}
.cal-tl-unsched-time{font-size:12px;font-weight:600;color:var(--text2);min-width:40px}

/* Empty State */
.empty-state{text-align:center;padding:60px 20px;color:var(--text2)}
.empty-state i{width:56px;height:56px;margin-bottom:16px;opacity:.4}
.empty-state h3{font-size:17px;margin-bottom:8px;color:var(--text)}
.empty-state p{font-size:14px;margin-bottom:4px;line-height:1.4}

/* Safe Area */
@supports(padding-top:env(safe-area-inset-top)){
    .app-header{padding-top:calc(12px + env(safe-area-inset-top))}
    .bottom-nav{padding-bottom:env(safe-area-inset-bottom)}
    .offline-badge{padding-top:calc(8px + env(safe-area-inset-top))}
}