/* HEADER */
        .header { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
        .header h1 { font-size: 18px; font-weight: 600; }
        .header .sync-badge { font-size: 11px; padding: 4px 10px; border-radius: 20px; font-weight: 600; }
        .sync-online { background: var(--success); color: white; }
        .sync-offline { background: var(--danger); color: white; }
        .sync-pending { background: var(--warning); color: white; }
            
        /* NEW */
        .header-left {
             display: flex;
             align-items: center;
             gap: 10px;
         }
         .app-logo {
             width: 28px;
             height: 28px;
             display: block;
         }

         .header-title {
             font-size: 17px;
             font-weight: 700;
         }
        
         .header-actions {
             display: flex;
             align-items: center;
             gap: 8px;
         }

        .header-sub {
            font-size: 11px;
            opacity: 0.7;
            display: block;
         }

        .header-btn {
            background: none;
            border: 1px solid rgba(255,255,255,0.4);
            color: white;
            padding: 4px 10px;
            border-radius: 8px;
            font-size: 13px;
            cursor: pointer;
        }

        /* MAIN TAB BAR */
        .tab-bar { display: flex; background: white; border-bottom: 2px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; }
        .tab-btn { flex: none; padding: 12px 16px; text-align: center; font-size: 13px; font-weight: 600; color: var(--text-muted); border: none; background: none; cursor: pointer; border-bottom: 3px solid transparent; transition: all 0.2s; white-space: nowrap; }
        .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
    
        /* SUB TAB BAR */
        .sub-tab-bar { display: flex; background: #f0f0eb; border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; }
        .sub-tab-btn { flex: none; padding: 10px 16px; font-size: 12px; font-weight: 600; color: var(--text-muted); border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; transition: all 0.2s; }
        .sub-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); background: white; }
    
        /* CONTENT */
        .tab-content { display: none; padding: 16px; }
        .tab-content.active { display: block; }
        .sub-content { display: none; }
        .sub-content.active { display: block; }