:root {
            --primary: #ef4444; 
            --primary-dark: #b91c1c;
            --primary-glow: rgba(239, 68, 68, 0.5);
            --bg: #0b1121; 
            --glass: rgba(30, 41, 59, 0.7); 
            --glass-hover: rgba(51, 65, 85, 0.8);
            --border: rgba(255, 255, 255, 0.15); 
            --text-main: #f1f5f9;
            --text-light: #94a3b8;
            --success: #10b981;
            --warning: #f59e0b;
            --cyan: #06b6d4;
            --glass-blur: blur(20px);
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }

        body {
            background-color: var(--bg);
            color: var(--text-main);
            min-height: 100vh;
            overflow-x: hidden;
            background-image: 
                radial-gradient(circle at 15% 50%, rgba(220, 38, 38, 0.08) 0%, transparent 40%),
                radial-gradient(circle at 85% 30%, rgba(59, 130, 246, 0.08) 0%, transparent 40%);
        }

        .geo-bg { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
        .orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0; animation: orb-in 1.4s var(--ease-out) forwards, orb-drift var(--dur, 18s) ease-in-out infinite; will-change: transform, opacity; }
        .orb-1 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(239,68,68,0.12), transparent 70%); top: -10%; left: -8%; --dur: 20s; animation-delay: 0s, 1.4s; }
        .orb-2 { width: 700px; height: 700px; background: radial-gradient(circle, rgba(37,99,235,0.09), transparent 70%); bottom: -15%; right: -8%; --dur: 24s; animation-delay: 0.3s, 1.7s; }
        .orb-3 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(245,158,11,0.07), transparent 70%); top: 30%; left: 40%; --dur: 28s; animation-delay: 0.6s, 2s; }
        @keyframes orb-in  { to { opacity: 1; } }
        @keyframes orb-drift { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(50px,-40px) scale(1.05); } 66% { transform: translate(-30px,45px) scale(0.95); } }
        .grid-lines { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 60px 60px; animation: grid-in 2s ease forwards; opacity: 0; }
        @keyframes grid-in { to { opacity: 1; } }
        .scan-line { position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(239,68,68,0.35), transparent); animation: scan 10s linear infinite; top: 0; opacity: 0.5; }
        @keyframes scan { 0% { top: -2px; } 100% { top: 100vh; } }
        .particles { position: absolute; inset: 0; }
        .particle { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--primary); opacity: 0; animation: float-up var(--dur, 12s) var(--delay, 0s) linear infinite; will-change: transform, opacity; }
        .particle:nth-child(odd) { background: rgba(245,158,11,0.7); }
        .particle:nth-child(3n) { width: 3px; height: 3px; }
        @keyframes float-up { 0% { transform: translateY(100vh) translateX(0); opacity: 0; } 5% { opacity: 0.6; } 95% { opacity: 0.3; } 100% { transform: translateY(-20px) translateX(var(--drift, 40px)); opacity: 0; } }

        .checkbox-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--warning); cursor: pointer; flex-shrink: 0; margin: 0; }

        @keyframes slide-up   { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes slide-in-x { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
        @keyframes fade-in    { from { opacity: 0; } to { opacity: 1; } }
        @keyframes count-up   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        .anim-navbar { animation: slide-up 0.6s 0.1s var(--ease-out) both; }
        .anim-c1 { animation: slide-up 0.6s 0.25s var(--ease-out) both; }
        .anim-c2 { animation: slide-up 0.6s 0.4s var(--ease-out) both; }
        .anim-c3 { animation: slide-up 0.6s 0.55s var(--ease-out) both; }
        .anim-c4 { animation: slide-up 0.6s 0.7s var(--ease-out) both; }

        .brand { display: flex; align-items: center; gap: 14px; opacity: 0; transform: translateX(-20px); animation: slide-in-x 0.7s 0.3s var(--ease-out) forwards; text-decoration: none; }
        .brand-icon { width: 48px; height: 48px; flex-shrink: 0; background: linear-gradient(135deg, var(--primary), #f97316); border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: white; box-shadow: 0 8px 24px rgba(239,68,68,0.4), 0 0 0 1px rgba(255,255,255,0.08); position: relative; overflow: hidden; }
        .brand-icon::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.28) 50%, transparent 70%); transform: translateX(-100%); animation: brand-shimmer 3s 1s ease infinite; }
        @keyframes brand-shimmer { to { transform: translateX(200%); } }
        .brand-icon::before { content: ''; position: absolute; inset: -3px; border-radius: 16px; background: transparent; box-shadow: 0 0 0 0 rgba(239,68,68,0.5); animation: brand-pulse 3s 2s ease-in-out infinite; }
        @keyframes brand-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); } 50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); } }
        .brand-text h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; background: linear-gradient(to right, #fff, #cbd5e1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.1; margin-bottom: 2px; }
        .brand-text p { font-size: 11px; color: rgba(255,255,255,0.4); letter-spacing: 1.2px; text-transform: uppercase; }

        .navbar { background: rgba(15, 23, 42, 0.85); backdrop-filter: var(--glass-blur); height: 80px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; box-shadow: 0 4px 20px rgba(0,0,0,0.4); }
        .navbar::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(239,68,68,0.4), transparent); animation: nav-glow 4s ease-in-out infinite; }
        @keyframes nav-glow { 0%,100% { opacity: 0.3; transform: scaleX(0.5); } 50% { opacity: 1; transform: scaleX(1); } }

        .nav-toggle-group { display: flex; gap: 8px; background: rgba(255,255,255,0.05); padding: 6px; border-radius: 12px; border: 1px solid var(--border); }
        .tab-btn { padding: 10px 24px; border: none; background: transparent; font-weight: 500; color: var(--text-light); cursor: pointer; border-radius: 8px; transition: var(--transition); font-size: 14px; position: relative; overflow: hidden; }
        .tab-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%); transform: translateX(-100%); transition: transform 0.4s ease; }
        .tab-btn:hover::before { transform: translateX(200%); }
        .tab-btn:hover { color: white; background: rgba(255,255,255,0.05); }
        .tab-btn.active { background: rgba(255,255,255,0.15); color: white; font-weight: 700; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }

        .sync-container { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.3); padding: 8px 16px; border-radius: 20px; border: 1px solid var(--border); margin-right: 20px; transition: var(--transition); }
        .sync-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 10px currentColor; transition: var(--transition); }
        .sync-text { font-size: 12px; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px; }
        .sync-dot.active { background: var(--success); color: var(--success); box-shadow: 0 0 12px var(--success); }
        .sync-dot.error { background: var(--primary); color: var(--primary); box-shadow: 0 0 12px var(--primary); }
        .sync-dot.loading { background: var(--warning); color: var(--warning); animation: pulse 1s infinite; }
        @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }

        .sync-timestamp { font-size: 11px; color: rgba(255,255,255,0.35); margin-left: 4px; }

        .session-timer { font-family: 'Courier New', monospace; font-weight: 700; color: var(--warning); background: rgba(245, 158, 11, 0.1); padding: 8px 16px; border-radius: 12px; border: 1px solid rgba(245, 158, 11, 0.3); font-size: 15px; margin-right: 15px; display: flex; align-items: center; gap: 8px; }

        .nav-icon-btn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); position: relative; overflow: hidden; }
        .nav-icon-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent); transform: scale(0); border-radius: 50%; transition: transform 0.3s; }
        .nav-icon-btn:hover::before { transform: scale(2); }
        .nav-icon-btn.search-btn { background: rgba(255,255,255,0.1); }
        .nav-icon-btn.search-btn:hover { background: rgba(255,255,255,0.2); transform: scale(1.1); }
        .nav-icon-btn.sync-btn { background: rgba(255,255,255,0.1); }
        .nav-icon-btn.sync-btn:hover { background: rgba(255,255,255,0.2); transform: rotate(180deg) scale(1.1); }
        .nav-icon-btn.logout-btn { background: rgba(239,68,68,0.2); border-color: rgba(239,68,68,0.5); color: #fca5a5; }
        .nav-icon-btn.logout-btn:hover { background: var(--primary); color: white; transform: scale(1.1); }

        .stats-bar {
            display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
            margin-bottom: 30px; animation: slide-up 0.6s 0.2s var(--ease-out) both;
        }
        .stat-card {
            background: var(--glass); border: 1px solid var(--border);
            border-radius: 16px; padding: 20px 24px;
            backdrop-filter: blur(12px); position: relative; overflow: hidden;
            transition: var(--transition); cursor: default;
        }
        .stat-card::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
            background: var(--stat-color, var(--primary));
            box-shadow: 0 0 10px var(--stat-color, var(--primary));
        }
        .stat-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.3); }
        .stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-light); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
        .stat-label i { color: var(--stat-color, var(--primary)); }
        .stat-value { font-size: 32px; font-weight: 800; color: white; line-height: 1; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
        .stat-sub { font-size: 12px; color: var(--text-light); }
        .stat-card.total  { --stat-color: var(--primary); }
        .stat-card.today  { --stat-color: var(--success); }
        .stat-card.month  { --stat-color: var(--cyan); }
        .stat-card.top    { --stat-color: var(--warning); }

        .recent-feed {
            background: var(--glass); border: 1px solid var(--border);
            border-radius: 16px; backdrop-filter: blur(12px);
            margin-bottom: 30px; overflow: hidden;
            animation: slide-up 0.6s 0.3s var(--ease-out) both;
        }
        .feed-header {
            padding: 16px 24px; border-bottom: 1px solid var(--border);
            display: flex; align-items: center; justify-content: space-between;
            background: rgba(0,0,0,0.2);
        }
        .feed-title { font-size: 13px; font-weight: 700; color: white; display: flex; align-items: center; gap: 8px; }
        .feed-title i { color: var(--cyan); }
        .feed-list { padding: 8px 0; }
        .feed-item {
            display: flex; align-items: center; gap: 14px;
            padding: 10px 24px; transition: var(--transition); cursor: pointer;
            border-left: 3px solid transparent;
        }
        .feed-item:hover { background: rgba(255,255,255,0.04); border-left-color: var(--primary); }
        .feed-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--success); box-shadow: 0 0 6px var(--success); }
        .feed-info { flex: 1; min-width: 0; }
        .feed-id { font-size: 12px; font-weight: 700; color: var(--primary); font-family: 'Courier New', monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .feed-meta { font-size: 11px; color: var(--text-light); margin-top: 2px; }
        .feed-time { font-size: 11px; color: var(--text-light); flex-shrink: 0; white-space: nowrap; }
        .feed-deed-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 5px; flex-shrink: 0; }
        .feed-actions { display: flex; gap: 6px; flex-shrink: 0; }
        .feed-btn { padding: 5px 10px; font-size: 11px; font-weight: 600; border-radius: 6px; border: 1px solid var(--border); background: rgba(255,255,255,0.05); color: var(--text-light); cursor: pointer; display: flex; align-items: center; gap: 5px; transition: var(--transition); text-decoration: none; white-space: nowrap; }
        .feed-btn:hover { background: white; color: var(--bg); transform: translateY(-1px); }
        .feed-btn.edit:hover { background: var(--primary); color: white; border-color: var(--primary); }
        .feed-btn.print:hover { background: var(--success); color: white; border-color: var(--success); }

        .modal-overlay {
            position: fixed; inset: 0; z-index: 9998;
            background: rgba(0,0,0,0.7); backdrop-filter: blur(8px);
            display: flex; align-items: center; justify-content: center;
            opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
        }
        .modal-overlay.open { opacity: 1; pointer-events: all; }
        .modal-box {
            background: #0f172a; border: 1px solid var(--border);
            border-radius: 20px; padding: 28px 30px; width: 500px; max-width: 95vw;
            box-shadow: 0 30px 80px rgba(0,0,0,0.7);
            transform: translateY(30px) scale(0.97);
            transition: transform 0.3s var(--ease-out);
            position: relative;
        }
        .modal-overlay.open .modal-box { transform: translateY(0) scale(1); }

        .modal-steps {
            display: flex; align-items: center; gap: 0;
            margin-bottom: 24px; position: relative;
        }
        .modal-step {
            display: flex; flex-direction: column; align-items: center; gap: 6px;
            flex: 1; position: relative; z-index: 1;
        }
        .modal-step-circle {
            width: 36px; height: 36px; border-radius: 50%;
            border: 2px solid rgba(255,255,255,0.15);
            background: rgba(255,255,255,0.05);
            display: flex; align-items: center; justify-content: center;
            font-size: 13px; font-weight: 700; color: var(--text-light);
            transition: all 0.35s var(--ease-out);
        }
        .modal-step.active .modal-step-circle {
            border-color: var(--primary); background: var(--primary);
            color: white; box-shadow: 0 0 0 4px rgba(239,68,68,0.2);
        }
        .modal-step.done .modal-step-circle {
            border-color: var(--success); background: var(--success); color: white;
        }
        .modal-step-label {
            font-size: 11px; font-weight: 600; color: var(--text-light);
            text-align: center; white-space: nowrap;
            transition: color 0.3s;
        }
        .modal-step.active .modal-step-label { color: white; }
        .modal-step.done  .modal-step-label { color: var(--success); }
        .modal-step-line {
            flex: 1; height: 2px; background: rgba(255,255,255,0.1);
            margin-bottom: 18px; position: relative; overflow: hidden;
        }
        .modal-step-line-fill {
            position: absolute; left: 0; top: 0; height: 100%;
            background: var(--success); width: 0%;
            transition: width 0.4s ease;
        }
        .modal-step-line.filled .modal-step-line-fill { width: 100%; }

        .modal-step-panel { display: none; animation: modalStepIn 0.3s var(--ease-out); }
        .modal-step-panel.active { display: block; }
        @keyframes modalStepIn {
            from { opacity: 0; transform: translateX(18px); }
            to   { opacity: 1; transform: translateX(0); }
        }

        .modal-confirm-box {
            background: rgba(239,68,68,0.07); border: 1px solid rgba(239,68,68,0.25);
            border-radius: 14px; padding: 18px 20px; margin-bottom: 16px;
        }
        .modal-confirm-deed {
            font-size: 20px; font-weight: 800; color: white; margin-bottom: 6px;
            display: flex; align-items: center; gap: 10px;
        }
        .modal-confirm-deed i { color: var(--primary); font-size: 18px; }
        .modal-confirm-tamil { font-size: 13px; color: var(--text-light); margin-bottom: 12px; }
        .modal-confirm-meta {
            display: flex; gap: 10px; flex-wrap: wrap;
        }
        .modal-confirm-tag {
            font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px;
            background: rgba(255,255,255,0.07); color: var(--text-light);
            border: 1px solid rgba(255,255,255,0.1);
            display: flex; align-items: center; gap: 5px;
        }
        .modal-confirm-tag i { font-size: 10px; }
        .modal-back-btn {
            background: none; border: 1px solid var(--border); color: var(--text-light);
            border-radius: 10px; padding: 12px 18px; font-size: 14px; font-weight: 600;
            cursor: pointer; transition: var(--transition); display: flex; align-items: center; gap: 8px;
        }
        .modal-back-btn:hover { background: rgba(255,255,255,0.07); color: white; }

        .modal-title {
            font-size: 18px; font-weight: 800; color: white;
            margin-bottom: 6px; display: flex; align-items: center; gap: 10px;
        }
        .modal-title i { color: var(--primary); }
        .modal-sub { font-size: 13px; color: var(--text-light); margin-bottom: 16px; }
        .modal-search-wrap { position: relative; margin-bottom: 12px; }
        .modal-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-light); font-size: 14px; }
        .modal-search-input {
            width: 100%; padding: 12px 14px 12px 40px;
            background: rgba(0,0,0,0.4); border: 1px solid var(--border);
            border-radius: 10px; color: white; font-size: 14px; outline: none;
            transition: var(--transition);
        }
        .modal-search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(239,68,68,0.15); }
        .modal-deed-list {
            max-height: 260px; overflow-y: auto; border: 1px solid var(--border);
            border-radius: 10px; background: rgba(0,0,0,0.3);
        }
        .modal-deed-list::-webkit-scrollbar { width: 5px; }
        .modal-deed-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 5px; }
        .modal-deed-item {
            display: flex; align-items: center; gap: 12px;
            padding: 10px 14px; cursor: pointer; transition: var(--transition);
            border-bottom: 1px solid rgba(255,255,255,0.04);
        }
        .modal-deed-item:last-child { border-bottom: none; }
        .modal-deed-item:hover, .modal-deed-item.selected { background: rgba(239,68,68,0.12); }
        .modal-deed-item.selected { border-left: 3px solid var(--primary); }
        .modal-deed-num { font-size: 11px; font-weight: 700; color: var(--text-light); width: 22px; flex-shrink: 0; font-family: monospace; }
        .modal-deed-name { font-size: 13px; font-weight: 600; color: white; }
        .modal-deed-tamil { font-size: 11px; color: var(--text-light); margin-top: 1px; }
        .modal-actions { display: flex; gap: 10px; margin-top: 18px; }
        .modal-btn-cancel { flex: 1; padding: 12px; border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,0.05); color: var(--text-light); font-size: 14px; font-weight: 600; cursor: pointer; transition: var(--transition); }
        .modal-btn-cancel:hover { background: rgba(255,255,255,0.1); color: white; }
        .modal-btn-create {
            flex: 2; padding: 12px; border-radius: 10px; border: none;
            background: linear-gradient(135deg, var(--primary), #991b1b);
            color: white; font-size: 14px; font-weight: 700; cursor: pointer;
            transition: var(--transition); display: flex; align-items: center; justify-content: center; gap: 8px;
            box-shadow: 0 4px 15px var(--primary-glow);
        }
        .modal-btn-create:hover { filter: brightness(1.1); transform: translateY(-2px); }
        .modal-btn-create:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
        .modal-btn-next {
            flex: 2; padding: 12px; border-radius: 10px; border: none;
            background: linear-gradient(135deg, #3b82f6, #1d4ed8);
            color: white; font-size: 14px; font-weight: 700; cursor: pointer;
            transition: var(--transition); display: flex; align-items: center; justify-content: center; gap: 8px;
        }
        .modal-btn-next:hover { filter: brightness(1.1); transform: translateY(-2px); }
        .modal-btn-next:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
        .modal-close { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: rgba(255,255,255,0.05); color: var(--text-light); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; transition: var(--transition); }
        .modal-close:hover { background: var(--primary); color: white; border-color: var(--primary); }

        .kbd-hint {
            position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
            background: rgba(15,23,42,0.95); border: 1px solid var(--border);
            border-radius: 30px; padding: 10px 20px;
            display: flex; gap: 16px; align-items: center;
            font-size: 11px; color: var(--text-light);
            opacity: 0; animation: fade-in 0.5s 2s ease forwards;
            backdrop-filter: blur(20px); z-index: 50;
            box-shadow: 0 8px 30px rgba(0,0,0,0.4);
            pointer-events: none;
        }
        .kbd-hint-item { display: flex; align-items: center; gap: 5px; }
        kbd { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; padding: 2px 6px; font-family: monospace; font-size: 10px; color: white; }

        .search-panel-wrapper { display: none; animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1); margin-bottom: 30px; width: 100%; }
        @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
        .search-glass { background: rgba(30, 41, 59, 0.95); backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: 20px; padding: 25px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); }
        .search-container { display: flex; align-items: center; gap: 15px; position: relative; flex-wrap: wrap; }
        .search-icon { position: absolute; left: 20px; color: var(--text-light); font-size: 18px; z-index: 2; }
        .search-input { flex: 1; min-width: 200px; padding: 16px 24px 16px 50px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; font-size: 16px; color: white; background: rgba(0, 0, 0, 0.3); outline: none; transition: var(--transition); }
        .search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); }
        .search-deed-filter { padding: 16px 18px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; font-size: 14px; color: white; background: rgba(0, 0, 0, 0.3); outline: none; cursor: pointer; min-width: 200px; transition: var(--transition); }
        .search-deed-filter:focus { border-color: var(--primary); }
        .search-deed-filter option { background: #0f172a; }
        .search-actions { display: flex; gap: 10px; }
        .search-clear-btn { width: 54px; height: 54px; border-radius: 12px; background: rgba(239, 68, 68, 0.2); border: 1px solid rgba(239, 68, 68, 0.3); color: #fca5a5; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); }
        .search-clear-btn:hover { background: var(--primary); color: white; transform: rotate(90deg); }
        .search-results-container { margin-top: 20px; display: none; }
        .results-grid { display: grid; grid-template-columns: 1fr; gap: 15px; max-height: 400px; overflow-y: auto; }
        .search-result-card { background: rgba(30, 41, 59, 0.9); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 15px 20px; transition: var(--transition); display: flex; justify-content: space-between; align-items: center; }
        .search-result-card:hover { border-color: var(--primary); transform: translateX(5px); background: rgba(30,41,59,1); }
        .highlight { background: rgba(239, 68, 68, 0.3); color: white; padding: 0 2px; border-radius: 2px; }
        .sr-actions { display: flex; gap: 8px; flex-shrink: 0; }
        .sr-btn { padding: 6px 12px; font-size: 12px; border-radius: 6px; border: 1px solid var(--border); background: rgba(255,255,255,0.05); color: var(--text-light); cursor: pointer; text-decoration: none; display: flex; align-items: center; gap: 6px; transition: var(--transition); }
        .sr-btn:hover { background: white; color: var(--bg); transform: translateY(-2px); }

        .container { max-width: 95%; margin: 40px auto; padding: 0 20px; position: relative; z-index: 1; }
        .glass-card { background: var(--glass); border-radius: 20px; border: 1px solid var(--border); backdrop-filter: blur(12px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); transition: box-shadow 0.3s, border-color 0.3s; }
        .glass-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(239,68,68,0.08); }

        .create-card { display: flex; align-items: center; justify-content: space-between; padding: 30px 30px 30px 40px; margin-bottom: 24px; background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.9)); position: relative; overflow: hidden; }
        .create-card::before { content: ''; position: absolute; top: -80%; right: -20%; width: 400px; height: 400px; background: conic-gradient(from 0deg, transparent 70%, rgba(239,68,68,0.06) 80%, transparent 90%); animation: spin-slow 25s linear infinite; border-radius: 50%; pointer-events: none; }
        @keyframes spin-slow { to { transform: rotate(360deg); } }
        .create-title h2 { font-size: 26px; font-weight: 700; margin-bottom: 8px; color: white; }
        .create-title p { font-size: 15px; color: var(--text-light); }
        .create-actions { display: flex; gap: 16px; align-items: center; width: 65%; justify-content: flex-end; flex-shrink: 0; }
        .doc-select { flex-grow: 1; max-width: 420px; padding: 18px 25px; border-radius: 12px; border: 1px solid var(--border); background: rgba(0, 0, 0, 0.3); color: white; font-size: 16px; outline: none; cursor: pointer; transition: var(--transition); }
        .doc-select:hover, .doc-select:focus { border-color: var(--primary); background: rgba(0,0,0,0.5); }
        .doc-select option { background: #0f172a; padding: 10px; }
        .btn-new { background: linear-gradient(135deg, var(--primary), #991b1b); color: white; border: none; padding: 18px 30px; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 10px; white-space: nowrap; flex-shrink: 0; transition: var(--transition); box-shadow: 0 4px 15px var(--primary-glow); position: relative; overflow: hidden; }
        .btn-new::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%); transform: translateX(-100%); transition: transform 0.5s ease; }
        .btn-new:hover::before { transform: translateX(200%); }
        .btn-new:hover { transform: translateY(-3px); box-shadow: 0 8px 25px var(--primary-glow); filter: brightness(1.1); }

        .dash-grid { display: grid; grid-template-columns: 450px 1fr; gap: 40px; align-items: start; }

        .calendar-card { padding: 30px; }
        .cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
        .cal-header-left { display: flex; flex-direction: column; gap: 8px; }
        .cal-month-title { font-size: 20px; font-weight: 700; color: white; }
        .cal-selectors { display: flex; gap: 8px; }
        .cal-select { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); background: rgba(0,0,0,0.4); color: white; font-size: 13px; cursor: pointer; outline: none; transition: var(--transition); }
        .cal-select:focus { border-color: var(--primary); }
        .cal-select option { background: #0f172a; }
        .cal-nav-btns { display: flex; align-items: center; gap: 5px; }
        .cal-nav-btn { background: rgba(255,255,255,0.07); border: 1px solid var(--border); color: white; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); }
        .cal-nav-btn:hover { background: var(--primary); border-color: var(--primary); transform: scale(1.1); }

        .btn-today { background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.3); color: var(--success); font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: 8px; cursor: pointer; transition: var(--transition); white-space: nowrap; }
        .btn-today:hover { background: var(--success); color: white; transform: scale(1.05); }

        .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; text-align: center; }
        .cal-day-label { color: var(--text-light); font-weight: 600; font-size: 14px; margin-bottom: 10px; }
        .cal-date { height: 55px; display: flex; align-items: center; justify-content: center; border-radius: 12px; cursor: pointer; font-size: 16px; font-weight: 500; transition: var(--transition); position: relative; color: var(--text-light); border: 1px solid transparent; background: rgba(255,255,255,0.02); }
        .cal-date:hover { background: rgba(255,255,255,0.1); color: white; transform: scale(1.08); }
        .cal-date.selected { background: var(--primary); color: white; border-color: var(--primary); box-shadow: 0 0 20px var(--primary-glow); font-weight: 700; animation: selected-pulse 2s ease-in-out infinite; }
        @keyframes selected-pulse { 0%,100% { box-shadow: 0 0 20px var(--primary-glow); } 50% { box-shadow: 0 0 30px rgba(239,68,68,0.7); } }

        .cal-date.has-doc::after { content: ''; position: absolute; bottom: 8px; width: 6px; height: 6px; background: var(--success); border-radius: 50%; box-shadow: 0 0 8px var(--success); animation: dot-blink 2.5s ease-in-out infinite; }
        @keyframes dot-blink { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.7); } }

        .cal-date[data-count]::before {
            content: attr(data-count) ' doc(s)';
            position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
            background: rgba(15,23,42,0.95); border: 1px solid var(--border);
            color: white; font-size: 11px; font-weight: 600; padding: 4px 10px;
            border-radius: 6px; white-space: nowrap; pointer-events: none;
            opacity: 0; transition: opacity 0.2s; z-index: 20;
        }
        .cal-date[data-count]:hover::before { opacity: 1; }

        .day-header { margin-bottom: 25px; display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.2); padding: 15px 25px; border-radius: 12px; border: 1px solid var(--border); }
        .day-title { font-size: 28px; font-weight: 800; color: white; }
        .doc-count-badge { font-size: 14px; background: rgba(255,255,255,0.1); padding: 6px 15px; border-radius: 30px; color: var(--text-light); border: 1px solid var(--border); }

        .doc-list { display: flex; flex-direction: column; gap: 20px; }
        .doc-card { background: rgba(30, 41, 59, 0.6); border-radius: 16px; border: 1px solid var(--border); overflow: hidden; transition: var(--transition); position: relative; animation: slide-up 0.4s var(--ease-out) both; }
        .doc-card:nth-child(1) { animation-delay: 0.05s; } .doc-card:nth-child(2) { animation-delay: 0.1s; } .doc-card:nth-child(3) { animation-delay: 0.15s; } .doc-card:nth-child(4) { animation-delay: 0.2s; } .doc-card:nth-child(5) { animation-delay: 0.25s; }
        .doc-card:hover { transform: translateY(-5px); border-color: var(--primary); background: rgba(30, 41, 59, 0.9); box-shadow: 0 10px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(239,68,68,0.1); }
        .doc-top { padding: 18px 30px; border-bottom: 1px solid var(--border); background: rgba(0,0,0,0.3); display: flex; justify-content: space-between; align-items: flex-start; }
        .tp-badge { font-family: 'Courier New', monospace; font-weight: 700; color: var(--primary); font-size: 16px; letter-spacing: -0.5px; }

        .type-badge { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; padding: 6px 12px; border-radius: 8px; transition: var(--transition); display: inline-block; }
        .tbl-type   { font-size: 14px; font-weight: 700; padding: 5px 11px; border-radius: 8px; border: 1px solid; display: inline-block; letter-spacing: 0.5px; transition: var(--transition); }

        .deed-color-0  { color: #34d399; background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.3); }
        .deed-color-1  { color: #a78bfa; background: rgba(167,139,250,0.12); border-color: rgba(167,139,250,0.3); }
        .deed-color-2  { color: #60a5fa; background: rgba(96,165,250,0.12); border-color: rgba(96,165,250,0.3); }
        .deed-color-3  { color: #fb923c; background: rgba(251,146,60,0.12); border-color: rgba(251,146,60,0.3); }
        .deed-color-4  { color: #c084fc; background: rgba(192,132,252,0.12); border-color: rgba(192,132,252,0.3); }
        .deed-color-5  { color: #f472b6; background: rgba(244,114,182,0.12); border-color: rgba(244,114,182,0.3); }
        .deed-color-6  { color: #38bdf8; background: rgba(56,189,248,0.12); border-color: rgba(56,189,248,0.3); }
        .deed-color-7  { color: #4ade80; background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.3); }
        .deed-color-8  { color: #fbbf24; background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.3); }
        .deed-color-9  { color: #94a3b8; background: rgba(148,163,184,0.12); border-color: rgba(148,163,184,0.3); }
        .deed-color-10 { color: #f87171; background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.3); }
        .deed-color-11 { color: #2dd4bf; background: rgba(45,212,191,0.12); border-color: rgba(45,212,191,0.3); }
        .deed-color-12 { color: #818cf8; background: rgba(129,140,248,0.12); border-color: rgba(129,140,248,0.3); }
        .deed-color-13 { color: #e879f9; background: rgba(232,121,249,0.12); border-color: rgba(232,121,249,0.3); }
        .deed-color-14 { color: #a3e635; background: rgba(163,230,53,0.12); border-color: rgba(163,230,53,0.3); }
        .deed-color-15 { color: #67e8f9; background: rgba(103,232,249,0.12); border-color: rgba(103,232,249,0.3); }

        .parties-split { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); }
        .party-box { padding: 25px 30px; }
        .party-box.buyer { border-right: 1px solid var(--border); background: linear-gradient(to right, rgba(16, 185, 129, 0.05), transparent); }
        .party-box.seller { background: linear-gradient(to left, rgba(245, 158, 11, 0.05), transparent); }
        .p-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 10px; display: block; }
        .p-label.b { color: var(--success); } .p-label.s { color: var(--warning); }
        .p-name { font-size: 18px; font-weight: 600; color: white; display: block; }
        .doc-actions { padding: 15px 30px; display: flex; justify-content: flex-end; gap: 12px; background: rgba(0,0,0,0.2); }
        .act-btn { font-size: 13px; padding: 10px 18px; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; background: rgba(255,255,255,0.05); color: white; transition: var(--transition); display: flex; align-items: center; gap: 8px; font-weight: 500; position: relative; overflow: hidden; }
        .act-btn::before { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.06); transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease; }
        .act-btn:hover::before { transform: scaleX(1); }
        .act-btn:hover { background: white; color: var(--bg); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
        .act-btn.del:hover { background: var(--primary); color: white; border-color: var(--primary); }

        .undo-toast {
            position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px);
            background: #1e293b; border: 1px solid var(--border);
            border-radius: 14px; padding: 14px 20px;
            display: flex; align-items: center; gap: 14px;
            font-size: 13px; box-shadow: 0 16px 40px rgba(0,0,0,0.6);
            transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
            z-index: 9999; min-width: 340px;
        }
        .undo-toast.show { transform: translateX(-50%) translateY(0); }
        .undo-toast-msg { flex: 1; color: white; font-weight: 600; }
        .undo-toast-sub { font-size: 11px; color: var(--text-light); font-weight: 400; display: block; margin-top: 2px; }
        .undo-btn { background: var(--primary); color: white; border: none; padding: 8px 18px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; transition: var(--transition); white-space: nowrap; }
        .undo-btn:hover { filter: brightness(1.2); transform: scale(1.05); }
        .undo-progress { position: absolute; bottom: 0; left: 0; height: 3px; background: var(--primary); border-radius: 0 0 14px 14px; transition: width linear; }

        .table-wrapper { padding: 0; }
        .filter-bar { display: flex; flex-wrap: wrap; gap: 12px; padding: 20px 25px; border-bottom: 1px solid var(--border); background: rgba(0,0,0,0.2); border-radius: 20px 20px 0 0; align-items: center; }
        .filter-label { font-size: 12px; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; }
        .filter-input { padding: 10px 15px; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; font-size: 13px; color: white; background: rgba(0,0,0,0.3); outline: none; transition: var(--transition); min-width: 130px; }
        .filter-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(239,68,68,0.15); transform: translateY(-1px); }
        .filter-input option { background: #0f172a; }
        .filter-sort { display: flex; align-items: center; gap: 8px; margin-left: auto; }
        .filter-clear-btn { padding: 8px 14px; border-radius: 8px; border: 1px solid rgba(239,68,68,0.3); background: rgba(239,68,68,0.1); color: #fca5a5; cursor: pointer; font-size: 12px; font-weight: 600; transition: var(--transition); white-space: nowrap; }
        .filter-clear-btn:hover { background: var(--primary); color: white; transform: scale(1.05); }
        .table-container { width: 100%; overflow: hidden; }
        table { width: 100%; border-collapse: collapse; }
        th { text-align: left; padding: 20px 25px; background: rgba(0,0,0,0.4); font-size: 13px; color: var(--text-light); font-weight: 700; cursor: pointer; user-select: none; white-space: nowrap; transition: var(--transition); }
        th:hover { color: white; background: rgba(0,0,0,0.5); }
        th .sort-icon { margin-left: 6px; opacity: 0.4; font-size: 11px; }
        th.sorted .sort-icon { opacity: 1; color: var(--primary); }
        td { padding: 20px 25px; border-bottom: 1px solid var(--border); font-size: 15px; color: white; vertical-align: middle; transition: background 0.2s; }
        tr { transition: var(--transition); }
        tr:hover td { background: rgba(255,255,255,0.03); }
        tr:hover { transform: translateX(2px); }
        .last-edited-cell { font-size: 12px; color: var(--text-light); white-space: nowrap; }
        .last-edited-cell strong { display: block; font-size: 13px; color: white; }
        .party-cell { font-size: 14px; font-weight: 600; }

        .pagination-bar { display: flex; justify-content: space-between; align-items: center; padding: 15px 25px; background: rgba(0,0,0,0.3); border-top: 1px solid var(--border); border-radius: 0 0 20px 20px; }
        .page-btn { background: rgba(255,255,255,0.05); color: white; border: 1px solid var(--border); padding: 8px 18px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; transition: var(--transition); display: flex; align-items: center; gap: 8px; }
        .page-btn:hover:not(:disabled) { background: var(--primary); border-color: var(--primary); transform: translateY(-2px); }
        .page-btn:disabled { opacity: 0.3; cursor: not-allowed; }
        .page-info { font-size: 14px; color: var(--text-light); }
        .page-info span { color: white; font-weight: 700; background: rgba(255,255,255,0.1); padding: 4px 10px; border-radius: 6px; margin: 0 4px; }

        .settings-card { padding: 40px; max-width: 950px; margin: 0 auto; }
        .settings-split-row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid var(--border); }
        .settings-title { font-size: 20px; font-weight: 700; color: white; margin-bottom: 10px; }
        .settings-desc { font-size: 14px; color: var(--text-light); margin-bottom: 20px; }
        .btn-backup { background: #3b82f6; color: white; border: none; padding: 12px 25px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; transition: var(--transition); }
        .btn-backup:hover { background: #2563eb; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(59,130,246,0.3); }
        .btn-restore { background: rgba(239, 68, 68, 0.1); color: #fca5a5; border: 1px solid var(--primary); padding: 12px 25px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; transition: var(--transition); }
        .btn-restore:hover { background: var(--primary); color: white; transform: translateY(-2px); }

        .guide-container { padding: 30px; }
        .guide-grid { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
        .guide-item { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 12px; padding: 25px; display: flex; align-items: center; justify-content: space-between; transition: var(--transition); animation: slide-in-x 0.5s var(--ease-out) both; }
        .guide-item:nth-child(1){animation-delay:.1s} .guide-item:nth-child(2){animation-delay:.18s} .guide-item:nth-child(3){animation-delay:.26s} .guide-item:nth-child(4){animation-delay:.34s} .guide-item:nth-child(5){animation-delay:.42s} .guide-item:nth-child(6){animation-delay:.5s} .guide-item:nth-child(7){animation-delay:.58s}
        .guide-item:hover { background: rgba(255,255,255,0.06); border-color: var(--primary); transform: translateX(6px); }
        .guide-info h4 { color: white; font-size: 17px; margin-bottom: 5px; font-weight: 700; }
        .guide-info p { color: var(--text-light); font-size: 13px; margin: 0; }
        .guide-actions { display: flex; gap: 8px; }
        .btn-role { background: rgba(139, 92, 246, 0.15); color: #c4b5fd; border: 1px solid rgba(139, 92, 246, 0.3); }
        .btn-role:hover { background: #8b5cf6 !important; color: white !important; border-color: #8b5cf6 !important; }
        .btn-map { background: rgba(6, 182, 212, 0.15); color: #67e8f9; border: 1px solid rgba(6, 182, 212, 0.3); }
        .btn-map:hover { background: var(--cyan) !important; color: #0f172a !important; border-color: var(--cyan) !important; }

        .sessions-container { padding: 30px; }
        .session-card { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 14px; padding: 20px 24px; margin-bottom: 14px; transition: var(--transition); animation: slide-up 0.4s var(--ease-out) both; }
        .session-card:hover { border-color: rgba(59,130,246,0.4); background: rgba(255,255,255,0.05); transform: translateX(4px); }
        .session-card.is-me { border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.04); }
        .session-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
        .session-user { display: flex; align-items: center; gap: 14px; }
        .session-icon { font-size: 26px; color: var(--text-light); }
        .session-icon.me { color: var(--success); }
        .session-name { font-size: 16px; font-weight: 700; color: white; }
        .session-device { font-size: 12px; color: var(--text-light); margin-top: 3px; }
        .me-badge { background: rgba(16,185,129,0.2); color: var(--success); font-size: 10px; padding: 2px 10px; border-radius: 10px; font-weight: 700; margin-left: 8px; vertical-align: middle; }
        .session-meta { display: flex; gap: 20px; margin-top: 14px; flex-wrap: wrap; }
        .session-meta-item { font-size: 12px; color: var(--text-light); display: flex; align-items: center; gap: 6px; }
        .session-meta-item strong { color: white; }
        .session-meta-item i { width: 14px; }
        .session-progress { margin-top: 12px; background: rgba(255,255,255,0.06); border-radius: 6px; height: 6px; overflow: hidden; }
        .session-progress-bar { height: 100%; border-radius: 6px; transition: width 0.8s var(--ease-out); }
        .session-actions { display: flex; gap: 8px; }
        .btn-force-logout { background: rgba(239,68,68,0.15); color: #fca5a5; border: 1px solid rgba(239,68,68,0.3); padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 600; transition: var(--transition); display: flex; align-items: center; gap: 6px; }
        .btn-force-logout:hover { background: var(--primary); color: white; border-color: var(--primary); transform: scale(1.05); }
        .btn-force-logout-all { background: rgba(239,68,68,0.2); color: #fca5a5; border: 1px solid rgba(239,68,68,0.4); padding: 10px 20px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 700; transition: var(--transition); display: inline-flex; align-items: center; gap: 8px; }
        .btn-force-logout-all:hover { background: var(--primary); color: white; transform: scale(1.05); }
        .sessions-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
        .sessions-count-badge { background: rgba(59,130,246,0.15); color: #60a5fa; border: 1px solid rgba(59,130,246,0.3); padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 700; }
        .sessions-actions-row { display: flex; gap: 10px; align-items: center; }
        .btn-refresh-sessions { background: rgba(59,130,246,0.1); color: #60a5fa; border: 1px solid rgba(59,130,246,0.3); padding: 10px 18px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; transition: var(--transition); display: inline-flex; align-items: center; gap: 8px; }
        .btn-refresh-sessions:hover { background: #3b82f6; color: white; transform: scale(1.05); }
        .btn-refresh-sessions:hover i { animation: spin-once 0.5s ease; }
        @keyframes spin-once { to { transform: rotate(360deg); } }

        .tab-content { display: none; }
        .tab-content.active { display: block; animation: fadeUp 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
        @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

        .loader { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(11, 17, 33, 0.95); z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--primary); font-weight: 600; }
        .loader i { animation: spin-loader 0.8s linear infinite; font-size: 3rem; }
        @keyframes spin-loader { to { transform: rotate(360deg); } }

        .results-count-bar { padding: 10px 25px; background: rgba(0,0,0,0.15); font-size: 13px; color: var(--text-light); border-bottom: 1px solid var(--border); }
        .results-count-bar span { color: white; font-weight: 700; }

        @media (max-width: 1200px) { .dash-grid { grid-template-columns: 1fr; } .create-card { flex-direction: column; align-items: flex-start; gap: 20px; } .create-actions { width: 100%; } .navbar { padding: 0 20px; } .sync-text { display: none; } .stats-bar { grid-template-columns: repeat(2,1fr); } }
        @media (max-width: 768px) { .settings-split-row { grid-template-columns: 1fr; gap: 30px; } .stats-bar { grid-template-columns: 1fr; } .kbd-hint { display: none; } }

        .fp-wrap { position: relative; display: inline-flex; align-items: center; }
        .fp-wrap .filter-input { padding-right: 34px; min-width: 160px; cursor: default; }
        .fp-cal-btn {
            position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
            background: none; border: none; cursor: pointer; color: var(--text-light);
            font-size: 13px; padding: 3px; line-height: 1; transition: color 0.2s; z-index: 2;
        }
        .fp-cal-btn:hover { color: var(--primary); }
        .fp-popup {
            position: absolute; top: calc(100% + 6px); left: 0; z-index: 3000;
            background: #0f172a; border: 1px solid var(--border); border-radius: 14px;
            padding: 14px 14px 10px; width: 268px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.8);
            display: none;
        }
        .fp-popup.fp-open { display: block; animation: fpIn 0.16s var(--ease-out); }
        @keyframes fpIn { from { opacity:0; transform:translateY(-8px) scale(0.97); } to { opacity:1; transform:translateY(0) scale(1); } }
        .fp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 6px; }
        .fp-selects { display: flex; gap: 5px; flex: 1; }
        .fp-sel {
            flex: 1; padding: 5px 7px; border-radius: 7px; border: 1px solid var(--border);
            background: rgba(0,0,0,0.4); color: white; font-size: 12px; cursor: pointer; outline: none;
        }
        .fp-sel option { background: #0f172a; }
        .fp-navs { display: flex; gap: 3px; }
        .fp-nav {
            width: 27px; height: 27px; border-radius: 7px; border: 1px solid var(--border);
            background: rgba(255,255,255,0.06); color: white; cursor: pointer; font-size: 11px;
            display: flex; align-items: center; justify-content: center; transition: var(--transition);
        }
        .fp-nav:hover { background: var(--primary); border-color: var(--primary); }
        .fp-dow { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; margin-bottom: 4px; }
        .fp-dow-lbl { font-size: 10px; font-weight: 700; color: var(--text-light); text-align: center; padding: 3px 0; }
        .fp-days { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
        .fp-day {
            height: 31px; display: flex; align-items: center; justify-content: center;
            border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 500;
            color: var(--text-light); border: 1px solid transparent; transition: all 0.12s;
        }
        .fp-day:hover { background: rgba(255,255,255,0.1); color: white; }
        .fp-day.fp-today { border-color: rgba(239,68,68,0.5); color: var(--primary); font-weight: 700; }
        .fp-day.fp-sel-day { background: var(--primary) !important; color: white !important; border-color: var(--primary) !important; font-weight: 700; }
        .fp-day.fp-has { position: relative; }
        .fp-day.fp-has::after { content:''; position:absolute; bottom:3px; width:4px; height:4px; border-radius:50%; background:var(--success); }
        .fp-day.fp-empty { pointer-events: none; }
        .fp-foot { display: flex; gap: 5px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.07); }
        .fp-btn-today {
            flex: 1; padding: 7px; border-radius: 7px; border: 1px solid rgba(16,185,129,0.3);
            background: rgba(16,185,129,0.1); color: var(--success);
            font-size: 11px; font-weight: 700; cursor: pointer; transition: var(--transition);
        }
        .fp-btn-today:hover { background: var(--success); color: white; }
        .fp-btn-clear {
            flex: 1; padding: 7px; border-radius: 7px; border: 1px solid var(--border);
            background: rgba(255,255,255,0.04); color: var(--text-light);
            font-size: 11px; font-weight: 700; cursor: pointer; transition: var(--transition);
        }
        .fp-btn-clear:hover { background: rgba(255,255,255,0.1); color: white; }
    /* Buttons & Inputs added for navbar */
.nav-btn {
    background: rgba(255,255,255,0.05);
    color: white;
    border: 1px solid var(--border);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
}
.nav-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
.nav-btn.logout {
    background: rgba(239,68,68,0.15);
    color: #fca5a5;
    border-color: rgba(239,68,68,0.3);
}
.nav-btn.logout:hover {
    background: var(--primary);
    color: white;
}
.editable-badge {
    background: rgba(0,0,0,0.3);
    color: white;
    border: 1px solid transparent;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 150px;
    transition: var(--transition);
}
.editable-badge:focus, .editable-badge:hover {
    border-color: var(--primary);
    background: rgba(0,0,0,0.5);
    outline: none;
}
.editable-title {
    background: transparent;
    color: white;
    border: 1px solid transparent;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-size: 28px;
    font-weight: 800;
    width: 100%;
    margin-bottom: 8px;
    transition: var(--transition);
}
.editable-title:focus, .editable-title:hover {
    border-color: var(--primary);
    outline: none;
    background: rgba(0,0,0,0.2);
}